Agkz.ru - игровой новостной портал
Эффект увеличения фотографии на сайте с помощью simplebox.

Эффект увеличения фотографии на сайте с помощью simplebox.

Добрый день уважаемые читатели !

 

Сегодня я хотел бы рассказать вам об одной очень крутой и прикольной фишки, для вашего сайта. Речь пойдёт о скрипте simplebox, с помощью которого, кликнув по изображению находящемуся у вас на сайте, фотография увеличится и отобразится в отдельном окошке. Вот как это выглядит: (смотри фото)

 

22-04-2015 13-05-24

 

Прикольно ! не правда ли ! ?

Это не просто прикольно, стильно и красиво, но так же и удобно, к примеру загрузили вы большую фотографию к себе на сайт, но целиком фотография не помещается на страницу записи, а вам нужно что бы изображение увидели целиком, так как вы там что-то объясняете, и показываете своим посетителям.

Как раз для этого и нужен скрипт simplebox, большую фотографию можно уменьшить в настройках, что бы она поместилась на страницу записи, а что бы можно было увидеть фотографию целиком, для этого в настройках указываем ссылку на изображение, и указываем отношение к simplebox. Более подробно о том как это сделать, читайте далее.

Итак, поехали, для начала скачайте скрипт simplebox, вот по этой ссылке. Затем, вам нужно будет загрузить скрипт simplebox в корневую папку вашего сайта на вашем хостинге, и распаковать zip архив скрипта. Как это сделать я буду показывать на примере хостинг-компании HOSTiQ.com.ua. Зайдите в свою cPanel, найдите вкладку — Диспетчер файлов, и нажмите на неё. (смотри фото)

 

22-04-2015 14-47-19

 

Далее, выберите доменное имя вашего каталога, и нажмите перейти. (смотри фото)

 

22-04-2015 14-48-10

 

Далее вы попадёте на страницу файлов вашего сайта, вверху найдите вкладку — Передать, и нажмите на неё. (смотри фото)

 

22-04-2015 14-56-17_mini

 

Затем, выберите на вашем компьютере  файл simplebox. (смотри фото)

 

22-04-2015 14-57-08_mini

 

Дождитесь загрузки файла, и нажмите на вкладку — Вернуться. (смотри фото)

 

22-04-2015 14-58-40

 

После чего в вашем каталоге появится файл simplebox.zip, выделите файл кликнув по нему, и нажмите вверху на вкладку извлечь. (смотри фото)

 

22-04-2015 15-03-30_mini

 

Подтвердите Извлечение файлов. (смотри фото)

 

22-04-2015 15-04-14

 

Закройте окно, где показаны извлечённые файлы. (смотри фото)

 

22-04-2015 15-04-43

 

И последнее, перезагрузите страницу, что бы у вас появились извлечённые файлы. У вас должно появится 3 файла simplebox, папку zip которую вы загрузили  можете удалить, она вам больше не понадобиться. (смотри фото)

 

22-04-2015 15-07-49_mini

 

Да, чтобы удалить папку с zip архивом, выделите её, и нажмите вверху на вкладку Удалить.

Итак, подводим промежуточные итоги, скрипт simplebox мы установили в корневую папку нашего сайта на хостинге. Теперь нам нужно добавить специальный код, в папку footer.php (подвал). Для этого зайдите в свой WordPress, перейдите по вкладке: Внешний видРедактор, и слева на открывшейся странице найдите вкладку: Подвал (footer.php), и нажмите на неё. (смотри фото)

 

22-04-2015 15-39-06

 

Затем на странице редактирования спуститесь в самый низ страницы, и найдите там вот такой тег: </body>, перед ним вставьте код simplebox:  (смотри фото) Внимание ! В коде укажите свой адрес сайта вместо моего, в трёх местах ! 

 

<script type=»text/javascript» src=»http://info-effect.ru/simplebox_util.js»></script>

<script type=»text/javascript»>

(function(){

var boxes=[],els,i,l;

if(document.querySelectorAll){

els=document.querySelectorAll(‘a[rel=simplebox]’);

Box.getStyles(‘simplebox_css’,’http://info-effect.ru/simplebox.css’);

Box.getScripts(‘simplebox_js’,’http://info-effect.ru/simplebox.js’,function(){

simplebox.init();

for(i=0,l=els.length;i<l;++i)

simplebox.start(els[i]);

simplebox.start(‘a[rel=simplebox_group]’);

});

}

})();</script>

 

22-04-2015 15-46-35_mini

 

Всё, в конце не забудьте сохранить сделанные изменения, нажав на кнопку — Обновить файл.

Итак, мы переходим к заключительному этапу, в котором мы проверим работу скрипта simplebox. Для этого создайте запись, или откройте для редактирования уже существующую запись, вставьте какую-нибудь фотографию в запись, кликните по фото и нажмите на значок изменить. (смотри фото)

 

22-04-2015 17-17-47

 

Далее в параметрах изображения, в поле — Ссылка укажите — Медиафайл, в поле Отношение, введите название скрипта — simplebox, расположение и размер выбирайте по своему усмотрению, в конце жмёте Обновить. (смотри фото)

 

22-04-2015 17-20-59

 

Всё, теперь можете сохранить и просмотреть запись, жмёте на фото, и вуаля :-)) фото увеличится и откроется в отдельном красивом боксе. Итак, на этой радостной ноте, я буду прощаться с вами, но не навсегда, а до новых встреч на страницах info-effect.ru/