Новые галереи с помощью плагина Lightbox
Настоящая инструкция описывает порядок действий для публикации галерей с помощью плагина lightbox.
В приведенном ниже примере я исходил из того, что
- все изображения галереи загружены на сервер в папку /img/papka/, а превьюшки вложены в папку /img/papka/thmb/;
- вы установили плагин lightbox 2;
- в настройках «постоянных ссылок» прописано /%postname%/.
- Для блока с галереей установлены следующие стили:
1 2 3 4 5 6 7 8 9 10 11 12 13
.gall { text-align:center; padding-top:20px; float:right; margin:0; padding:0; } .gall ul li { float:left; display:inline; padding:0 25px; margin:0; }
- Итак, в первую очередь убедитесь, что все изображения и их превьюшки загружены куда надо и мирно лежат на своих законных местах. Убедились. Действительно лежат. Еще проверьте, не затесались ли среди превьюшек большие картинки, а среди больших картинок — превьюшки. В Windows проще всего это сделать, выбрав вид отображения файлов «Таблица».
- Откройте любой текстовый редактор с функцией поиска/замены текста (рекомендую Notepad++) и вставьте туда приведенный ниже код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
<center> <div class="gall"> Название галереи<br> <!-- Будет выведено над превьюшками --> <ul> <li><a href="/img/papka/001.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/001.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/002.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/002.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/003.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/003.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/004.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/004.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/005.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/005.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/006.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/006.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/007.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/007.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/008.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/008.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/009.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/009.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/010.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/010.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/011.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/011.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/012.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/012.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/013.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/013.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/014.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/014.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/015.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/015.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/016.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/016.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/017.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/017.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/018.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/018.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/019.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/019.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/020.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/020.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/021.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/021.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/022.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/022.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/023.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/023.jpg" style="border:1px solid #fff;"></a></li> <li><a href="/img/papka/024.jpg" rel="lightbox[roadtrip1]"><img src="/img/papka/thmb/024.jpg" style="border:1px solid #fff;"></a></li> </ul> </div> </center>
- Добавьте или удалите строки в соответствии с количеством изображений в вашей галерее, а затем воспользуйтесь функцией поиска/замены текста чтобы редактор автоматически заменил в этом коде все papka-и на ваши.
- Скопируйте получившийся текст.
- Войдите в WordPress-овскую панель управления (/wp-admin/).
- В вертикальном меню слева перейдите по ссылке «Добавить страницу» из раздела «Страницы».
- Введите название галереи, а в большое поле ниже — скопированный из текстового редактора код.
- Отредактируйте вид постоянной ссылки на страницу. Желательно чтобы ссылка была простой, краткой и адекватной тому контенту, который на ней размещен. На приведенном ниже скриншоте уместно было бы исправить ссылку на /new_gallery/ или /gallery1/ или нечто подобное вместо длинной неуклюжей надписи /moya-novaya-galereya/:
- Теперь обратите внимание на вертикальную колонку в правой части страницы. Там расположены настройки, которые определяют очень важные параметры публикуемой страницы. Если вы хотите чтобы страница была общедоступна и опубликована сразу же, то ничего менять не нужно. Просто нажмите «опубликовать». Если желаете предоставлять доступ к этой странице только по паролю или вовсе скрыть ее от посторонних глаз — выберите соответствующие пункты в списке, выезжающем по нажатию на ссылку «Редактировать» рядом с опцией «Видимость»:
Здесь же можно когда указать дату, когда страница будет автоматически опубликована. Эта возможность будет интересна тем кто хотел бы приурочить публикацию своего контента к некоторой особой дате, праздничной, памятной, траурной — не важно. Ниже в этой же колонке можно прописать или выбрать из уже имеющихся метки и рубрики для нашей страницы. - По-моему, это всё. Жмем «Опубликовать».
Если по статье есть вопросы — пишите в комментах, постараюсь помочь.
