我想在这里实现三件事，即
- 灯箱
- 缩略图滑块
- 云变焦
我能够使 3) 云缩放和 2) 缩略图滑块正常工作，但我不确定如何将滑块中的缩略图链接到主显示图像并弹出正确的选择。
任何人都可以发光吗？提前致谢！
我在顶部声明了这一点：
<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>
这里是 html/php 代码
<?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 ?>