четверг, 20 января 2011 г.

Слайдшоу на Blogspot

Картинки, картинки и еще раз картинки + ротатор картинок... Мутный немного... И не все так просто, но работает...


Большой недостаток - нельзя грузить файло на блог, кроме картинок... Приходится исполняемые хранить где-то еще...

Как это сделать? Просто в целом... Два варианта расскажу
1 вариант. Очень простой.
Открываем редактирование дизайна в панели инструментов в блоге, выбираем изменить HTML ищем </head> и перед ним фигачим следующее (можно поместить и сразу после <head> - ну тут кому как удобнее)
<link href='http://in-flames.clan.su/blogger/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://in-flames.clan.su/blogger/js/lytebox.js' type='text/javascript'/>

должно получиться
<link href='http://in-flames.clan.su/blogger/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://in-flames.clan.su/blogger/js/lytebox.js' type='text/javascript'/>
</head>
Ну и далее просто видоизменяем ссылки изображений... Переключаемся при добавлении в режим "Изменить HTML" и в ссылки на картинках добавляем rel="lyteshow[vacation]"
Примерно ссылка будет выглядеть после изменений так:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jO8qN4_NWfmonPLDevzFLZxuj25aFHCgvySDii-EuzlkCNpeGssZXfJAB6Z_GYcEn63tbZtSgA0bF5BnbSbk3SVIZz8ntXlNU3QyjkR40wGpOXBZ41q7WsoPFokGws_E7mheUkDLB8c/s1600/graffity.jpg" imageanchor="1" rel="lyteshow[vacation]" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jO8qN4_NWfmonPLDevzFLZxuj25aFHCgvySDii-EuzlkCNpeGssZXfJAB6Z_GYcEn63tbZtSgA0bF5BnbSbk3SVIZz8ntXlNU3QyjkR40wGpOXBZ41q7WsoPFokGws_E7mheUkDLB8c/s200/graffity.jpg" width="151" /></a>
Красным отмечено то, что я добавил в ссылку, все остальное как было... Это можно прописывать ко всем картинкам, на любой странице вашего блога... Примерный принцип работы - Скрипт считывает все rel'ы на ТЕКУЩЕЙ странице и по ним формирует слайдшоу, будь у вас там одна-две картинки или 500...

2 вариант. Посложнее.

Грузим файлы, которые относятся к Слайдшоу... заливаем их куда-нибудь (я например залил на старый свой сайт, который хостится на юкозе)... Там к картинкам слайдшоу (не путать с картинками, которые мы крутим в этом самом слайдшоу) по умолчанию идет путь типа ваш_сайт/images/название_картинки... Поэтому это надо как-то соблюсти, либо править ручками местоположение картинок в файлах слайдшоу...

Когда все загрузили и запомнили куда... рисуем в коде дизайна шаблона следующее:

<link href='http://ваш_сайт/путь(если надо)/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://ваш_сайт/путь(если надо)/lytebox.js' type='text/javascript'/>
И помещаем это так же как и в первом варианте, перед </head> или сразу после <head>

После всех манипуляций и сохранений дописываем к картинкам тоже самое, что и в первом варианте.. Проверяем. должно работать... Если не работает - проверяйте пути к файлам и картинкам...

Про сам скрипт и более подробную инструкцию (на EN) можно прочитать тут

По данному примеру можно на своем блоге размещать практически все что угодно...

P.S. Скрипты начинают работать после полной загрузки страницы...

P.P.S. Если изменяете шаблон дизайна, то не забудьте вставить код скриптов в новый.... 

1 комментарий:

  1. Да.... Желательно на главной делать типа превью сообщений... а сами сообщения с картинками уже делать в части с "подробнее" иначе в слайдшоу будут картинки из всех постов находящихся на одной странице...

    ОтветитьУдалить