將圖庫插件與圖像放大功能插件集成在一起

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/