Question

我需要做的是当点击产品缩略图时主图像被更新但我似乎无法弄明白。关于这个的奇怪部分是在页面加载之后，调整浏览器页面的大小似乎触发脚本重新初始化，从而在单击缩略图时更新主图像。

此处的演示链接http://www.venaproducts.com/dev/product/fosmon-hybo-duoc-case-for-amazon-fire-phone/

请帮忙。我已经在这里梳理了文档但我必须遗漏一些东西。 http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced

        <script type="text/javascript">
        var allVariants = "";

        jQuery(document).ready(function($) {
            $('body').append('<div id="prod_var_images" />');

            if (typeof product_variations === 'undefined') { 
                allVariants = $('form.variations_form').data('product_variations');
            } else { 
                allVariants = product_variations; 
            }

            $('input[name="variation_id"]').change( function() {
                var variantID = $(this).val();
                var variantData = "";
                for (var p = 0; p < allVariants.length; p++) {          
                    if ( allVariants[p].variation_id == variantID ) {
                        variantData = allVariants[p];
                    }           
                }

                //update SKU
                if(variantData) {
                    if(variantData.sku) {
                        $('span.prod-sku').text('SKU: ' + variantData.sku);
                        $('*[class*="variation-VN"]:not([class*="variation-' + variantData.sku + '"])').hide();
                        $('*[class*="variation-' + variantData.sku + '"]').show();
                    }
                }

                if(variantData.sku) {
                    //pull all variation images out and append to #prod_var_images div
                    $('#product-images img[alt*="variation-VN"]').closest('a').appendTo('#prod_var_images');

                    //only show main sku variation images below main images
                    $('#prod_var_images img[alt*="variation-' + variantData.sku + '"]').closest('a').appendTo($('#product-images'));

                    //reinitialize the slide for new the content
                    $('#product-images').carouFredSel({
                        reInit:true,
                        height: 'auto',
                        width: 276,
                        items: 3,
                        scroll: {
                            easing: "elastic",
                            duration: 1000 
                        },
                        circular: false,
                        auto: false,
                        swipe: {
                            onMouse: true,
                            onTouch: true
                        },
                        prev: ".product-prev",
                        next: ".product-next",
                    });

                    //rebuild thumbnail links to go to correct images - NOT WORKING
                    $('#product-images a').each(function(i) {               
                        $(this).bind('click', function() {
                            $('#product-images a').addClass('active');                      
                        });             
                    }); 
                }
            });
        });
    </script>

Answer 1

此代码段将通过单击拇指上的caroufredsel插件来更新预览图像。如何处理调整大小我无法告诉你，阅读有关自适应和响应式设计的更多信息。

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style>
        #gallery_01 img {
            border: 2px solid white;
        }
    </style>
</head>
<body>
<img id='img_01' src='/small/image1.jpg' data-zoom-image='/large/image1.jpg'/>

<div id='gal1'>
    <a href='#' data-image='/small/image1.jpg' data-zoom-image='/large/image1.jpg'>
        <img src='/thumb/image1.jpg'/>
    </a>
    <a href='#' data-image='/small/image2.jpg' data-zoom-image='/large/image2.jpg'>
        <img src='thumb/image2.jpg'/>
    </a>
    <a href='#' data-image='/small/image3.jpg' data-zoom-image='/large/image3.jpg'>
        <img src='thumb/image3.jpg'/>
    </a>
    <a href='#' data-image='/small/image4.jpg' data-zoom-image='/large/image4.jpg'>
        <img id='img_01' src='thumb/image4.jpg'/>
    </a>
</div>

<div id='controls'>
    <span><a id='prev' href='#'><- Prev</a></span>
    <span>&nbsp;</span>
    <span><a id='next' href='#'>Next -></a></span>
</div>

<script src='/js/jquery-1.8.3.min.js'></script>
<script src='/js/jquery.elevateZoom-3.0.8.min.js'></script>
<script src='/js/jquery.carouFredSel-6.2.1-packed.js'></script>
<script type='text/javascript'>
    $(function () {
        var zoom_config = {
                gallery: 'gallery_01',
                cursor: 'pointer',
                galleryActiveClass: 'active',
                imageCrossfade: true
            },
            carousel_config = {
                items: 3,
                height: 100,
                width: 300,
                circular: true,
                infinite: true,
                direction: 'left',
                scroll: {items: 1, easing: 'elastic', duration: 500, pauseOnHover: true},
                prev: '#prev',
                next: '#next'
            },
            $large_image = $('#img_01'),
            $gallery = $('#gal1'),
            $thumbs = $gallery.find('a');

        $large_image.elevateZoom(zoom_config);
        $gallery.carouFredSel(carousel_config);

        $thumbs.on('click', function (e) {
            e.preventDefault();

            var self = $(this);

            $large_image.removeData('elevateZoom');
            $large_image.attr('src', self.data('image'));
            $large_image.data('zoom-image', self.data('zoom-image'));
            $large_image.elevateZoom(zoom_config);
        });
    });
</script>
</body>
</html>

carousFredSel更新图像容器

1 个答案: