Простенькая веб-галерея для Живого Журнала
Давно уже ищу какой-нибудь слайдер для Живого Журнала. Так ничего до сих пор и не нашёл. Позавчера решил с этим вопросом покончить. Целый день шарил по Сети, заглядывал в блоги веб-дизайнеров, здесь же на ЖЖ... Но то, что они предлагают - очень сложно. Описывается, например, такой вариант... Создаём аккаунт на Фликре, загружаем туда нужные картинки, создаём из этих картинок веб-галерейку, берём код для вставки этой галерейки в блог и вставляем. Вставил... Не работает. При первом же клике по стрелке «Следующая» меня переносит на Фликр!
Узнал, что скрипты на ЖЖ блокируются. Можно было бы использовать слайдер на основе CSS3, но Живой Журнал поддерживает этот язык лишь частично. Анимацию, самое интересное в CSS3, не поддерживает. Что делать? Тут я вспомнил про якоря. Выложил изображения в запись цепочкой, каждое - в своём блоке. Снабдил все якорями (name="Ivan") и поставил ссылки на якоря (href="#Ivan") таким образом, что ссылка с каждого изображения указывает на якорь следующего, а ссылка с последнего изображения указывает на якорь первого. Последнее необходимо для того, чтобы зациклить галерею. Таким образом её можно прокручивать бесконечно. Но в одну сторону. Можно сделать и в обе, но я решил без крайней нужды не усложнять код. Получился вот такой коротюсенький, на семь картинок:
Вставляем курсор между метками ссылки на якорь ( ) и нажимаем кнопку «Добавить фото» в редакторе.
По необходимости количество блоков можно уменьшить или увеличить. Только нужно следить за порядком номеров - в качестве имён якорей удобнее всего использовать их порядковые номера - и чтобы ссылка в блоке была на единицу больше номера якоря в этом же блоке, а ссылка в последнем блоке указывала на первый номер.
Вот что у меня получилось!
Чтобы уж совсем облегчить создание слайдера, советую вам загрузить полезнейшую программку Punto Switcher с Яндекса. Программа создавалась для автоматического переключения раскладок клавиатуры, но самым интересным у Пунто Свитчера, на мой взгляд, является возможность автозамен. Например, внесли в список автозамен аббревиатуры «жжс», то есть «ЖЖ-слайдер», а в другую колонку вставили то, чем должна быть заменена эта аббревиатура - кодом для слайдера, приведённым выше. Теперь пишем в редакторе «жжс», нажимаем клавишу «Ввод» и получаем код для слайдера. Удобно? Пользуйтесь!
Одно условие! Все фотографии для слайдера должны быть одного размера или с одинаковым соотношением сторон. В этом слайдере задан размер 640 на 400, но можно вставить изображения 1280 на 800, 1440 на 900 или 1680 на 1050. У них то же соотношение сторон, поэтому в слайдере они ужмутся до заданных 640 на 400. У меня здесь вставлены обои 1280 на 800. Если щёлкнуть по изображению правой клавишей мышки и выбрать команду «Открыть изображение», то его можно посмотреть в отдельном окне. Кто не знает, по открывшемуся изображению нужно кликнуть ещё раз, чтобы оно развернулось в полный размер.
По шаблону этого слайдера можно «настрогать» шаблонов и под другие соотношения сторон.