Php 将滑块中的缩略图链接到主显示图像并正确弹出

我想在这里实现三件事，即

灯箱

缩略图滑块

云变焦

我能够获得“云缩放”和“缩略图”滑块，但我不确定如何将滑块中的缩略图链接到主显示图像并弹出正确的选择

有人能帮忙吗？提前谢谢

我在顶部声明：

$document->addScriptDeclaration（“
jQuery（文档）.ready（函数（）{
jQuery（“#灵活缩放附加图像Wrap”）.jCarouselLite({
btnNext:“.next”，
btnPrev:“.prev”，
可见：2，
卷轴：1，
通告:错
});     
});
jQuery（文档）.ready（函数（）{
jQuery（'.flexibleGallery'）.colorbox（{rel:'flexibleGallery'}）；
});   
jQuery.fn.flexibleZoom.defaults={
位置：'右'，
zoomWidth:'360'，
动物体重：“470”，
镜头容量：0.5，
平滑移动：7，
X:10，
调整：0，
节目名称：真的，
}; 
");

下面是html/php代码

我有一个我认为你想要的实时实现。看一看

我有一个可以在鼠标上方放大的主图像，在主图像下方最多有6个缩略图，单击后将显示为主图像，并且在主图像下方有一个链接，单击可在灯箱中放大。甚至可以将缩略图作为视频来代替主图像播放。
请澄清，我想打开thumnails弹出窗口，是吗？您尝试过这个吗
<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>

<?php // Product Main Image
if (!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 Images
if (!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 = 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=\"".$imgsrc."\">
            <img class=\"zoom-tiny-image-additional\" src=\"".$imgsrc_thumb."\"/>
            </a>
            <a class=\"flexibleGallery cboxElement\" href=\"".$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 ?>