Слияние кода завершено, страница обновится автоматически
Рисунок 1. Плагин для создания скриншотов.
Для использования необходимо подключить jquery.js и xzoom.js.
<div class="xzoom">
<div class="xzoom_show"><img src="images/01_lit.jpg" data-xzoom="images/01.jpg" /></div>
<div class="xzoom_thumb">
<div class="xzoom_thumbin">
<ul>
<li><img src="images/01_lit.jpg" data-xzoom="images/01.jpg" /></li>
<li><img src="images/02_lit.jpg" data-xzoom="images/02.jpg" /></li>
<li><img src="images/03_lit.jpg" data-xzoom="images/03.jpg" /></li>
<li><img src="images/04_lit.jpg" data-xzoom="images/04.jpg" /></li>
<li><img src="images/05_lit.jpg" data-xzoom="images/05.jpg" /></li>
</ul>
</div>
<div class="xzoom_prev"></div>
<div class="xzoom_next"></div>
</div>
</div>
Атрибут data-xzoom указывает на путь к большому изображению. Если атрибут не указан, то используется значение атрибута src.
$('.xzoom').xzoom({
thumbs: 4,
scroll: true,
});
| Параметр | Описание | По умолчанию |
|---|---|---|
| width | Ширина изображения в области показа | 500 |
| height | Высота изображения в области показа | 500 |
| zwidth | Ширина рамки увеличения. Высота определяется размером изображения | 600 |
| zoom | Коэффициент увеличения. Определяется шириной рамки увеличения (например, при zwidth = 600 и zoom = 3, фактическая ширина увеличенного изображения будет равна 1800 пикселям, а высота будет подстраиваться автоматически) | 3 |
| mask | Размер маски для мыши | 100 |
| scroll | Отображать ли полосы прокрутки | false |
| thumbs | Количество миниатюр в строке | 4 |
| thumbType | Способ взаимодействия с миниатюрами: hover или click | 'hover' |
| thumbPad | Расстояние между миниатюрами | 5 |
| thumbBor | Цвет рамки при выделении миниатюры | '' |
Рисунок 2. Размеры параметров.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )