Показать сообщение отдельно
  #1 (permalink)  
Старый 18.11.2015, 20:51
Новичок на форуме
Отправить личное сообщение для booch Посмотреть профиль Найти все сообщения от booch
 
Регистрация: 18.11.2015
Сообщений: 2

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