Link thumbnails in slider to the main display image and pop up correctly

[bigdm]

There are 3 things I want to achieve here, namelyLightboxThumbnails sliderCloud zoomI am able to get the 3)Cloud zoom & 2)Thumbnail slider working, but I am unsure how to link the thumbnails in the slider to the main display image and pop up with the right selection. Can anybody shed a light? Thanks in advance! I declared this at the top:<pre>$document->addScriptDeclaration(" jQuery(document).ready(function() { jQuery('#flexible-zoom-additionalImagesWrap').jCarouselLite({ btnNext: '.next', btnPrev: '.prev', visible: 2, scroll: 1, circular: false }); });jQuery(document).ready(function() { jQuery('.flexibleGallery').colorbox({rel:'flexibleGallery'}); }); jQuery.fn.flexibleZoom.defaults = { position: 'right', zoomWidth: '360', zoomHeight: '470', lensOpacity: 0.5, smoothMove: 7, adjustX: 10, adjustY: 0, showTitle: true, }; ");</pre>and here are the html/php codes<?php // Product Main Imageif (!empty($this->product->images[0])) {?><div class="main-image"> <?php echo $this->product->images[0]->displayMediaFull('class="medium-image modal" id="medium-image"', true, 'class="flexible-zoom"', true, 'alt="Zoom Type 1: Standard"', true); ?></div><div class="flexible-zoom-magnify"> <a id="flexible_lightbox" class="flexibleGallery"> <span class="flexible-zoom-magnify"></span> </a> </div><?php } // Product Main Image END ?><?php// Showing The Additional Imagesif (!empty($this->product->images) and count ($this->product->images)>1) { ?><div class="additional-images"> <?php // Product Images slider if($this->product->images[0]->virtuemart_media_id!=0 && count($this->product->images)>0) { echo " < div id=\"flexible-zoom-additionalImagesWrap\" class=\"flexible-zoom-additionalImagesWrap\">"; echo " <div class=\"more-views-arrow prev\"></div>"; echo " <div class=\"flexible-zoom-additionalImages\">"; echo "<ul class=\"additionalImagesslider\">"; foreach($this->product->images as $a=>$b){ $imgsrc = http://stackoverflow.com/questions/14037087/JURI::root().$b->file_url; $imgsrc_thumb = JURI::root().$b->file_url_thumb; echo"<li class=\"flexible-zoom-additionalImages-slide\"> <a name=\"$imgsrc_thumb\" rel=\"useZoom: 'zoom1', smallImage: '$imgsrc_thumb\" class=\"flexible-zoom-gallery\" href=http://stackoverflow.com/"".$imgsrc."\"> <img class=\"zoom-tiny-image-additional\" src=http://stackoverflow.com/"".$imgsrc_thumb."\"/> </a> <a class=\"flexibleGallery cboxElement\" href=http://stackoverflow.com/"".$imgsrc."\"></a> </li>"; } echo "</ul>"; echo "</div>"; echo "<div class=\"more-views-arrow next\"></div>"; echo "</div>"; } ?> <div class="clear"></div></div><?php} // Showing The Additional Images END ?>