我在将缩略图加载到 div 然后对其使用云缩放时遇到问题,基本上 html 是这样的:
<!-- The Original Image -->
<p class="product-image product-image-zoom replace">
<a class="cloud-zoom" id="zoom1" href="src/to/img.jpg" rel="adjustX: 10, adjustY:-4">
<img id="" src="src/to/img.jpg" />
</a>
</p>
<div class="more-views">
<ul>
<li>
<a href=""><img class="image-rollover" src="source/to/img.jpg" width="67" height="67"/></a>
</li>
<li>
<a href=""><img class="image-rollover" src="source/to/img.jpg" width="67" height="67"/></a>
</li>
<li>
<a href=""><img class="image-rollover" src="source/to/img.jpg" width="67" height="67"/></a>
</li>
</ul>
这是我用来将每个缩略图加载到主 img 标签中的 jquery:
jQuery('.image-rollover').hover(function() {
jQuery('.replace img').attr("src", this.src);
jQuery('.zoom').attr("href", this.src);
});
我还在主图像上使用云缩放:
<script type="text/JavaScript" src="<?php echo $this->getSkinUrl('js/cloud-zoom.1.0.2.min.js') ?>"></script>
所以这是我的问题:缩略图可以加载到 div 中,但是每次我将鼠标悬停在新加载的缩略图上时,都会出现云缩放,但仍然显示初始图像,有没有办法让云缩放显示当前加载的图像?
一只忙碌的猫 http://beta2.stocksale.ca/picture.png
请帮忙!!!啊啊啊!!!