Галерея в модальном окне
Всем привет!!!
Помогите, если нетрудно с реализацией галереи в модальном (всплывающем) окне. Скрипты типа 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(); }); } }); }); |
Rise, спасибо :thanks:
|
Часовой пояс GMT +3, время: 03:39. |