HTML примерa .
<script type="text/javascript" src="http://runettex.clan.su/JSC/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://runettex.clan.su/JSC/cloud-zoom.1.0.2.js"></script>
<a href="http://runettex.clan.su/FPC/FP001.jpg" class="cloud-zoom" rel="tint:
'#ffff00',tintOpacity:0.7,smoothMove:10,zoomWidth:250, adjustY:-4, adjustX:30">
<img src="http://runettex.clan.su/FPC/FP001.jpg" title="Optional Title Text"
alt="" style="width: 120px; height: 300px; border: 0px;"></a>
Наначение размеров первью изображения , прописнных в стиле изображения .
120px - длинна отображаемого первью изображения
300px - высота отображаемого первью изображения
title="
Optional Title Text" - текст выводимый в заколовке окна вывода фрагмента оригинала изображения относительно первью изображения
Наначение настоек прописнных в теге rel , ссылки первью изображения .
#ffff00 - цвет фона первью при наведении курсора
Opacity:
0.7 - значение уровня прозрачности первью изображения при просмотре
smoothMove:
10 - значение сглаживания перемещения фрагмента оригинала изображения в окне
zoomWidth:
250 - значение длинны окна отображения фрагмента изображения , равно оригинальной длинне изображения + ширина бордюра окна
adjustY:
-4, и adjustX:
30 - значения координат расположения окна просмотра фрагмента .
CSS классы примера .
.cloud-zoom-lens {border: 4px solid #888; margin: 0px; background-color:
#ff0; cursor: move;}
.cloud-zoom-title {position: absolute; background-color:
#000; color: #fff; padding: 3px; width: 100%; text-align: center; font-weight:
bold; font-size: 10px; top: 0px;}
.cloud-zoom-big {border: 4px solid #ccc;
overflow: hidden;}
.cloud-zoom-loading {color: white; background: #222;
padding: 3px; border: 1px solid #000;}
Описание назначения классов CSS примера .
cloud-zoom-title - определяет внешний вид заголока окна просмотра фрагмента оригинала изображения .
cloud-zoom-lens - определяет внешний вид первью при наведении курсора .
cloud-zoom-big - определяет внешний вид окна просмотра фрагмента оригинала изображения .
cloud-zoom-loading - определяет внешний вид индикатора загрузки изображения .
В данном примере настраиваются несколько значений . Оригинальный размер изображения должен по размерам значительно превышать предполагаемый размер первью .
скачать архив Javascript