Как поместить слайдер в модальное окно?
Доброго всем времени суток! :write:
Назрел такой вопрос: как поместить слайдер в модальное окно? Есть картинка с подписью, кликнув на которую открывается 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 Прошу извинить за корявое описание и вставку кодов. Спасибо. |
Вот код нового слайдера:
<!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>
|
Нашел вот этот popup. В нем всё работает.
https://codepen.io/imprakash/pen/GgNMXO |
| Часовой пояс GMT +3, время: 09:01. |