Joomla 4. Компонент K2 и форк K2ForJ4 (18 янв 2024)

Если вас, как и меня, достало выслушивать (вычитывать) бесконечные обещания разработчика K2 опубликовать версию компонента K2 под Joomla 4 (без чего невозможно реализовать апгрейд from Joomla 3 to Joomla 4) - воспользуйтесь форком K2ForJ4. Который в данный момент установлен и без каких-либо проблем работает на этом веб-сайте.

Плагин jQuery cloud-zoom v1.0.2

Больше
12 года 10 мес. назад - 12 года 10 мес. назад #1 от Aleksej
Aleksej создал тему: Плагин jQuery cloud-zoom v1.0.2
Очень интересный плагин jQuery cloud-zoom v1.0.2, позволяющий масштабировать изображение, не открывая его; картинка как-бы под увеличительным стеклом. Наведя курсор мыши на изображение - получаем ее часть, но в ином масштабе. Плагин имеет четыре варианта различных реализаций этого интересного и многообещающего эфффекта - см. демо на странице автора .

Примеры кода для всех четырех вариантов, по порядку:

1. Иначе масштабированная картинка плюс различные миниатюры, нажимая на которые - получаем смену основного изображения.
Code:
<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. Второй вариант, похожий...
Code:
<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. Область иначе масштабированного изображения появляется вместо основного:
Code:
<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. Новое изображение открывается где-то в иной части страницы, плюс добавлен эффект размытия:
Code:
<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 для всех вариантов:
Code:
<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 года 10 мес. назад пользователем Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Dev banner 2
Больше
9 года 11 мес. назад - 9 года 11 мес. назад #2 от serge
serge ответил в теме Плагин jQuery cloud-zoom v1.0.2
Варианты зума от различных разработчиков и живые демки возможно увидеть на нашем сайте.
Вы без проблем сумеете подобрать эффектный zoom для своего блога, выбирайте:

А я смогу! - А поглядим! - А я упрямый!
Последнее редактирование: 9 года 11 мес. назад пользователем serge.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
9 года 10 мес. назад - 9 года 10 мес. назад #3 от Aleksej
Aleksej ответил в теме Плагин jQuery cloud-zoom v1.0.2

serge пишет: Варианты зума от различных разработчиков...

Спасибо, Серый! Еще один zoom в коллекцию, теперь уже от нас. Нативный модуль под Joomla 3.
Последнее редактирование: 9 года 10 мес. назад пользователем Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Работает на Kunena форум