Слайд-шоу без плагина*

Slaid-shoy 5 Здравствуйте дорогие читатели и гости сайта «Тестируем шаблон». Рада новой встрече на блоге.

Сегодня мы поговорим о простом способе сделать слайд-шоу  в статье или в виде виджета в сайдбаре без помощи плагина. Хочу сказать, что способ простой и достаточно известный, но если вы начинающий блоггер, только приступающий к ведению своего сайта, то возможно эта информация вам будет полезной.

На моем блоге есть обзор как минимум пяти плагинов для оформления слайдеров и слайд-шоу для сайта (ссылки можно посмотреть здесь), но иногда установка плагина невозможна из-за высокой нагрузки на сервер, а порой нам нужен, возможно, единственный  слайд-шоу, то  стоит ли ради него устанавливать плагин?…хотя, чаще нас останавливает именно нагрузка…

Теперь непосредственно о коде HTML, который необходимо также оформить в HTML-режиме и установить в статью или виджет. Он изначально выглядит так, но тот код, который следует скопировать и использовать я расположу ниже в специальных окошечках, а здесь только рассмотрим, что есть что :mail:

<marquee style=»WIDTH: 300px» direction=»right» scrollamount=»3″> Коды фото </marquee>

Тег  вначале <marquee style и в конце </marquee> будет осуществлять движение, 

«WIDTH: горизонтально

 300px —размер окошка

direction=»right» движение слева направо

scrollamount -скорость движения от 1 до 9 (самая медленная естественно 1)

Исходя из вышеперечисленного код ниже будет означать горизонтальный слайд-шоу , но движущийся справа налево.( «left»)

<marquee style=»WIDTH: 300px» direction=»left» scrollamount=»3″> Коды фото </marquee>

Коды ниже означают движение по вертикали : сверху вниз ( «down») и снизу вверх ( «up») соответственно.

<marquee style=» HEIGHT: 300px » direction=»down» scrollamount=»2″> Коды фото </marquee>

<marquee style=» HEIGHT: 300px » direction=»up» scrollamount=»2″> Коды фото </marquee>

Там где по- русски указано Коды фото, здесь можно вставить несколько кодов картинок. Эти изображения могут располагаться  на сторонних сайтах, где вы храните свои картинки, допустим на Яндекс-фотках. Заходите в свои фотки (не забывайте, что фото кликабельны),

Slaid-shoy 4

выбираете нужный альбом и далее выбранную фотографию. Копируете код и вставляете их в выше рассмотренные теги. Можно естественно убрать с картинки ссылку на Яндекс-фотки, тогда при нажатии на картинку в слайд-шоу читатель не будет переходить на другой сайт (в частности на Яндекс-фотки)

Slaid-shoy 3 Как убрать ссылку мы уже рассматривали подробно здесь.

Но ведь фотографии хранятся еще  и на других ресурсах: например, на Гугле в веб-альбомах Picasa. Здесь мы проделываем тот же путь к изображению и

Slaid-shoy 2

копируем код картинки для вставки в блог.

Slaid-shoy 1

Что удобно: и на Яндексе и на Гугле мы можем выбрать размер изображений и тогда слайд-шоу будет просматриваться красиво, без отклонений размеров картинок ( то есть, установив картинки разные по параметрам это будет заметно при просмотре.)

Но мы ведь можем вставить в слайд-шоу и картинки хранящиеся на собственном сайте, для этого нужно в теги «движения» внеси коды изображений хранящихся на блоге.

Самый простой пример кода: Когда мы копируем картинку на блог, мы делаем так, как на фото:

Slaid-shoy 9

Теперь в скопированном коде картинки как обычно удаляем ссылку (она выделена синим)

<a target=»_blank» href=»http://smayliki.ru/smilie-457347591.html»><img src=»http://s4.rimg.info/0505e991dc9a995a5eab38b43f1e869e.gif» ></a>

а вот в вместо ссылки выделенной красным можем вставлять адрес любого изображения хранящегося на блоге. Адрес копируем так:

Slaid-shoy 8Теперь самое главное напутствие или пожелание :rose: :

Создавайте слайд-шоу в отдельном черновике, после установки кода в статью нельзя ее просматривать в редакции визуально, только HTML, иначе слайд-шоу превратиться в неподвижные картинки.

Поэтому, такие слайд-шоу удачно делать для сайдбара. Здесь окошко виджета размером 300 пикселей,

Slaid-shoy 6

а здесь уменьшено до 100 пикселей.

Slaid-shoy 7

Коды для копирования

<marquee style="WIDTH: 300px" direction="right" scrollamount="3">Коды фото  </marquee>
<marquee style=" HEIGHT: 300px " direction="down" scrollamount="2"> Коды фото </marquee>

Вот вроде бы и все.  Несколько примеров слайд-шоу и о других интересных находках мы поговорим в следующих статьях рубрики.







:heart: Расскажи другу, пусть тоже дизайном займется :good:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • LinkedIn
  • Digg
  • Blogger
  • Блог Li.ру
  • Сто закладок
  • RSS
  • Одноклассники

Об авторе Юлия

Меня зовут Юлия. Этот сайт я начала из-за моей проснувшейся и непонятной любви к рассмотрению настроек шаблонов. Сама я пока создавать темы на Вордпресс не умею, но надеюсь, что это когда-нибудь случится. Пишите в комментариях свои вопросы: я обязательно отвечу. Ну и замечания тоже приветствуются-))

Закладка Постоянная ссылка.

