0

我知道这个网站是在积分系统上工作的，所以我想强调一下，我是一名刚起步的开发人员，而且我是这个网站的新手。请友好一点！！！

我在开发我想要实现的目标时遇到了一个小问题，我相信这可能主要是 HTML 问题。我已经下载了两个插件，一个是图像缩放功能，另一个是带有缩略图的图片库。

我面临的挑战是将这两个函数集成在一起，因为这两个函数都需要我找不到将这两个脚本合并在一起的“干净”方法。有没有人知道我如何将这两个脚本合并在一起？

图像缩放 HTML

        <a class="zoom" href="css/product-gallery/item1.jpg"><img class="product-gallery" src="css/product-gallery/item1.jpg" alt="img1"></a>

带有缩略图 HTML 的图片库

<a class="thumb" href="css/product-gallery/item1.jpg" title="Title #0"><img src="css/thumbnails/thumb2.jpg"/></a>

单击此处获取图像缩放代码

PS“这不是我追求的灯箱效果，它更像是我追求的eCom图像缩放功能”

4

1 回答 1

0

同时拥有它们（灯箱缩放+悬停缩放）并没有多大意义，您应该选择一个并继续使用。Lightbox 非常易于使用，并且会完全按照您的意愿进行操作，所以我会使用它。快速的小例子： -

<script type="text/javascript">
$(function() {
    $('#imageGallery a').lightBox();
});
</script>

<div id="imageGallery">
   <a href="image-you-want-to-zoom"><img src="thumbnail-image" /></a>
</div>

如果“灯箱式”功能不是您所追求的，请尝试以下操作：

http://www.jacklmoore.com/zoom

对于它的一些快速模型代码：

http://jsfiddle.net/jquerybyexample/cvjsN/

于 2012-04-18T13:42:37.320 回答