Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Галерея в модальном окне (https://javascript.ru/forum/jquery/59608-galereya-v-modalnom-okne.html)

booch 18.11.2015 20:51

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

booch 20.11.2015 00:30

Rise, спасибо :thanks:


Часовой пояс GMT +3, время: 03:39.