- Posts: 59
- Thank you received: 0
Edit thumbnail layout in single product
11 years 5 months ago #200093
by simonev
Edit thumbnail layout in single product was created by simonev
-- HikaShop version -- : 2.4.0
-- Joomla version -- : 3.4.1
-- PHP version -- : 5.5
Hi,
I have to change the way to show the main images in a single product and I need your help.
Instead of thumbnail images I need a navigation like uikit dotnav ( getuikit.com/docs/dotnav.html ) or something like this.
Main image have to change "onclick" on the bullet in the dotnav ad not onmousehover and no popup has to appear by clicking on thumbnail (only if I click on the main image).
I see the file show_block_img on product view but I don't know really how to edit it.
Hope you can help me.
Thank you
-- Joomla version -- : 3.4.1
-- PHP version -- : 5.5
Hi,
I have to change the way to show the main images in a single product and I need your help.
Instead of thumbnail images I need a navigation like uikit dotnav ( getuikit.com/docs/dotnav.html ) or something like this.
Main image have to change "onclick" on the bullet in the dotnav ad not onmousehover and no popup has to appear by clicking on thumbnail (only if I click on the main image).
I see the file show_block_img on product view but I don't know really how to edit it.
Hope you can help me.
Thank you
Please Log in or Create an account to join the conversation.
11 years 5 months ago #200116
by Jerome
Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.
Replied by Jerome on topic Edit thumbnail layout in single product
Hi,
You will find some useful explanations in that thread:
www.hikashop.com/forum/install-update/86...mage-thumbnails.html
Regards,
You will find some useful explanations in that thread:
www.hikashop.com/forum/install-update/86...mage-thumbnails.html
Regards,
Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.
Please Log in or Create an account to join the conversation.
11 years 5 months ago #200137
by simonev
Replied by simonev on topic Edit thumbnail layout in single product
Thank you,
I did already follow it but I forgot to change the image popup mode in configuration. Now everything works.
One last thing, how can I add a class like "active-thumbnail" to the thumbnail when the thumbnail image correspond to the main image?
(Sorry for bad english and really thanks for your support)
I did already follow it but I forgot to change the image popup mode in configuration. Now everything works.
One last thing, how can I add a class like "active-thumbnail" to the thumbnail when the thumbnail image correspond to the main image?
(Sorry for bad english and really thanks for your support)
Please Log in or Create an account to join the conversation.
11 years 5 months ago #200143
by nicolas
Replied by nicolas on topic Edit thumbnail layout in single product
Hi,
You would have to edit the file "show_block_img" via the menu Display>Views and replace its code with this code:
You would have to edit the file "show_block_img" via the menu Display>Views and replace its code with this code:
Code:
<?php
$variant_name = '';
$variant_main = '_main';
$display_mode = '';
if(!empty($this->variant_name)) {
$variant_name = $this->variant_name;
if(substr($variant_name, 0, 1) != '_')
$variant_name = '_' . $variant_name;
$variant_main = $variant_name;
$display_mode = 'display:none;';
}
?><div id="hikashop_product_image<?php echo $variant_main;?>" class="hikashop_global_image_div" style="<?php echo $display_mode;?>">
<div id="hikashop_main_image_div<?php echo $variant_name;?>" class="hikashop_main_image_div">
<?php
if(!empty ($this->element->images)){
$image = reset($this->element->images);
}
$height = (int)$this->config->get('product_image_y');
$width = (int)$this->config->get('product_image_x');
if(empty($height)) $height = (int)$this->config->get('thumbnail_y');
if(empty($width)) $width = (int)$this->config->get('thumbnail_x');
$divWidth = $width;
$divHeight = $height;
$this->image->checkSize($divWidth,$divHeight,$image);
if (!$this->config->get('thumbnail')) {
if(!empty ($this->element->images)){
echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />';
}
} else {
$style = '';
if (!empty ($this->element->images) && count($this->element->images) > 1) {
if (!empty($height)) {
$style = ' style="height:' . ($height + 20) . 'px;"';
}
}
$variant_name='';
if(isset($this->variant_name)){
$variant_name=$this->variant_name;
}
?>
<div class="hikashop_product_main_image_thumb" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" <?php echo $style;?> >
<div style="<?php if(!empty($divHeight)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image">
<div style="position:relative;text-align:center;clear:both;<?php if(!empty($divWidth)){ echo 'width:'.$divWidth.'px;'; } ?>margin: auto;" class="hikashop_product_main_image_subdiv">
<?php
if($this->image->override) {
echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $width, $height);
} else {
if(empty($this->popup))
$this->popup = hikashop_get('helper.popup');
$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));
$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
if($img->success) {
$attr = 'title="'.$this->escape(@$image->file_description).'"';
if (!empty ($this->element->images) && count($this->element->images) > 1) {
$attr .= 'onclick="return window.localPage.openImage(\'hikashop_main_image'.$variant_name.'\');"';
}
$html = '<img id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
if(!empty($this->element->badges))
$html .= $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0',false);
echo $this->popup->image($html, $img->origin_url, null, $attr);
}
}
?>
</div>
</div>
</div>
<?php
}
?>
</div>
<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div">
<?php
if (!empty ($this->element->images) && count($this->element->images) > 1) {
$firstThunb = true;
foreach ($this->element->images as $image) {
if($this->image->override) {
echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width, $height);
} else {
if(empty($this->popup))
$this->popup = hikashop_get('helper.popup');
$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
if($img->success) {
$id = null;
$classname='hikashop_child_image';
if($firstThunb) {
$id = 'hikashop_first_thumbnail'.$variant_name;
$firstThunb = false;
$classname.=' active-thumbnail';
}
$attr = 'title="'.$this->escape(@$image->file_description).'" onmouseover="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', '.$img->height.', \''.str_replace("'","\'",@$image->file_description).'\', \''.str_replace("'","\'",@$image->file_name).'\');"';
$html = '<img class="'.$classname.'" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
if(empty($variant_name)) {
echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image'));
} else {
echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image_VARIANT_NAME'));
}
}
}
}
}
?>
</div>
</div>
<script type="text/javascript">
if(!window.localPage)
window.localPage = {};
if(!window.localPage.images)
window.localPage.images = {};
window.localPage.changeImage = function(el, id, url, width, height, title, alt) {
var d = document, target = d.getElementById(id);
if(!target) return false;
target.src = url;
target.width = width;
target.height = height;
target.title = title;
target.alt = alt;
var thumbs_div = d.getElementById('hikashop_small_image_div');
if(thumbs_div){
var thumbs_img = thumbs_div.getElementsByTagName('img');
if(thumbs_img){
for (var i = 0; i < thumbs_img.length; i++) {
thumbs_img[i].className = thumbs_img[i].className.replace(new RegExp(" ?\\bactive-thumbnail\\b"),'');
}
}
}
var thumb_img = el.getElementsByTagName('img');
if(thumb_img){
for (var i = 0; i < thumb_img.length; i++) {
thumb_img[i].className += ' active-thumbnail';
}
}
window.localPage.images[id] = el;
return false;
};
window.localPage.openImage = function(id) {
if(!window.localPage.images[id])
window.localPage.images[id] = document.getElementById('hikashop_first_thumbnail<?php echo $variant_name;?>');
window.localPage.images[id].click();
return false;
};
</script>
The following user(s) said Thank You: simonev
Please Log in or Create an account to join the conversation.
11 years 5 months ago #200263
by simonev
Replied by simonev on topic Edit thumbnail layout in single product
Thank you! Combined with previous thread works perfectly!
Super support!
Super support!
Please Log in or Create an account to join the conversation.
Time to create page: 0.173 seconds