Очень интересный плагин
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. Скачать можно
с нашего сервера
, либо со страницы автора.
