Оригинальный способ показа на вашей странице HTML странице маленького изображения с последующим кликом по ссылке ниже с целью показа большого рисунка и сопровождающего текста этот рисунок на всплывшем большом окне. Да, это модальное окно. Оно позволяет сильно сэкономить визуальное место на странице и разместить очень много изображений и их описаний на одной странице.
Преимущества.
Не нужен слайдер со всеми настройками. Если посетитель захочет – сам перейдёт и всё узнает. Нет навязывания просмотра контента. Мне это больше нравится, чем слайдер.
Всё что нужно, разместить ссылки на библиотеки jQuery Modal с подключением.
Привожу всего три строки для раздела head в шапке сайта. Копируйте.
<head>
………
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
……….
<-head>
Далее в нужном месте вставьте на своей странице всего 4 строки кода со ссылками на свой рисунок и вставляете текст как показано ниже.
Текст любого объёма, рисунок любого размера. Только размер рисунка в процентах ставьте свой или оставьте 100%, как есть. Переход от маленького к большому изображению ПОДРОБНЕЕ, вернуться НАЗАД.
Параметр ex1 для одного рисунка, ex2 для второго, ex3 для третьего и т. д.
----------------------------------------------------------------------------------------------
<body>
<div class="combo-time"><img src="путь / (ваше изображение)" alt=" " title=" ">
<div id="ex1" class="modal">
<p><img style="width:100%;"src=" путь/(ваше изображение " alt=" ">
Lorem ipsum dolor sit amet, vis et magna malorum reprimique, ea quaeque intellegam sed, cu sint nonumy aperiri eum. Sea reque ancillae te, veniam decore offendit eum at. Purto omnium cu eum, cum movet invidunt hendrerit at. </p>
<a href="#" rel="modal:close">Назад</a></div>
<!—Ссылка на модальное окно -->
<a href="#ex1" rel="modal:open"><span style="font-size:14px !important;">ПОДРОБНЕЕ</span></a></div> .
<body>
Посмотреть в живую работу можно на странице показа и описания компрессоров для холодильников в середине этой страницы.
Рисунки компрессоров расположены как угодно, а в данном случае по технологии флекс(flex).
Это интересно
0
|
|||
Последние откомментированные темы:
-
Xiaomi перевернули мир, такой цены еще не было
(1)
bigluzer131261
,
09.01.2020
-
Умный унитаз от Xiaomi
(1)
sablon
,
08.01.2020
-
7 простых шагов к Вашему сайту
(1)
bigluzer131261
,
22.12.2018
-
Создание резервной копии Windows 10
(1)
bigluzer131261
,
22.12.2018
-
Страница подписки и рассылка в одном флаконе
(1)
shooter
,
15.09.2018
20250127094435