Форум

ИщуПомощь · #1 (**permalink**) 23.08.2017, 23:12

Доброго всем времени суток!

Назрел такой вопрос: как поместить слайдер в модальное окно?
Есть картинка с подписью, кликнув на которую открывается lightbox слайдер. Необходимо заменить этот слайдер на другой. На данный код приблизительно таков:

<div class="img-desc">   //этот класс ответственный за отступы между картинками кликнув на которые вызывается слайдер в модальном окне
  
<a href="http:картинка.jpg"  rel="lightbox[id1]" rel="nofollow">  //так я указываю какая/какие картинки будут в слайдере
    
<img src="картинка.jpeg" title="Всплывающий текст"width="315"height="400">     //тут я указал где лежит картинка, кликнув по которой открывается слайдер в модальном окне.        
     <cite>Текст подписи картинки</cite> </a>
         </div>

Нужно убрать старый слайдер, а на его месте должен всплывать другой, более сложный, но так же в модальном окне. Вот как на этом сайте в "Наши работы" http://yambo.ua/#our-works

Прошу извинить за корявое описание и вставку кодов. Спасибо.

ИщуПомощь · #2 (**permalink**) 23.08.2017, 23:14

Вот код нового слайдера:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>Amazing Slider</title>
    
    <!-- Insert to your webpage before the </head> -->
    <script src="sliderengine/jquery.js"></script>
    <script src="sliderengine/amazingslider.js"></script>
    <link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
    <script src="sliderengine/initslider-1.js"></script>
    <!-- End of head section HTML codes -->
    
</head>

<body>
    
    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:1200px;padding-left:0px; padding-right:109px;margin:0px auto 0px;">
        <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
            <ul class="amazingslider-slides" style="display:none;">
                <li><img src="images/bigK%20%281%29.jpg" alt="bigK (1)"  title="bigK (1)" />
                </li>
                <li><img src="images/bigK%20%282%29.jpg" alt="bigK (2)"  title="bigK (2)" />
                </li>
                <li><img src="images/bigK%20%283%29.jpg" alt="bigK (3)"  title="bigK (3)" />
                </li>
                <li><img src="images/bigK%20%284%29.jpg" alt="bigK (4)"  title="bigK (4)" />
                </li>
                <li><img src="images/bigK%20%285%29.jpg" alt="bigK (5)"  title="bigK (5)" />
                </li>
                <li><img src="images/bigK%20%286%29.jpg" alt="bigK (6)"  title="bigK (6)" />
                </li>
                <li><img src="images/bigK%20%287%29.jpg" alt="bigK (7)"  title="bigK (7)" />
                </li>
                <li><img src="images/bigK%20%288%29.jpg" alt="bigK (8)"  title="bigK (8)" />
                </li>
                <li><img src="images/bigK%20%289%29.jpg" alt="bigK (9)"  title="bigK (9)" />
                </li>
                <li><img src="images/bigK%20%2810%29.jpg" alt="bigK (10)"  title="bigK (10)" />
                </li>
                <li><img src="images/bigK%20%2811%29.jpg" alt="bigK (11)"  title="bigK (11)" />
                </li>
                <li><img src="images/bigK%20%2812%29.jpg" alt="bigK (12)"  title="bigK (12)" />
                </li>
                <li><img src="images/bigK%20%2813%29.jpg" alt="bigK (13)"  title="bigK (13)" />
                </li>
                <li><img src="images/bigK%20%2814%29.jpg" alt="bigK (14)"  title="bigK (14)" />
                </li>
                <li><img src="images/bigK%20%2815%29.jpg" alt="bigK (15)"  title="bigK (15)" />
                </li>
                <li><img src="images/bigK%20%2816%29.jpg" alt="bigK (16)"  title="bigK (16)" />
                </li>
                <li><img src="images/dNII7_croper_ru.jpeg" alt="dNII7_croper_ru"  title="dNII7_croper_ru" />
                </li>
            </ul>
            <ul class="amazingslider-thumbnails" style="display:none;">
                <li><img src="images/bigK%20%281%29.jpg" alt="bigK (1)" title="bigK (1)" /></li>
                <li><img src="images/bigK%20%282%29.jpg" alt="bigK (2)" title="bigK (2)" /></li>
                <li><img src="images/bigK%20%283%29.jpg" alt="bigK (3)" title="bigK (3)" /></li>
                <li><img src="images/bigK%20%284%29.jpg" alt="bigK (4)" title="bigK (4)" /></li>
                <li><img src="images/bigK%20%285%29.jpg" alt="bigK (5)" title="bigK (5)" /></li>
                <li><img src="images/bigK%20%286%29.jpg" alt="bigK (6)" title="bigK (6)" /></li>
                <li><img src="images/bigK%20%287%29.jpg" alt="bigK (7)" title="bigK (7)" /></li>
                <li><img src="images/bigK%20%288%29.jpg" alt="bigK (8)" title="bigK (8)" /></li>
                <li><img src="images/bigK%20%289%29.jpg" alt="bigK (9)" title="bigK (9)" /></li>
                <li><img src="images/bigK%20%2810%29.jpg" alt="bigK (10)" title="bigK (10)" /></li>
                <li><img src="images/bigK%20%2811%29.jpg" alt="bigK (11)" title="bigK (11)" /></li>
                <li><img src="images/bigK%20%2812%29.jpg" alt="bigK (12)" title="bigK (12)" /></li>
                <li><img src="images/bigK%20%2813%29.jpg" alt="bigK (13)" title="bigK (13)" /></li>
                <li><img src="images/bigK%20%2814%29.jpg" alt="bigK (14)" title="bigK (14)" /></li>
                <li><img src="images/bigK%20%2815%29.jpg" alt="bigK (15)" title="bigK (15)" /></li>
                <li><img src="images/bigK%20%2816%29.jpg" alt="bigK (16)" title="bigK (16)" /></li>
                <li><img src="images/dNII7_croper_ru.jpeg" alt="dNII7_croper_ru" title="dNII7_croper_ru" /></li>
            </ul>
        <div class="amazingslider-engine"><a href="http://amazingslider.com" title="Responsive jQuery Image Slideshow">Responsive jQuery Image Slideshow</a></div>
        </div>
    </div>
    <!-- End of body section HTML codes -->
    
</body>
</html>

ИщуПомощь · #3 (**permalink**) 24.08.2017, 20:27

Нашел вот этот popup. В нем всё работает.
https://codepen.io/imprakash/pen/GgNMXO

Форум

Справочник

Discord чат

Курсы javascript