Cкрипт 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/

 

Эффект увеличения фотографии на сайте с помощью simplebox. обновлено: Февраль 2, 2016 автором: Илья Журавлёв
 
 

5 комментариев

  • Иван 02.02.2016 Ответить

    А почему в скрипте прописана вот эта ссылка http://info-effect.ru

    • Илья Журавлёв 02.02.2016 Ответить Автор

      Потому что я забыл написать, что вам нужно заменить в скрипте мой адрес сайта на свой. Сейчас обязательно напишу в статье предупреждение. Спасибо, что подсказали !

  • Михаил 02.12.2016 Ответить

    Всё бы хорошо, но у этого скрипта есть большой минус, как его доработать не знаю. Дело в том, что он увеличивает изображение при клике не до полного размера, а подгоняет по высоте под размер экрана, что часто неудобно, т.к. картинка увеличивается всего лишь в 1,5-2 раза (если конечно у вас монитор не 24»). И если с помощью этого скрипта увеличивать документы с текстом, грамоты, дипломы и т.п., то при незначительном увеличении ничего не видно толком.

    • Илья Журавлёв 02.12.2016 Ответить Автор

      Так и должно быть по идеи, размеры экрана у всех разные. Могу порекомендовать вам плагин для увеличения изображений.

      • Михаил 04.12.2016 Ответить

        Спасибо, помогли, объединил WP LightBox 2 и встроенную галерею в WordPress — получились удобные и красивые галереи. Для отдельных фото использую просто плагин WP LightBox 2.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


2 + 6 =



super-infa-top
Стрелка вверх