Увеличительное стекло для изображений Zoomy - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Эффекты увеличения » Увеличительное стекло для изображений Zoomy

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Увеличительное стекло для изображений Zoomy

Эффект увеличительного стекла Zoomy




Подобный эффект может быть применён к картинкам,фото и рисункам имеющим мелкие детали,при наведении zoom стекла на изображение оно будет увеличивать часть фрагмента.Настройки не сложные,надеюсь каждый сможет разобраться с установкой.Эффект будет работать только на страницах модулей и динамических страницах сайта uCoz,в материале модулей работать не будет.Изображения должны иметь 2 варианта,один из них меньший (изначальный),второй больший,для достижения эффекта увеличения.Вам может понадобится программа меняющая разрешение изображений,вот видеоматериал. по использованию проги,там же её и скачаете.Для работы требуется подключенная библиотека jQuery,она у Вас вшита по умолчанию если сайт находится в системе uCoz.Кому понадобится дополнительное разъяснение используйте форму комментариев.





Пример кода для установки


<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>



Библиотека jQuery для проверки эффекта в редакторе

Не устанавливайте себе этот скрипт если сайт на юКоз,его нужно вставить к имеющемуся коду примера для проверки в редакторе



<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>


Проверьте код для установки в редакторе










Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1396 | Добавил: IZOTOP | Рейтинг: 5.0/1

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]