36 комментариев: Слайд-шоу без плагина*

  1. Ирина пишет:

    Юля,для меня Ваша информация, очень полезна. Слайд-шоу без плагина — это то ,что мне надо. Спасибо!

  2. Irina пишет:

    Юля! ты просто такая умная! У меня слов нет! Когда ты все успеваешь? Я неуч беспросветный! Мне так все нравится что ты делаешь. Нужно просто найти время и поковыряться. Столько полезного на твоем сайте!
    Спасибо тебе, что просвещаешь нас. I-see-stars

  3. mrs.interesno пишет:

    Юля, хорошо, что ты предложила вариант без плагина.
    Это очень удобно.
    Можно в любом месте разместить слайд-шоу.
    И действительно, нагрузка на сайт меньше.

  4. дед Виталя пишет:

    Юлия, здравствуйте!
    Вроде «чайником» себя и не считаю, но в Вашей статье для (как Вы пишете) начинающих блогеров довольно много нюансов, о которых я ранее не знал.
    Хотя частенько пользуюсь вставкой своих снимков и слайд-шоу как с Яндекс-фоток, так и из других сервисов.
    БлагоДарю Вас! :rose:

    • Юлия пишет:

      Думаю, что каждый из нас постоянно узнает что-то новое, делится этим-возможно кому-то и пригодится, а это главное :bye:

  5. Лариса пишет:

    Юль, а у тебя в сайдбаре этот код стоит? То есть если картинки поставить то можно будет перейти на статью соответственно или для этого нужен плагин? Пойду еще пороюсь в твоих учениях. :good:

    • Юлия пишет:

      Я написала про слайд-шоу, а для слайдера нужен либо плагин, либо другой код, но у меня про него стать еще нет… :unsure:

  6. Лара пишет:

    Юль меня интересует, как ты сделала в сайдбаре Шаблоны вордпресс, где по картинкам попадаешь на статью. Про это нет у тебя пока? Юль напиши статью об этом :heart: Буду очень ждать! Прям очень-очень :rose:

  7. Лара пишет:

    Юль пишу с ноута, поэтому тут без сайта и почта другая

  8. Лара пишет:

    Пасиб, я всегда че-нить да напутаю или вопросы задаю на марсианском языке :-)

  9. Лора пишет:

    Я часто пользовалась таки слайд-шоу «бегущей» строкой!!! очень удобно. Но применяла его на своих страничке на яндексе) На своем сайте тоже планирую применить такой вид слайд-шоу для некоторых своих статей. Но если честно, были сомнения, разрешит ли Вордпресс, на котором у меня работает блог такие коды)) теперь знаю, что можно!! СПАСИБО!!!)

  10. Ольга пишет:

    Не получилось.Вылезли маленькие значечки по 0.5 см причем начинаясь от сайдбара и заканчиваясь на конце страницы.Адреса изображений надо вставлять как, через запятую?

  11. Ольга пишет:

    теперь у меня просто текстовой строкой бегут адреса картинок.Картинки у меня на сайте.Что не так?

  12. Ольга пишет:

    Мне все картинки надо вставить в черновик, а потом оттуда взять коды?

    • Юлия пишет:

      Примерно так я и делала: для каждой картинки делаем код и устанавливаем их между тегами по-порядку и все это в режиме HTML.

  13. Ольга пишет:

    Теперь они у меня выплывают вертикальной полосой, но не друг за другом, а все одновременно

  14. Ольга пишет:

    Ура! Вертикально получилось, но почему не получается горизонтально?А как поставить его посредине страницы, а не сбоку?

    • Юлия пишет:

      Олечка, вот этого я не знаю. Может тегами для центра попробовать обрамить? Честно говоря его лучше для сайдбара использовать…

  15. Ух ты, какая штучка интересная! Спасибо! Я попробовала на своем тестовом сайте такую вместе со ссылками, с вертикальной прокруткой — работает отлично! Наверное, сейчас пообрезаю картинки и на основной сайт буду закидывать.
    Юлия, а слайдер (ну, чтобы не ползло, а просто менялись картинки спустя пару секунд) без плагина Вы так и не пробовали сделать? А то я уже несколько дней бьюсь, перепробовала несколько вариантов, но что-то не выходит (а плагинами нагружать не хочется) :wacko:

    • Юлия пишет:

      Слайдер без плагина тоже ползунок получится…есть у меня фотографии с этой разработкой: пробовала как-то, но видимо код не слишком точный, а может что-то не так делала, а чтобы менялось, то такого кода я не знаю…А плагин для слайдера можно же полегче подобрать, ну и проверить его Р3

  16. Артем пишет:

    Хм, красиво получается… Не знал о таком теге. Спасибо, буде применять…

  17. Ирина пишет:

    Добрый вечер, Юля! Пишу очередную БЛАГОДАРНОСТЬ Вашим трудам. Это слайд-шоу просто находка для моего сайта. Спасибо Вам! Ирина

    • Юлия пишет:

      Рада, что пригодилось :heart: Очень нравятся шарики на Вашем блоге, себе помню на день делала, но у меня с этими красивыми плагинами и так перебор, хотя я бы еще и Деда Мороза на коньках весь год бы не убирала ;-)

  18. Ирина пишет:

    Точно, Дед Мороз и моя слабость. Еще сайт не доделала, а уже думаю, как украсить на Новый год!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

[+] Жми на плюс- Открой тайник- Чтоб прикольный СМАЙЛ возник!
:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)