How to configure a Slideshow with thumbnails in modal window 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.
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):

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


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);
    object.click();
} // function