Рубрики
×
Masterpro Nivo Slider (06 фев 2023)
Это форк Vinaora Nivo Slider, пришлось переименовать, в силу требования JED. Даже старую версию качать можно было только с варезных сайтов, нашпигованную троянами. Зачем оно такое, согласитесь.
Любимый Плагин jQuery cloud-zoom v1.0.2
- Aleksej
-
Автор темы
- Не в сети
- Модератор
-
Меньше
Подробнее
12 года 4 дн. назад - 12 года 4 дн. назад #1
от Aleksej
Aleksej создал тему: Плагин jQuery cloud-zoom v1.0.2
Очень интересный плагин jQuery cloud-zoom v1.0.2, позволяющий масштабировать изображение, не открывая его; картинка как-бы под увеличительным стеклом. Наведя курсор мыши на изображение - получаем ее часть, но в ином масштабе. Плагин имеет четыре варианта различных реализаций этого интересного и многообещающего эфффекта - см.
демо на странице автора
.
Примеры кода для всех четырех вариантов, по порядку:
1. Иначе масштабированная картинка плюс различные миниатюры, нажимая на которые - получаем смену основного изображения.
2. Второй вариант, похожий...
3. Область иначе масштабированного изображения появляется вместо основного:
4. Новое изображение открывается где-то в иной части страницы, плюс добавлен эффект размытия:
Стили и JS для всех вариантов:
Плагин совершенно бесплатен и, по заявлению разработчика, работает во всех современных браузерах, и даже в IE6. Скачать можно с нашего сервера , либо со страницы автора.
Примеры кода для всех четырех вариантов, по порядку:
1. Иначе масштабированная картинка плюс различные миниатюры, нажимая на которые - получаем смену основного изображения.
<div class="zoom-section">
<div class="zoom-small-image" style="float:left; margin-right:21px; border:4px #CCC solid;">
<a href='images/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">
<img src="images/smallimage.jpg" alt='' title="Optional title display">
</a>
</div>
<div class="zoom-desc">
<p>
<a href='images/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: 'images/smallimage.jpg' ">
<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage.jpg" alt = "Thumbnail 1"/>
</a>
<a href='images/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' images/smallimage-1.jpg'">
<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage-1.jpg" alt = "Thumbnail 2"/>
</a>
<a href='images/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-2.jpg' ">
<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage-2.jpg" alt = "Thumbnail 3"/>
</a>
</p>
</div>
</div>2. Второй вариант, похожий...
<div class="zoom-section" style="width:248px;">
<div class="zoom-small-image" style="border:4px #CCC solid;">
<a href='images/bigimage03.jpg' class = 'cloud-zoom' rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10">
<img src="images/smallimage-3.jpg" title="Optional Title Text" alt=''/>
</a>
</div>
</div>3. Область иначе масштабированного изображения появляется вместо основного:
<div class="zoom-section" style="width:248px;">
<div class="zoom-small-image" style="border:4px #CCC solid;">
<a href='images/bigimage04.jpg' class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4">
<img src="images/smallimage-4.jpg" title="Your caption here" alt=' '/>
</a>
</div>
</div>4. Новое изображение открывается где-то в иной части страницы, плюс добавлен эффект размытия:
<div class="zoom-section" style="width:248px;">
<div class="zoom-small-image" style="border:4px #CCC solid;">
<a href='images/bigimage01.jpg' class = 'cloud-zoom' title="Your caption here" rel="softFocus: true, position:'anypos', smoothMove:2">
<img src="images/smallimage-1.jpg" alt='' />
</a>
</div>
<div class="zoom-desc" style="position:relative; width:248px;">
<div id="anypos" style="position:absolute;top:-428px; left: 428px;width:256px; height:256px;"></div>
</div>
</div>Стили и JS для всех вариантов:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.2.js"></script>
<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />Плагин совершенно бесплатен и, по заявлению разработчика, работает во всех современных браузерах, и даже в IE6. Скачать можно с нашего сервера , либо со страницы автора.
Последнее редактирование: 12 года 4 дн. назад пользователем Aleksej.
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- serge
-
- Не в сети
- Модератор
-
Меньше
Подробнее
- Сообщений: 957
- Спасибо получено: 138
9 года 1 мес. назад - 9 года 1 мес. назад #2
от serge
А я смогу! - А поглядим! - А я упрямый!
serge ответил в теме Плагин jQuery cloud-zoom v1.0.2
Варианты зума от различных разработчиков и живые демки возможно увидеть на нашем сайте.
Вы без проблем сумеете подобрать эффектный zoom для своего блога, выбирайте:
Вы без проблем сумеете подобрать эффектный zoom для своего блога, выбирайте:
А я смогу! - А поглядим! - А я упрямый!
Последнее редактирование: 9 года 1 мес. назад пользователем serge.
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- Aleksej
-
Автор темы
- Не в сети
- Модератор
-
9 года 1 нед. назад - 9 года 1 нед. назад #3
от Aleksej
Aleksej ответил в теме Плагин jQuery cloud-zoom v1.0.2
Спасибо, Серый! Еще один zoom в коллекцию, теперь уже от нас. Нативный модуль под Joomla 3.serge пишет: Варианты зума от различных разработчиков...
Последнее редактирование: 9 года 1 нед. назад пользователем Aleksej.
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.