Всем привет!!!
Помогите, если нетрудно с реализацией галереи в модальном (всплывающем) окне. Скрипты типа fancybox и других похожих прошу не предлагать.
HTML разметка:
// Элементы, которые нужно открывать в модальном окне по клику на ссылку post-footer a
<div class="post-footer">
// Видео в скрытом #content-trailer
<div class="video">
<a class="single-trailer" href="#content-trailer">
<img src="1">
</a>
<a class="single-trailer" href="#content-trailer">
<img src="2">
</a>
</div>
// Картинки
<a href="1">
<img src="1">
</a>
<a href="2">
<img src="2">
</a>
<a href="3">
<img src="3">
</a>
</div>
// Модальное окно
<div onclick="show('none')" class="wbody" style=""><span class="icon-close"></span></div>
<div class="window" style=""> </div>
Много чего перепробовал, но ничего не выходит. Может кто поможет?
Пробовал адаптировать такое решение, но криворукость видимо....
jQuery(document).ready(function ($) {
var сlicked, clone;
$(".gallery li").click(function () {
clicked = this;
$(".modal-content").fadeIn();
clone = $(this).find('img').clone(true);
clone.css({
opacity: 0
});
$('.modal-content').append(clone);
clone.animate({
opacity: 1
}, 1000);
});
$(".modal-close").click(function () {
$(".modal-content").fadeOut();
});
$('.btnModal-right').click(function () {
if ($(clicked).next('li').length) {
nextImage = $(clicked).next('li').find('img');
clicked = $(clicked).next('li');
nextClone = nextImage.clone(true);
nextClone.css({
opacity: 0
});
$('.modal-content').append(nextClone);
nextClone.animate({
opacity: 1
}, 1000, 'swing', function () {
$(this).prev().remove();
});
}
});
$('.btnModal-left').click(function () {
if ($(clicked).prev('li').length) {
prevImage = $(clicked).prev('li').find('img');
clicked = $(clicked).prev('li');
prevClone = prevImage.clone(true);
prevClone.css({
opacity: 0
});
$('.modal-content').append(prevClone);
prevClone.animate({
opacity: 1
}, 1000, 'swing', function () {
$(this).prev().remove();
});
}
});
});
