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>

Click here for Image zoom code

P.S“这不是我之后的灯箱效果，它更像是我之后的电子图像缩放功能”

Answer 1

同时拥有它们（灯箱缩放+悬停缩放）并没有多大意义，你应该选择一个并使用它。 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/

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

1 个答案: