将图库插件与图像放大功能插件集成在一起

Question

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

我在开发要达到的目标时遇到了一个小问题，我相信这可能主要是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图像缩放功能”

Answer 1

两者都没有（灯箱缩放+悬停缩放）并没有多大意义，您应该选择一个并随身携带。 灯箱非常易于使用，并且可以完全满足您的需求，所以我会这么做。 简单的小例子：-

<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/