Эффект детального увеличения - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для 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Слайдшоу для сайта uCoz



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



Эффект детального увеличения

Детальное увеличение картинки или фото




Изображение в виде картинки или фотографии можно будет увеличить для детального просмотра, увеличение может происходить как внутри, так и в отдельно открывающемся окне. В эффекте увеличения применяется плагин jqzoom.js работающий при подключенной библиотеке  jQuery которая по умолчанию подключена на сайтах системы uCoz. Всё полностью настроено, а лишнее удалено чтобы не нагружать и и без того загруженные головы. Сами элементы разложены на 2 способа подключения в первом останется заменить картинки, а во втором Вы сможете сами настроить элемент, по умолчанию он так же настроен но имеет регулировки для индивидуального подгона под существующие обстоятельства. Если потребуется дополнительная информация, опишите её суть в форме комментариев, для всех остальных тем воспользуйтесь формой комментариев ВКонтакте.





Эффект детального увеличения

Для правильной работы Вам понадобится иметь 2 изображения, первое изображение может быть большим до разумных пределов, оно будет показывать детальный вид картинки или фото. Вторая картинка, это уменьшенная версия первой картинки, на сколько Вы её уменьшите, в таком виде она и будет показана. То есть чтобы изменить размер изображения до детального увеличения, нужно уменьшить размер самого изображения. В примере маленьким изображением является фотография (miska-m.jpg).
ВНИМАНИЕ!!!
Код для установки оснащён скриптом библиотекой jQuery для проверки его работоспособности в редакторе HTML, скрипт выделен в примере красным цветом, при установке эффекта на свой сайт (если он на uCoz) удалите скрипт, у Вас уже должна быть подключена библиотека.



<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>
<style>
.zoomPad{
position:relative;
float:left;
z-index:99;
cursor:crosshair;
}
.zoomWrapperTitle{
display:block;
background:#777; /* - цвет фона названия вверху - */
color:#FFF; /* - цвет букв названия вверху - */
height:18px;
line-height:18px;
width:100%;
overflow:hidden;
text-align:center;
font-size:10px;
position:absolute;
top:0px;
left:0px;
z-index:120;
opacity: 0.6;
filter: alpha(opacity = 60);
}
.zoomWrapperImage{
display:block;
position:relative;
overflow:hidden;
z-index:110;
}
</style>
<script type="text/javascript" src="//delaisait.ucoz.ru/script/effect/2014/js/jqzoom.pack.1.0.1.js"></script>
<a href="//delaisait.ucoz.ru/script/effect/2014/img/miska.jpg" id="zoom" title="Моя фотография на даче">
<img src="//delaisait.ucoz.ru/script/effect/2014/img/miska-m.jpg" alt="zoom-images"></a>
<script>
jQuery(document).ready(function(){
jQuery('a#zoom').jqzoom({
zoomType: 'innerzoom'
});
});
</script>



Первый эффект в подключенном состоянии



Эффект детального увеличения в отдельном окне

В этом примере Вы можете произвести свои изменения и настроить отображение эффекта как требуют обстоятельства. В любом случае можно воспользоваться редактором HTML и поэкспериментировать с изменениями на месте, а уже готовый код устанавливать к себе на сайт. В местах изменений в скрипте сделаны комментарии.
ВНИМАНИЕ!!!
Этот код для установки тоже оснащён скриптом библиотекой jQuery, скрипт выделен в примере красным цветом, при установке эффекта на свой сайт (если он на uCoz) обязательно удалите скрипт, у Вас уже должна быть подключена своя библиотека.



