
Загружается . . . Ждите . . .
It is loaded . . . Wait . . .
Wird beladen . . . Warten Sie . . .
Es cargado . . . Esperen . . .
Est chargé . . . Attendez . . .
It is loaded . . . Wait . . .
Wird beladen . . . Warten Sie . . .
Es cargado . . . Esperen . . .
Est chargé . . . Attendez . . .
Эффекта прямоугольной лупы , вариант 2 , на основе системного jQuery . Первью изображение и вывод изображения реального размера в окне . |
|

<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/WP158.jpg" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-5">
<img src="http://runettex.clan.su/FPC/WP158.jpg" alt="" title="Optional title display" style="width: 244px; height: 300px; border: 0px;"></a>

224px - длинна отображаемого первью изображения
300px - высота отображаемого первью изображения
title="Optional Title Display" - текст выводимый в заколовке окна вывода фрагмента оригинала изображения

adjustY:-4, и adjustX:30 - значения координат расположения окна просмотра фрагмента относительно периью изображения .

.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;}

cloud-zoom-title - определяет внешний вид заголока окна просмотра фрагмента оригинала изображения .
cloud-zoom-lens - определяет внешний вид первью при наведении курсора .
cloud-zoom-big - определяет внешний вид окна просмотра фрагмента оригинала изображения .
cloud-zoom-loading - определяет внешний вид индикатора загрузки изображения .

Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2025 Хостинг от uCoz