Question

我看了我在网上可以找到的大多数jquery滚动器示例，到目前为止，似乎没有任何一个适合这个目的。

我并不是要您为我开发解决方案，因为我意识到我需要提供所有jQuery代码等。只是一个正确方向的指针。

以下代码使用“ Yith Woocommerce缩放放大镜”滑块，并包含一个主图像，其下方排列有缩略图。缩略图行的两侧都有滚动箭头。但是，在将图像显示为主图像之前，您需要实际单击缩略图。

<div class="images">
    <!-- Main image -->
    <a itemprop="image" href="#vMainImagePath#" class="yith_magnifier_zoom" rel="thumbnails">
        <img src="#vMainImagePath#" class="yit-image attachment-shop_single" />
    </a>

    <!-- Thumbnail images -->
    <div class="thumbnails slider">
        <a id="slider-prev" href="javascript:void(0);"></a>
        <a id="slider-next" href="javascript:void(0);"></a>
        <ul class="clearfix yith_magnifier_gallery">
            <!--- Query database for images, then loop -->
            <cfset qImages = oListing.getListingImages(listing_id=url.i)>
            <cfloop query="qImages">
                <cfset posClass = "">
                <cfif qImages.currentrow is 1>
                    <cfset posClass="first">
                <cfelseif qImages.currentrow is qImages.recordcount>
                    <cfset posClass="last">
                </cfif>

                <cfset vImageDIR = "#viewProductImageDIR#/#record_id#">
                <cfset vImageFile = qImages.file>
                <cfset vImagePath = "#vImageDIR#/#vImageFile#">

                <cfset vThumbDIR = "#viewProductThumbDIR#/#record_id#">
                <cfset vThumbFile = qImages.file>
                <cfset vThumbPath = "#vThumbDIR#/#vThumbFile#">

                <li class="yith_magnifier_thumbnail #posClass#">
                    <a href="#vImagePath#" class="yith_magnifier_thumbnail #posClass#" title="#qListing.title#" data-small="#vImagePath#" rel="thumbnails[product-gallery]"><img src="#vThumbPath#" class="resize130" alt="#qListing.title#"/></a></li>
            </cfloop>  
        </ul>
    </div>
</div>

但是我希望滚动箭头实际更改主图像。因此，当您单击箭头本身时，图像会更改。理想情况下，主要图像的两侧还会有滚动箭头，这样人们就可以忽略缩略图，而只浏览主图像。

可以看到我所需要的实时示例here。

我希望有人有一个想法或一些小的代码片段来指导我。我应该能够适应您的所有需求以满足我自己的需求。

修改Yith缩放放大镜-主图像上的滚动条

0 个答案: