Cloudzoom – эффект зума изображений

CloudZoom – эффект зума изображений для Adobe Muse.

Эффект зума  CloudZoom для изображений – заворожил меня с первого взгляда! Грамотные зарубежные маркетологи видимо знают как привлечь внимание. Кроме отличного эффекта – для примера разместили очень качественные фотографии с изображением красивой девушки в белом…

Эффект зума действительно получился мягкий, плавный и красивый. Все бы хорошо, но ведь это совсем не виджет для Adobe Muse, поэтому слегка пришлось повозиться с кодом. Но не пугайтесь, самому писать код не нужно, достаточно будет просто скопировать части кода и вставить их в нужное место в программе.

Смотрите подробное видео, как это можно сделать:

CloudZoom – эффект зума изображений. Начало.

Сегодня в этом уроке мы рассмотрим, как добавить в программу Adobe Muse эффекты, которые не являются виджетами, но которые достаточно эффективно смотрятся на сайте.

Одним из сайтов, где расположены такие интересные элементы, является сайт starplugins.com. Этот элемент называется «Cloud Zoom». Он позволяет нам увеличивать изображения и при прокрутке колеса мышки увеличивать zoom. Данный элемент состоит из трех изображений для примера. Естественно, он платный, его можно купить. Стоит он около 30 евро для одного сайта, но если ваш заказчик готов раскошелиться и заплатить за такой эффект у себя на сайте, и при этом вы работаете в программе Adobe Muse – делаете сайт, то это видео поможет вам в установке данного эффекта на сайт в Adobe Muse.

CloudZoom – эффект зума изображений. Скачивание и обзор.

Мы можем скачать демо-версию данной галереи с зумом. Для этого нам нужно нажать на кнопку «Trial» и ввести здесь название сайта. Я введу здесь для примера прямо с этого сайта название сайта. Ctrl+C и Ctrl+V. Здесь вы нажимаете кнопку «Download», и zip-архив скачивается вам на компьютер. Выглядит он вот так, я его уже скачивал. Все что вам нужно сделать, это распаковать его в отдельную папку. Это я тоже уже сделал. Архив можно сохранить или удалить. Я его пока уберу, чтобы он не мешал.

Заходим в папку «Cloud Zoom». Здесь у нас расположены два файла HTML, файл JavaScript и файл CSS разметки, две картинки и папка «images». В папке «images» у нас расположены миниатюры в папке «thumbs», маленькие картинки, которые представляют саму галерею, и большие картинки, которые появляются при увеличении, вот они.

Давайте перейдем в корневую папку и откроем cloudzoom-gallery.html. Нажимаю два раза, у нас открывается данный эффект в браузере. Мы можем его просмотреть, попробовать, увеличить, уменьшить, пощелкать – все работает. Теперь для того, чтобы ставить данный эффект в программе Adobe Muse нам необходимо будет взять коды из этого документа. Документа cloudzoom-gallery.html. Я открываю его в специальном редакторе Notepad++. И здесь мы видим два раздела. Первый раздел – это раздел <head> и второй раздел <body>.

CloudZoom – эффект зума изображений. Установка на сайт.

Мы еще вернемся к данному документу, а сейчас давайте зайдем в программу Adobe Muse. И здесь «Создать новый сайт» или откройте новый сайт, на который вы хотите вставить данный эффект. Это zoom-галерея вставляется на самом деле очень просто. Мы переходим снова в редактирование файла cloudzoom-gallery.html, копируем код, который находится между тегами <body>, полностью копируем его, нажимаем «Копировать». И переходим в программу Adobe Muse и нажимаем здесь «Вставить». Все, код вставился. У нас на сайте размещен элемент HTML. То же самое мы могли бы сделать, если бы вошли в «Объект», далее «Вставить HTML» и разместили бы здесь данный код, нажали «ок».

Что нам нужно сделать дальше. Мы снова заходим в редактирование файла cloudzoom-gallery.html и теперь копируем все скрипты, которые находятся в разделе <head>. Начинаем мы отсюда или даже можем начать с названия скрипта, давайте я скопирую полностью. Вот эту часть мы должны скопировать, переходим в программу Adobe Muse и вот здесь заходим в «Страница», далее «Свойства страницы» и в раздел «Метаданные». И здесь в «HTML для <head>» мы вставляем данный код. Вставить. Ок.

Следующее, что мы должны сделать – это разместить данный элемент в нужном месте у себя на странице, я помещу его здесь в самом верху по центру. Далее захожу «Файл», выбираю «Экспортировать как HTML». Здесь нужно указать доменное имя вашего сайта. Я здесь напишу для примера «mysite.ru». И выбираем на рабочем столе папку, в которой расположена эта галерея, т.е. та папку, которую я распаковал – «Рабочий стол» – «Cloud Zoom». Нажимаю «Выбор папки» и нажимаю «ОК». Сайт экспортируется в данную папку. Как вы видите, все сразу запустилось для просмотра. И мы видим, что наш эффект расположен ровно по центру страницы, как я его и располагал. И все работает. Работает scroll, работает zoom. И все картинки видны сразу.

CloudZoom – эффект зума изображений. Размещение миниатюр, просмотр.

Единственное, что вот здесь мне не очень нравится, как расположены эти три миниатюры. Для этого мы заходим снова в программу Adobe Muse. Здесь нажимаем «ок». И нам нужно растянуть данный блок немного шире. Например, я сделаю его вот таким. И снова размещу ровно по центру. Готово. Делаю еще раз «Экспорт файла в HTML». Здесь уже все указано, нажимаю «ок». И теперь вы видите, что данный эффект у нас выглядит точно также, как выглядел при просмотре из файла cloudzoom-gallery.html. Только здесь он был расположен сбоку, а у нас расположен по центру.

Теперь мы можем редактировать наш сайт как угодно в программе Adobe Muse и размещать этот элемент где угодно у себя на странице сайта. Например, я хочу разместить здесь надпись какую-то или добавить еще один текстовый блок, сделать ему какую-нибудь заливку, или просто напросто вообще в браузере другой цвет поставить. Я сделаю оранжевый, как это было на сайте. Теперь снова могу экспортировать файл в HTML в ту же папку, и вы будете видеть, что у нас все работает теперь. И галерея у нас есть на сайте, и цвет браузера поменялся, и дополнительные элементы, которые могут быть вокруг этого эффекта, вокруг этой галереи.

CloudZoom – эффект зума изображений. Ограничения демо-версии и выводы.

Единственное ограничение – пока вы не купили данный эффект, здесь будет постоянно выскакивать вот такая красная надпись о том, что этот эффект является демо-версией.

На этом все, дорогие друзья. Я заканчиваю данный видеоурок. В нем вы научились добавлять различные эффекты, которые не являются виджетами и которые хотелось бы размещать у себя на сайте. На сайте starplugins.com вы сможете найти также и другие интересные виджеты. Здесь есть «Jet Zoom», «Star Zoom», «Killer Carousel» и даже есть один бесплатный. Принцип добавления их в Adobe Muse тот же самый.

Надеюсь это видео было для вас полезным. Подписывайтесь на мой канал, ставьте лайки, пишите комментарии внизу под этим видео.  И до встречи, до следующих видеоуроков!

Виджеты анимации и эффекты можно посмотреть здесь: Виджеты Adobe Muse

 

Автор видеоурока
Дмитрий Шаповалов

Оставьте комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: