Блог hell4opt`a

Всем привет! Хотел поделиться своим способом сделать красивое открытие картинок в блоге. Для примера работы скрипта, нажмите на картинку ниже:





Скрипт выделяется среди остальных своим маленьким размером(~20кб), и не надо подгружать больше никакие сторонние библиотеки(напр: jquery,etc)

И так начнем, для начала нам нужен бесплатный хостинг файлов(или платный,если есть), я выбрал сервис яндекса - http://narod.yandex.ru/, именно на хостинг надо будет залить сам скрипт, 4 картинки, и css файл. И так начнем, для начало зайдите в настройки-макет-изменить html и поставьте галочку расширить шаблоны виджета. Поиском(у меня это F3, у Вас скорее всего ctrl+f) найдите тег head и сразу после него вставьте следующий код:





Как видно в первых двух строчках мы прописываем пути к скрипту и css файлу соответственно.
А дальше мы подгружаем сам скрипт, подробнее про его работу можно почитать на офф. странице проекта.

Теперь про добавление фото, когда мы добавляем фото через соответствующую кнопку в редакторе, то в появившимся коде находим следующую строчку:
" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjikKVn7VKhehmNkBVvfHArL5wAxOFH2bT9jPYaKME-AMNzizfqqugiDxL2j7ADiVPSR84pod_39E7WAlTyuWmgnic9OguoMyzMlH83I0s4_qNmcpBbHS1tyHS6207qC8dKDkhdjZBLUoom/s1600-h/1243592207_7.jpg " во общем нас интересует "-h" его нужно удалить, иначе ничего работать не будет, то есть оставить так: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjikKVn7VKhehmNkBVvfHArL5wAxOFH2bT9jPYaKME-AMNzizfqqugiDxL2j7ADiVPSR84pod_39E7WAlTyuWmgnic9OguoMyzMlH83I0s4_qNmcpBbHS1tyHS6207qC8dKDkhdjZBLUoom/s1600/1243592207_7.jpg" и сразу после этой строчки вписываем следующее: rel="lightgallery", тоесть должно быть получится так:

"href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3zBiXgNgNSmzpeKuVs6Dmu4mpRcDc3K8CydDi_rGz77FG76GnNepa2CcV1wmczxLSPD1n53n7jsTX0l_4_EbH_98X3vI0KYNzFzugVw_ZPKV4m4p_KBj_1eGShhqVWwfRRf-Y1CINYo6t/s1600/1199026812_5.jpg" rel="lightgallery">

Всё что нужно для работы можно скачать ниже:



p.s: Не забудьте в файле css исправить пути на картинки.
p.ss: Файл css можно не подгружать, можно просто вставить его содержимое после тега head между тегами style

UPD: сам перестал пользоваться, тк время загрузки блога увеличивается