I have tried to get the following scenario to work, with no success. I have 3 images. They are displayed in thumbnail form, in the bottom of a div. A main, preferred image, is displayed in a larger size above the thumbnails. I need that, when clicking on the thumbnail, the main image will change. So, in the image included, if I click on the green image, the main image will change from red to green.

Also I need that when clicking on the larger image, a modal window will appear, with a Slideshow of all the images, starting from the one clicked.

I have managed to make it work very easily with PHP-Javascript alone (10 minutes of programming) but I am not able to do it with none of the following modules: Colorbox, FlexSlider, Lightbox2.

Even when launching a View with FlexSlider content using Lightbox2, it works but it takes ages to load the content, even if I have disabled all extra HTML stuff by making a template tpl suggestion.

Sincerely, I don't think it is so complicated behaviour. Also there is the approach of FlexSlider with thumbnails, but I cannot manage to include the lightbox (modal window) effect.

enter image description here

1 Answer 1


I was able to find a perfect solution to this, very easily as always. I use module Lightbox2, with the Slideshow option. Now I don't put the href with the reference to the big images in the small images - that would be standard behaviour, but I create 3 empty href with the data (the data come from an array passed to the .tpl.php):

<a href="<?php print $image_value["filename"] . "-960.jpg"?>" id="imagelink<?php print $conti; ?>" rel="lightshow[products]<?php echo $conti; $conti++;?>" ></a>

The images themselves have other code which just changes the main image:

function change_photo(filename, conti){
    var object = document.getElementById("product-photo");
    object.src = filename + "-480.jpg";
    contagen = conti;
} // function

And finally in the onClick of the main image, I launch the slideshow by simulating a click of the empty links at the begginning of the code:

function launchslide(){
    var object = document.getElementById("imagelink" + contagen);
} // function

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.