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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script type=»text/javascript» src=»https://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’,’https://info-effect.ru/simplebox.css’);
Box.getScripts(‘simplebox_js’,’https://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>

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

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

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

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