<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>
<style>
.zoomPad{
position:relative;
float:left;
z-index:99;
cursor:crosshair;
}
.zoomWrapperTitle{
display:block;
background:#777; /* - цвет фона названия вверху - */
color:#FFF; /* - цвет букв названия вверху - */
height:18px;
line-height:18px;
width:100%;
overflow:hidden;
text-align:center;
font-size:10px;
position:absolute;
top:0px;
left:0px;
z-index:120;
opacity: 0.6;
filter: alpha(opacity = 60);
}
.zoomWrapperImage{
display:block;
position:relative;
overflow:hidden;
z-index:110;
}
</style>
<script type="text/javascript" src="//delaisait.ucoz.ru/script/effect/2014/js/jqzoom.pack.1.0.1.js"></script>
<a href="//delaisait.ucoz.ru/script/effect/2014/img/miska.jpg" id="zoomm" title="Моя фотография на даче">
<img src="//delaisait.ucoz.ru/script/effect/2014/img/miska-m.jpg" alt="zoom-images"></a>
<script>
jQuery(document).ready(function(){
jQuery('a#zoomm').jqzoom({
zoomType: 'standard',
zoomWidth: 250, //- Ширина zoom окна
zoomHeight:200, //- Высота zoom окна
position:'left', //- Положение окна - top, right, bottom
xOffset:0, //- Удаление окна по оси x
yOffset:0, //- Удаление окна по оси y
showEffect : 'fadein',
hideEffect: 'fadeout', //- Слой увеличения hide
fadeinSpeed: 'fast', //- Скорость появления - slow, medium
fadeoutSpeed: 'fast' //- Скорость исчезания - slow, medium
});
});
</script>



Второй эффект в подключенном состоянии



Проверить работу эффектов на месте

Вы можете проверить коды для установки и поэкспериментировать с изменениями не покидая границы этого материала. Для этого нажмите в нижнем левом углу страницы на картинку, откроется панель с инструментами в которой нажмите на кнопку "Редактор HTML". Поместите в него код для установки и проверьте его работу в реальном времени.









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



Ссылка:
BB code:




  • ©
  • | Просмотров: 1415 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: в деталях, Скрипт, Для сайта, увеличить, effect, zoom

    Всего комментариев: 8
    0   Спам
    8 Patriot   (27.04.2014 00:04)
    Аватар Patriot Все, разобрался, сделал. Спасибо большое еще раз.

    0   Спам
    7 Patriot   (26.04.2014 23:25)
    Аватар Patriot Ну, это понятно, спасибо. Но вот я имею ввиду, можно ли поставить скрипт так, чтобы не добавлять его на каждую страницу, а при добавлении/редактировании достаточно было ссылки в поля добавить. Естественно вместо названия картинки в скрипте указать $OTHER3$ и добавить название в третье поле. Вот это решаемо? На юкозе, вообще, я не всегда могу понять, как до некоторых вещей добраться. А кое-что вообще на нем недоступно.

    0   Спам
    4 Patriot   (21.04.2014 00:45)
    Аватар Patriot Вот этот эффект искал неделю, чтобы для юкоза подошел. Теперь еще месяц буду гадать, что с ним дальше делать, с этим кодом. Мне нужно, чтобы картинки товара в интернет-магазине так отображались. Это нужно будет к каждой позиции ссылки на две картинки вручную вставлять в код,как я понимаю. Ну пусть так... Так а сам код куда засунуть?
    biggrin

    0   Спам
    5 IZOTOP   (23.04.2014 19:03)
    Аватар IZOTOP Главное при любых изменениях не забывайте делать копию исходных данных.

    Если делаете для отображения на главной, в разделе или категории то нужно в "Управлении дизайном" модуля производить редактирование страницы "Вид материалов".

    0   Спам
    6 Patriot   (23.04.2014 19:36)
    Аватар Patriot Да уже разобрался, сделал, спасибо большое. Но вот такой вопрос возникает, а вообще реально ли сделать так, чтобы можно было, допустим, в дополнительные поля две ссылки на картинки вставить и готово. Я не прошу рассказать, показать. Просто вообще можно ли и в каком направлении действовать, если для этого, конечно, весь юкоз не нужно переделывать.

    0   Спам
    1 Дарья   (14.03.2014 14:31)
    Аватар Дарья Возможно ли это увеличение применить в интернет магазине? Мой сайт: http://bimag-home.ru

    0   Спам
    2 IZOTOP   (14.03.2014 23:41)
    Аватар IZOTOP Разумеется что подобный эффект можно применить на любом сайте. Но вроде на Вашем сайте и так всё гармонично организовано, кстати, мне кажется что существует небольшая ошибка в меню:

    Товары для дома - > Часы настенные - > в виде катрин

    Хорошим тоном считается указывать названия категорий с Большой буквы.

    0   Спам
    3 Дарья   (15.03.2014 15:27)
    Аватар Дарья Спасибо за подсказку, прислушаюсь к вашему мнению, Михаил.


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