Images of variant not loaded

Hi Nicolas, This is my problem.

I set two CHARACTERISTICS: Colors and Size. So I manage the variants and turn on some colors.
Now I load for each color a picture about that particular color, but in frontend when I choose that color the images do not load...

It might happen if you have a javascript error on the page, or if you changed the view of the product page and removed/broke some of the HTML in it. Could you give a link to that page so that we can have a look.

www.stylover.com/index.php?option=com_co...rada&catid=2:current

This is the link of page where I have the problem. Try to change "Colore" from "Verde" to "Beige". It should change the pics but it doesn't works.

it seems a problem of template

I just tried your link but it doesn't work.

You mean the link is corrupted?

Your link now works. Not sure why it didn't before.
The images change when changing the characteristics on that page when we change the characteristics values dropdowns.

Nicolas I found the problem. It is in wiew>product>show... due to a change that I made.
I solved a part of the problem, but when I choose a variant the picture becomes big. Before now I solved this via css but now it no more work

Nicolas for me the problem is here. Please, check out the page. The variant image lose the style and also the pop up mode no more works.

<?php
if(!empty($this->element->variants)){
foreach($this->element->variants as $variant){
$variant_name = array();
if(!empty($variant->characteristics)){
foreach($variant->characteristics as $k => $ch){
$variant_name[]=$ch->characteristic_id;
}
}
$variant_name = implode('_',$variant_name);
if(!empty($variant->images)){
?>
<div id="hikashop_product_image_<?php echo $variant_name;?>" style="display:none;">
<div id="hikashop_main_image_div_<?php echo $variant_name;?>" >
<?php
$image = reset($variant->images);
if(!$this->config->get('thumbnail')){
echo '<img src="'.$this->image->uploadFolder_url.$image->file_path.'" alt="'.$image->file_name.'" id="hikashop_main_image_'.$variant_name.'" style="margin-right:8px;margin-bottom:8px;display:block;vertical-align:top;float:left;padding:4px;border:1px solid #666666;" />';
}else{
$style='';
if(count($variant->images)>1){
$height = $this->config->get('thumbnail_y');
if(!empty($height)){
$style=' style="height:'.($height+5).'px;"';
}
} ?>
<div class="hikashop_product_main_image_thumb" id="hikashop_main_image_thumb_div_<?php echo $variant_name;?>" <?php echo $style;?>>
<?php echo $this->image->display($image->file_path,true,$image->file_name,'id="hikashop_main_image_'.$variant_name.'" style="margin-right:8px;margin-bottom:8px;display:block;vertical-align:top;float:left;padding:4px;border:1px solid #666666;"','id="hikashop_main_image_'.$variant_name.'_link"'); ?>
</div>
<?php
}
if(count($variant->images)>1){
?>
</div><div id="hikashop_small_image_div_<?php echo $variant_name;?>"><?php
foreach($variant->images as $image){
echo $this->image->display($image->file_path,'hikashop_main_image_'.$variant_name,$image->file_name,'class="hikashop_child_image"');
}
}
?>
</div>
</div>

Hard to say... I just checked your page and you had an error in your code so it's even harder to understand the problem without seeing it.

Try now!

That fact that the popup do not work is because the modalizer library is triggered on the page loading to initialize the events on all the links of the page, but not after clicking on the images like we do with the default code.
For the big image when changing the characteristics, that's because you need to set the height on it when displaying it, like the JS does automatically when you go on a small image after that.

nicolas wrote:

For the big image when changing the characteristics, that's because you need to set the height on it when displaying it, like the JS does automatically when you go on a small image after that.

How can I set the height?

Ok I resolved the big image...

For the popup, you need to add some modalizer js code to dynamically generate the popup from the link of the image when the image is clicked on (with an onclick attribute). I can't tell you the code to use as I don't know how modalizer works.

Can you show me where is the code that generate the link of the small image?
Thank you!

The small image link is generated in the function display of the file administrator/components/com_hikashop/helper/image.php

Nicolas, can you tell me the code to add modalizer to the small images, after selecting a variant?

This is an example page
www.stylover.com/index.php?option=com_co...rada&catid=2:current

Thank you!

I don't know actually. I just know that it's how it should be done.

Modalizer don't work after selecting a variant... this is not good for me.