Блог

Я пытаюсь cd-quick-view отобразить правильную информацию на основе выбора пользователя при нажатии cd-trigger внутри элемента ul в верхней части кода.

Идея состоит в том, чтобы перечислить элементы, как показано здесь: https://codyhouse.co/gem/css-product-quick-view /

Но предоставленный код из приведенного выше URL-адреса выполняет только один cd-quick-view для всех продуктов, а не один для каждого продукта. Я хочу расширить его, и у каждого продукта есть свое собственное изображение и описание, следовательно cd-quick-view , для каждого продукта / товара.

Проблема, с которой я сталкиваюсь, заключается в сопоставлении cd-trigger с правильным cd-quick-view . Например, пользователь нажимает на индикатор продукта, правильный cd-quick-view будет отображаться. Прямо сейчас я нажимаю «lamp» и получаю самый последний cd-quick-view , который называется couch.

Есть идеи?

Я работаю в рамках фреймворка Joomla 3.6 и переопределяю модуль mod_article_category.

PHP /HTML

 <ul class="cd-items cd-container category-module<?php echo $moduleclass_sfx; ?>">
    <?php foreach ($list as $item) : ?>
        <li class="cd-item">
            <img src="<?php echo json_decode($item->images)->image_intro; ?>" />
            <a href="#0" class="cd-trigger"><?php echo $item->title; ?></a>
        </li>
    <?php endforeach; ?>
</ul>
<?php foreach ($list as $item) : ?>
<div class="cd-quick-view">
        <div class="cd-slider-wrapper">
            <ul class="cd-slider">
                <li class="selected"><img src="<?php echo json_decode($item->images)->image_intro; ?>" /></li>
            </ul><!-- cd-slider -->
        </div><!-- cd-slider-wrapper -->

        <div class="cd-item-info">
            <h2>
                <?php if ($params->get('link_titles') == 1) : ?>
                <a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
                    <?php echo $item->title; ?>
                </a>
                <?php else : ?>
                    <?php echo $item->title; ?>
                <?php endif; ?>
            </h2>
            <?php if ($params->get('show_introtext')) : ?>
                <p class="mod-articles-category-introtext">
                    <?php echo $item->displayIntrotext; ?>
                </p>
            <?php endif; ?>

            <ul class="cd-item-action">
                <?php if ($params->get('show_readmore')) : ?>
                    <li class="mod-articles-category-readmore">
                        <button class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
                            <?php if ($item->params->get('access-view') == false) : ?>
                                <?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
                            <?php elseif ($readmore = $item->alternative_readmore) : ?>
                                <?php echo $readmore; ?>
                                <?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
                            <?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
                                <?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
                            <?php else : ?>
                                <?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
                                <?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
                            <?php endif; ?>
                        </button>
                    </li>
                <?php endif; ?>
            </ul><!-- cd-item-action -->
        </div> <!-- cd-item-info -->
        <a href="#0" class="cd-close">Close</a>
</div> <!-- cd-quick-view -->
<?php endforeach; ?>
  

