Увеличительное стекло для фото на сайте ucoz.Увеличительная лупа для сайта ucoz
                                                                                                                                                                                
Приветствую Вас Гость | RSS
Меню
Главная » Файлы » Все для Ucoz » Скрипты для ucoz

Увеличительное стекло для фото на сайте ucoz.Увеличительная лупа для сайта ucoz
День добрый.Сегодня мы рассмотрим отличный скрипт для сайта, который позволит нам получить эффект увеличительного стекла для сайта на фотографиях.На установку уйдет не менее 2 минут.

Вставляем код в любое место где будет фотография с эффектом увеличительного стекла:
Заменяем лишь ссылку на фото и размер изображения:


Код
<style>#cont {width: 600px; margin: 0 auto; padding: 0 0 25px 0;}
.zoomy{
position: absolute;
display: none;
background-repeat: no-repeat;
border: 0;
line-height: 100px;
text-align: center;
background-position: center;
background-color: #fff;
z-index: 1000;
box-shadow: 3px 3px 10px #000;
-webkit-box-shadow: 3px 3px 10px #000;
-moz-box-shadow: 3px 3px 10px #000;
}
.zoomy span {
display: block;
margin: 10px auto;
background: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
background: -moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);
}
.zoomy img {
opacity: 0;
filter:alpha(opacity=0);
}
.zoomy a {
color: #333;
text-decoration: none;
}
.broke a {
display: block;
height: 100%;
width: 100%;
}
#brokeZoomy {
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
background: #fff;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
</style>
<script type="text/javascript" src="http://delaisait.ucoz.ru/js/jQuery/jquery.zoomy.js"></script>
<script type="text/javascript">
$(function(){
  $('.zoom').zoomy({
zoomSize: 200 // Размер "увеличительного стекла" в пикселях
});
});
</script>
<div id="cont">
<a class="zoom" href="http://delaisait.ucoz.ru/script/img/1/jquery/max.jpg">
<img src="http://delaisait.ucoz.ru/script/img/1/jquery/min.jpg" />
</a>
</div>


Работоспособность скрипта:

 



/ --------------- \
/ Как нужно качать? \

Категория: Скрипты для ucoz | Просмотров: 1028 | Добавил: drak-zp | Рейтинг: 5.0/8 | Загрузок: 0


avatar


Профиль
Привет: Гость


Гость, мы рады вас видеть. Пожалуйста зарегестрируйтесь или авторизуйтесь!
Топ материалов
Статистика
Онлайн всего: 35
Гостей: 34
Пользователей: 1
kanaliev





Анализ веб сайтов
Друзья сайта
Хочу в друзья
Друзья сайта h1tan.ru Друзья сайта h1tan.ru
Друзья сайта h1tan.ru Друзья сайта h1tan.ru