Rimon Lusi (fotovivo) wrote,
Rimon Lusi
fotovivo

Слайдер для ЖЖ

Раскопай и поделись!

По итогам второго раунда приз отправляется к gatta_bianka
Второе место у bruxelloise_ru
И третье у wetfield
Аплодисменты победителям!
in_es получает приз зрительских симпатий за рассказ о беспечной молодости!

Хештег #раскопайсвоихнетленок отдается в хорошие руки бессрочное общественное пользование, вместе с шаблоном слайдера-галереи.

Пример слайдера:
Рассвет над Эйлатским заливом


"Только раз в году на рассвете" - см.
#природнаясреда
eilat_sun_009.jpg

AHAVA - Площадь любящих сердец
#городаивесизакатырассветы
eilat_sun_008.jpg

Светило подглядывает
#Эйлат
eilat_sun_007.jpg

"Фонтаны ультрафиолета!"
#городаивесипесня
eilat_sun_006.jpg

Оранжевое небо
#

Солнцестояние
# ярило
eilat_sun_005.jpg

Современное искусство: "Любовь - кольцо"
#
eilat_sun_004.jpg

Ясным днем
Эйлатский залив
eilat_sun_003.jpg

Город взбирается в гору
#
eilat_sun_002.jpg




Шаблон у галереи - резиновый, подстраивается под размер картинок: если в форму поместить превьюшки 100 х 100, слайдер соответственно уменьшится в размерах.
Код и пояснения под катом -

Рассвет над Эйлатским заливом


"На рассвете" - см.
#природнаясреда
eilat_sun_009.jpg


Светило подглядывает
#Эйлат
eilat_sun_007.jpg

"Фонтаны_ультрофиолета!"
#городаивесипесня
eilat_sun_006.jpg

Оранжевое небо
#

Солнцестояние
# ярило
eilat_sun_005.jpg

"Любовь - кольцо"
#
eilat_sun_004.jpg

Ясным днем
Эйлатский залив
eilat_sun_003.jpg

Город взбирается в гору
#
eilat_sun_002.jpg





Как сделать галерею:

[Spoiler (click to open)]
Слайдер состоит из контейнера и содержимого.

Что бы сформировать ленту слайдов - залейте картинки в Альбом ЖЖ и отправьте их в "редактор новой записи",
получим список линков вида:



К каждому линку, в конце, после закрывающей угловой скобки нужно приписать: </div>
а в начале, перед  <img src , выражение:

<div style="background: salmon; border:2px solid silver; margin:10px; padding:20px; border-radius:10px;"><span style="font-size:1.1em; color:white; font-family:Segoe Print; font-weight:600;">Заголовок_слайда</span>
# подзаголовок


Таким образом, каждый слайд состоит из блока <div>...</div> c картинкой и текстом внутри:

<div style="background: salmon; border:2px solid silver; margin:10px; padding:20px; border-radius:10px;">
<span style="font-size:1.1em; color:white; font-family:Segoe Print; font-weight:600;">Заголовок_слайда</span>
# подзаголовок
<img src='httрs://...pics/АДРЕС_ИЗОБРАЖЕНИЯ_600.jpg'  alt="001.jpg" title="001.jpg" /></div>


Цветовое оформление слайда легко изменить - вставив вместо "salmon; silver; white" другие цвета (отсюда https://yoksel.github.io/handy-colors/)
(и имена шрифтов поддаются переопределению и вообще всё что угодно, но тем, кто знает как менять стили, шаблон с подсказками не требуется)

Готовую ленту слайдов нужно поместить в контейнер:

<div style="display:inline-block; width:120%; overflow-x:scroll; overflow-y:hidden;">
<center><span style="color: maroon; font-weight:600; font-size:1.2em">НАЗВАНИЕ_ГАЛЕРЕИ</span></center>
<div style="display:inline-flex; flex-wrap: nowrap; background: maroon; border-radius: 18px; width:10000px; padding: 10px;">

СЛАЙДЫ...СЛАЙДЫ
</div></div>


Хозяйке на заметку: код слайдера заточен под редактор ЖЖ, весьма своеобразно интерпретирующий CSS,
на локальной страничке или на стендалоне всё можно сделать логичней и красивее.




Код шаблона в сборе, на 10 слайдов:



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

eilat_sun_010.jpg

Так же как изображение в слайд вставляется ролик с ютуб (вместо <img src="httрs://MY_KARTINKO_original.png"> пишем: <iframe src="httрs://www.youtube.com/embed/ССЫЛЬ" width="800" height="315" frameborder="0" allowfullscreen data-link="httрs://youtube.com/watch?v=ССЫЛЬ"></iframe>)

Enjoy!




Tags: #a15467, #ДольфинРиф, #Эйлат, #городаивесизакатырассветы, #городаивесипесня, #природнаясреда, #раскопайсвоихнетленок, #хешмоб, Эйлат, веб-штучки
Subscribe

Posts from This Journal “веб-штучки” Tag

  • Ответы по пунктам

    Блогер блогеру - не читатель. Мы друг другу - группа поддержки. Без поддержки запись никто не увидит, даже гуглояндекс отнесется скептически.…

  • Хотите стать новостным блогером?

    Самые свежие новости, с пылу с жару прямиком с "телетайпной ленты ТАСС" - теперь доступны всем и каждому: Еще не вышли газеты, а…

  • Фотожаба без фотошопа

    На подступах к компьютерной графике. Со времен появления мыши и оконной системы каких-то прорывных решений в пользовательском интерфейсе ПК можно…

  • Достал конкретно!

    Новый стиль. СЕО-оптимизированный по самое не могу. Переходишь из почты, ответить на комментарий: всё для вашего удобства — поле коммента…

  • Веб-штучки, облегчающие жизнь

    И блогеру и вообще. Еще один мой конек - компьютерные фишки в стиле "чайнику от чайника": под постом выложу, сколько поместится из уже…

  • МКС: как смотреть трансляцию поверх всех окон

    Есть стыковка! Вот-вот завершится подготовка к открытию люка и воссоединению экипажа SpaceХ с командой МКС он-лайн. По оценкам НАСА запуск вчера…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 37 comments