Javascript:

 jQuery(document).ready(function($){
    //final width --> this is the quick view image slider width
    //maxQuickWidth --> this is the max-width of the quick-view panel
    var sliderFinalWidth = 400,
        maxQuickWidth = 900;

    //open the quick view panel
    $('.cd-trigger').on('click', function(event){
        var selectedImage = $(this).parent('.cd-item').children('img'),
            slectedImageUrl = selectedImage.attr('src');

        $('body').addClass('overlay-layer');
        animateQuickView(selectedImage, sliderFinalWidth, maxQuickWidth, 'open');

        //update the visible slider image in the quick view panel
        //you don't need to implement/use the updateQuickView if retrieving the quick view data with ajax
        updateQuickView(slectedImageUrl);
    });

    //close the quick view panel
    $('body').on('click', function(event){
        if( $(event.target).is('.cd-close') || $(event.target).is('.overlay-layer')) {
            closeQuickView( sliderFinalWidth, maxQuickWidth);
        }
    });
    $(document).keyup(function(event){
        //check if user has pressed 'Esc'
        if(event.which=='27'){
            closeQuickView( sliderFinalWidth, maxQuickWidth);
        }
    });

    //quick view slider implementation
    $('.cd-quick-view').on('click', '.cd-slider-navigation a', function(){
        updateSlider($(this));
    });

    //center quick-view on window resize
    $(window).on('resize', function(){
        if($('.cd-quick-view').hasClass('is-visible')){
            window.requestAnimationFrame(resizeQuickView);
        }
    });

    function updateSlider(navigation) {
        var sliderConatiner = navigation.parents('.cd-slider-wrapper').find('.cd-slider'),
            activeSlider = sliderConatiner.children('.selected').removeClass('selected');
        if ( navigation.hasClass('cd-next') ) {
            ( !activeSlider.is(':last-child') ) ? activeSlider.next().addClass('selected') : sliderConatiner.children('li').eq(0).addClass('selected'); 
        } else {
            ( !activeSlider.is(':first-child') ) ? activeSlider.prev().addClass('selected') : sliderConatiner.children('li').last().addClass('selected');
        } 
    }

    function updateQuickView(url) {
        $('.cd-quick-view .cd-slider li').removeClass('selected').find('img[src="'  url  '"]').parent('li').addClass('selected');
    }

    function resizeQuickView() {
        var quickViewLeft = ($(window).width() - $('.cd-quick-view').width())/2,
            quickViewTop = ($(window).height() - $('.cd-quick-view').height())/2;
        $('.cd-quick-view').css({
            "top": quickViewTop,
            "left": quickViewLeft,
        });
    } 

    function closeQuickView(finalWidth, maxQuickWidth) {
        var close = $('.cd-close'),
            activeSliderUrl = close.siblings('.cd-slider-wrapper').find('.selected img').attr('src'),
            selectedImage = $('.empty-box').find('img');
        //update the image in the gallery
        if( !$('.cd-quick-view').hasClass('velocity-animating') amp;amp; $('.cd-quick-view').hasClass('add-content')) {
            selectedImage.attr('src', activeSliderUrl);
            animateQuickView(selectedImage, finalWidth, maxQuickWidth, 'close');
        } else {
            closeNoAnimation(selectedImage, finalWidth, maxQuickWidth);
        }
    }

    function animateQuickView(image, finalWidth, maxQuickWidth, animationType) {
        //store some image data (width, top position, ...)
        //store window data to calculate quick view panel position
        var parentListItem = image.parent('.cd-item'),
            topSelected = image.offset().top - $(window).scrollTop(),
            leftSelected = image.offset().left,
            widthSelected = image.width(),
            heightSelected = image.height(),
            windowWidth = $(window).width(),
            windowHeight = $(window).height(),
            finalLeft = (windowWidth - finalWidth)/2,
            finalHeight = finalWidth * heightSelected/widthSelected,
            finalTop = (windowHeight - finalHeight)/2,
            quickViewWidth = ( windowWidth * .8 < maxQuickWidth ) ? windowWidth * .8 : maxQuickWidth ,
            quickViewLeft = (windowWidth - quickViewWidth)/2;

        if( animationType == 'open') {
            //hide the image in the gallery
            parentListItem.addClass('empty-box');
            //place the quick view over the image gallery and give it the dimension of the gallery image
            $('.cd-quick-view').css({
                "top": topSelected,
                "left": leftSelected,
                "width": widthSelected,
            }).velocity({
                //animate the quick view: animate its width and center it in the viewport
                //during this animation, only the slider image is visible
                'top': finalTop  'px',
                'left': finalLeft 'px',
                'width': finalWidth 'px',
            }, 1000, [ 400, 20 ], function(){
                //animate the quick view: animate its width to the final value
                $('.cd-quick-view').addClass('animate-width').velocity({
                    'left': quickViewLeft 'px',
                    'width': quickViewWidth 'px',
                }, 300, 'ease' ,function(){
                    //show quick view content
                    $('.cd-quick-view').addClass('add-content');
                });
            }).addClass('is-visible');
        } else {
            //close the quick view reverting the animation
            $('.cd-quick-view').removeClass('add-content').velocity({
                'top': finalTop  'px',
                'left': finalLeft 'px',
                'width': finalWidth 'px',
            }, 300, 'ease', function(){
                $('body').removeClass('overlay-layer');
                $('.cd-quick-view').removeClass('animate-width').velocity({
                    "top": topSelected,
                    "left": leftSelected,
                    "width": widthSelected,
                }, 500, 'ease', function(){
                    $('.cd-quick-view').removeClass('is-visible');
                    parentListItem.removeClass('empty-box');
                });
            });
        }
    }
    function closeNoAnimation(image, finalWidth, maxQuickWidth) {
        var parentListItem = image.parent('.cd-item'),
            topSelected = image.offset().top - $(window).scrollTop(),
            leftSelected = image.offset().left,
            widthSelected = image.width();

        //close the quick view reverting the animation
        $('body').removeClass('overlay-layer');
        parentListItem.removeClass('empty-box');
        $('.cd-quick-view').velocity("stop").removeClass('add-content animate-width is-visible').css({
            "top": topSelected,
            "left": leftSelected,
            "width": widthSelected,
        });
    }
});