我正在尝试让cd-quick-view在点击代码顶部的ul元素内的cd-trigger时根据用户的选择显示正确的信息。
我们的想法是列出这里展示的项目：https://codyhouse.co/gem/css-product-quick-view/
但上面提到的代码只为所有产品提供了一个cd-quick-view，而对于每个产品，不一个。我想扩展它并让每个产品都有自己的图像和描述，每个产品/项目都有cd-quick-view。
我遇到的问题 正在将cd-trigger与正确的cd-quick-view相关联。例如 - 用户点击产品指示灯，将显示正确的cd-quick-view。现在我点击“灯”，我得到最后一个cd-quick-view沙发。
有什么想法吗？
我正在使用Joomla 3.6框架工作并对模块mod_articles_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') && $('.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,
});
}
});