Blogspot, вставила Conveyor Belt slideshow

                                                                                                                                                               

      Решила я немного приукрасить свой блог и добавить под шапкой блога непрерывную ленту изображений своих рецептов.      Вариантов таких Image Slider великое множество , но у меня были определенные требования      -   никаких jQuery, Flash и прочих новомодностей, которые зачастую блокируются в правильно настроенных браузерах. Посетители моего блога являются обыкновенными чайниками и нужно чтобы моя лента изображений была видна всем и во всех браузерах.

      Порыскав по интернету, я остановилась на Conveyor Belt slideshow script  ( Ленточный конвейер слайд-шоу).

      Мой блог приобрел такой вид:

    

   Если кому-то интересно как я это проделывала, то может
а я себе для памяти все запишу, да и блогерам может этим помогу.

  В том месте, где должен располагаться наш Image Slider, добавляем гаджет “ HTML/Java Script “, и в выскочившем окошке добавляем скопированный с "Conveyor Belt slideshow script" код.( код копируем полностью)

   Вносим изменения в код:

     Вместо 300 px ставим длину нашего слайдера ( у меня ширина блога 1100, я сделала ленту слайдера 1000 px.)

     150 пикселей  -   это высота вашей ленты, и, соответственно, ваших мини-фото ( у меня высота всех фото, а значит и ленты 180 пикселей.

     Третий по счету овал  - это фон, на котором будет располагаться слайд-лента ( я поставила белый FFFFFF.

     А с четвертым квадратным блоком нам и придется в основном работать.

    

   У меня в слайд-ленте отображается 30 мини-фото, в коде  шаблон для вставки ссылок на фото рассчитан только на 5 (включая 0-нулевую стартовую). Так что мне пришлось методом копирования и вставки увеличить число шаблонов для вставки фото до 30.( я все не покажу, но как смогу дам объяснение.:

       =

   Вот я скопировала и вставила ниже код для вставки фото. У меня уже код рассчитан на 10 фото. Нужно обратить особое внимание на первый синий столбец -  здесь нужно менять порядковые числа из расчета “ n – 1 “, а в правом  синем столбце я просто проставила реальные порядковые номера фото, чтобы потом легче было ориентироваться.
     Зеленый овал   -  сюда можно вставить ссылки на страницы, где находятся наши фото(или рецепты как у меня) Но я этого не сделала  -  руки не дошли.
     Красный овал   -   а вот сюда мы вставляем адрес наших фото ( я залила на веб-альбом Picasa и оттуда брала адреса.)

   Все фотографии уменьшала и обрабатывала в бесплатном фото-редакторе  PhotoScape , там же добавляла округление углов. Потом все фотографии провела через (к сожалению сайт онлайн-компрессора перестал существовать, но фото можно ужать до нужного размера в программе FastStone Image Viewer)    и уменьшила вес  фото до 6-10 кб.,
Когда все вышеописанные манипуляции будут проделаны, жмем в нашем гаджете кнопку “Сохранить” и идем любоваться на наш Slider Image.

---

Blogger Теги: Conveyor Belt slideshow script, Slider Image., непрерывная лента изображений

This work is licensed under a Creative Commons Attribution Non-commercial license.