我使用jQuery Simple Slider Plugin显示图像的额外信息,当用户点击它们时。
此插件在弹出窗口中显示图像说明。这很好。
然而,我想在弹出窗口中添加另一个div ,类名为“like-image”。
第一次单击图像时,一切都按照我的意愿运行。图像说明和图像div都显示。
如果您再次点击图片而不重新加载页面,则 like-image div不再显示。
我做错了什么?
<ul class="product-gallery">
<li class="gallery-img">
<img src='http://lorempixel.com/200/300' alt="img01" />
<div class="image-description" data-desc="Image1 Lorem Ipsum is simply dummy"></div>
<div class="like-image"><b>This div just displays on first click.</b></div>
</li>
</ul>
/*
* jQuery Slider Plugin
* Version : Am2_SimpleSlider.js
* author :amit & amar
*/
(function ($) {
jQuery.fn.Am2_SimpleSlider = function () {
//popup div
$div = $('<div class="product-gallery-popup"> <div class="popup-overlay"></div><div class="product-popup-content"><div class="product-image"><img id="gallery-img" src="" alt="" /><div class="gallery-nav-btns"><a id="nav-btn-next" class="nav-btn next" ></a><a id="nav-btn-prev" class="nav-btn prev" ></a></div></div><div class="product-information"><p class="product-desc"></p><hr><div class="clear"></div><br><div class="like-image"></div><div class="clear"></div><hr></div><div class="clear"></div><a href="" class="cross">X</a></div></div>').appendTo('body');
//on image click
$(this).click(function () {
$('.product-gallery-popup').fadeIn(500);
$('body').css({ 'overflow': 'hidden' });
$('.product-popup-content .product-image img').attr('src', $(this).find('img').attr('src'));
$('.product-popup-content .product-information p').text($(this).find('.image-description').attr('data-desc'));
// My attempt of adding the div to the popup window
// The next line of code seems just to work once
$('.product-popup-content .product-information .like-image').html($(this).find('.like-image'));
$Current = $(this);
$PreviousElm = $(this).prev();
$nextElm = $(this).next();
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
});
//on Next click
$('.next').click(function () {
$NewCurrent = $nextElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
$('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
});
//on Prev click
$('.prev').click(function () {
$NewCurrent = $PreviousElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
$('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
});
//Close Popup
$('.cross,.popup-overlay').click(function () {
$('.product-gallery-popup').fadeOut(500);
$('body').css({ 'overflow': 'initial' });
});
//Key Events
$(document).on('keyup', function (e) {
e.preventDefault();
//Close popup on esc
if (e.keyCode === 27) { $('.product-gallery-popup').fadeOut(500); $('body').css({ 'overflow': 'initial' }); }
//Next Img On Right Arrow Click
if (e.keyCode === 39) { NextProduct(); }
//Prev Img on Left Arrow Click
if (e.keyCode === 37) { PrevProduct(); }
});
function NextProduct() {
if ($nextElm.length === 1) {
$NewCurrent = $nextElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
$('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
}
}
function PrevProduct() {
if ($PreviousElm.length === 1) {
$NewCurrent = $PreviousElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
$('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
}
}
};
} (jQuery));
// Call the plugin
$('.gallery-img').Am2_SimpleSlider();
我会非常感谢任何帮助!
答案 0 :(得分:1)
用这一行替换你的行
// My attempt of adding the div to the popup window
// The next line of code seems just to work once
$('.product-popup-content .product-information .like-image').html($(this).find('.like-image').html());
如果您仍然发现问题,请告诉我。我在小提琴中检查它,它工作正常。