Почему я выбрал свой хостинг
Главная » Wordpress » Вы здесь =)

Как сделать слайдер (карусель) на wordpress

Всем привет! Про слайдер для wordpress я обмолвился в статье про промежуточные итоги работы над блогом. Там я обещал рассказать как легко и быстро установить так называемый слайдер (или по-другому карусель) к себе на блог. Так вот рассказываю. Как всегда подробно и пошагово.

Речь будет идти о плагине для wordpress — RC-Tiny. Автор плагина Роланд Чанишвили. Он легко устанавливается и гибко настраивается. Этот слайдер для вордпресс отлично вписывается в дизайн, экономит много места на блоге, а также является симпатичным мультимедиа.

карусель

8 несложных шагов, которые организуют карусель на вашем блоге:

1) Скачиваем сам плагин;

2) Заливаем его на сервер в папку wp-content/plugins/ и активируем;

3) Создаем папку big в корневом каталоге блога (где папки wp-content, wp-admin и другие). Можно и другую, но по умолчанию плагин проверяет наличие именно этой. Данная директория будет нужна для заливки картинок, которые будут отображаться в слайдере.

4) Теперь самое интересное :smile:. Как привязать картинку к определенному посту на блоге? Для этого в плагине существует несколько методов. Они зависят от того какая у вас стоит «система постоянных ссылок». Если у вас:

— ЧПУ, как у меня, то для привязки используется имя поста или статьи. Для того, чтобы привязать этот пост, я должен создать картинку slider-karusel-wordpress.jpg. Теперь посмотрите на адрес этой страницы и вам станет понятней. Этот метод в админке стоит по умолчанию и называется slug.jpg.

— номера постов в урле страниц (когда страница выглядит так http://sosnovskij.ru/?p=1339), то для этого нужно создать картинку с именем 1339.jpg. В админке этот метод называется post_id.jpg. Кстати для корректной работы плагина используйте только расширение jpg.

А сейчас конкретный пример моего слайдера. Урлы постов:

  • http://sosnovskij.ru/readers-without-ads/
  • http://sosnovskij.ru/konkurs-na-luchshuyu-fotografiyu-blogera/
  • http://sosnovskij.ru/foto-bloggerov/

Имена картинок:

  • readers-without-ads.jpg
  • konkurs-na-luchshuyu-fotografiyu-blogera.jpg
  • foto-bloggerov.jpg

5) После того как стало понятно, как привязывать картинки к постам, идем в админку. Указываем их размеры (именно их придется использовать), метод привязки и выбираем, что показывать в слайдере. Можно показывать:

  • последние 3 добавленные картинки (+ отмеченные);
  • случайные;
  • отмеченные.

6) Заливаем картинки в папку big (чем меньше будет она весить, тем быстрее будет загружаться слайдер) и в необходимом месте шаблона wordpress вставляем код:

<!--?php if(is_object($rctiny)) $rctiny--->show(); ?&gt;

Я вставил этот код в index.php и в single.php — в остальных файлах думаю смысла нет. Смотрим, что получилось. Если отображение нравится, то поздравляю вас — плагин установлен. Если же оформление не нравится, то переходим к пункту 7.

7) Изменяем оформление слайдера. Пункт «добавить к CSS». Есть 3 позиции:

  • #information a:hover{color:#000000} — это цвет текста (вместо 000000 поставить свой);
  • #information {background:#D9F0FF} — цвет фона (вместо D9F0FF свой);
  • {border:1px solid #ссс} — размер рамки и ее цвет (1px — это один пиксель).

Изменяем тут «по вкусу».

8 ) Можно редактировать размер текста, который выводится в слайдере. По умолчанию это 200 знаков. Если надо, то редактируем файл rc-tiny.class.php. Находим там 74 страочку и изменяем число на необходимое.

Теперь точно все, плагин установлен и настроен. Он достаточно легкий и не сильно грузит движок. Как вам?

Андрей Аронский предложил мануал по тому, как организовать карусель на сайте без использования плагина, за что ему большое спасибо. Итак, читатем.

Карусель на вордпресс без плагина

____________

Недавно было рассказано о плагине, позволяющем добавить на блог красивую карусельку. В одном из комментариев я высказал мнение, что использование плагина в этом случае является не самым рациональным методом, что и собираюсь вам доказать. А
В качестве альтернативы предлагаю вам способ, как добавить карусель на ваш блог без плагина.
Итак, для начала напомню, что каждый плагин для WordPress тормозит его работу, увеличивает глючность и мешает нахождению причины неисправностей. Я не спорю, но бывают плагины, без которых невозможно обойтись: на написание кода у вас уйдёт не одна неделя, а если вы не располагаете ни временем, ни знанием языка программирования – то тут и речи не может идти об замене плагина собственными скриптами.
Другое дело, когда речь идёт об плагинах, интегрирующих в WordPress скрипты других разработчиков. В качестве примера можно сразу вспомнить миллион реализаций плагинов, добавляющих Light Box эффект к вашим изображениям. Все они делают одно и то же: подключают JS – библиотеку и используют её функции.
Иногда, заглянув в один из таких плагинов, просто ужасаешься: становится страшно за будущее нашего программного обеспечения. Прошли те времена, когда все ругали кривой код индийских программистов: нет, они пишут также, просто ругать уже некому.
Отгоним пессимистические мысли: всё в наших руках, и вернёмся к нашей карусели.
Плагин написан с использованием скрипта отличного программиста Michael Leigeber’a. Наверное, по причине занятости, автор поленился написать хорошее руководство для своего скрипта, но, зато, представил несколько примеров. Рассмотрим один из них.
1. Первым делом решим, куда мы будем вставлять нашу карусель. Я думаю, небольшой опыт в написании и редактировании тем для WordPress у вас есть. По крайней мере, кому, как ни вам знать, как называются у вас шаблоны, отвечающие за вид главной страницы, страницы с постом, страницы с архивами. Напомню, что в стандартной теме они носят названия: index.php, single.php, arhive.php соответственно. Также вы можете пользоваться функциями вродe is_home(), is_single и т.д, и/или разместить код в footer.php.
2. Скачиваем скрипт: http://forum.leigeber.com/index.php?app=downloads&showfile=6
3. Распаковываем его куда-нибудь, я бы посоветовал в папку с темой, в которую вы его вставляете. Нам надо 2 файла и 1 папку: compressed.js, script.js, IMAGES.
4. Подключаем библиотеку:
<script type=»text/javascript» src=»<?php bloginfo(‘stylesheet_directory’);?>/carusel/compressed.js»></script>
В случае, если вы записали файлы в папку carusel в директорию с вашей темой для WordPress.
5. Вставляем JavaScript код:
<script type=»text/javascript»>
$(‘slideshow’).style.display=’none’;
$(‘wrapper’).style.display=’block’;
var slideshow=new TINY.slideshow(«slideshow»);
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link=»linkhover»;
slideshow.info=»information»;
slideshow.thumbs=»slider»;
slideshow.left=»slideleft»;
slideshow.right=»slideright»;
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active=»#fff»;
slideshow.init(«slideshow»,»image»,»imgprev»,»imgnext»,»imglink»);
}
</script>
Это функция вызова скрипта. Далее я разберу отдельно каждую строчку.
6. Добавляем код с картинками.
<ul id=»slideshow»>
<li>
<h3>TinySlideshow v1</h3>
<span><?php bloginfo(‘stylesheet_directory’);?>/carusel/photos/orange-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href=»#»><img src=»<?php bloginfo(‘stylesheet_directory’);?>/carusel/thumbnails/orange-fish-thumb.jpg» alt=»Orange Fish» /></a>
</li>
<li>
<h3>Sea Turtle</h3>
<span><?php bloginfo(‘stylesheet_directory’);?>/carusel/photos/sea-turtle.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src=»<?php bloginfo(‘stylesheet_directory’);?>/carusel/thumbnails/sea-turtle-thumb.jpg» alt=»Sea Turtle» />
</li>
</ul>
Это содержание нашей карусели. Оно оформлено в виде списка. Каждая новая картинка находится в виде отдельной строчки <li></li>
Написанное в теге <h3></h3> будет отображаться как заголовок во всплывающем окне.
В теге <span></span> содержится ссылка на полное изображение. В нашем случае, это изображение находится в подпапке PHOTOS папки CARUSEL в директории темы нашего WordPress.
То, что написано в <p></p> будет отображаться во всплывающем окне.
Последним тегом пропишем ссылку, которая откроется по нажатию на изображение. Если в качестве якоря ссылки поставить изображение (как видно в примере), то оно будет отображаться внизу карусели в виде слайд шоу. Изображение надо будет сохранить в папку THUMBNAILS, естественно уменьшенный вариант. Кстати, в плагине нет слайд шоу.
Теперь самое интересное: смотрим на JavaScript функцию, которую мы видели выше. Видите строчку
$(‘slideshow’).style.display=’none’; ? Это значит, что список, который мы написали выше отображаться не будет. Сейчас страница выглядит также как и до того, как мы что-то писали. Следующим шагом  будет вставка div’а, в котором это всё будет отображаться.
7. Мой догадливый читатель подумал, что div будет называться также как в строчке JavaScript’а:
$(‘wrapper’).style.display=’block’;
Всё правильно! А выглядеть наш код будет примерно вот так:
<div id=»wrapper»>
<div id=»fullsize»>
<div id=»imgprev» title=»Previous Image»></div>
<div id=»imglink»></div>
<div id=»imgnext» title=»Next Image»></div>
<div id=»image»></div>
<div id=»information»>
<h3></h3>
<p></p>
</div>
</div>
<div id=»thumbnails»>
<div id=»slideleft» title=»Slide Left»></div>
<div id=»slidearea»>
<div id=»slider»></div>
</div>
<div id=»slideright» title=»Slide Right»></div>
</div>
</div>
Большой div «wrapper» содержит в себе два div’а поменьше: «fullsize» и «thumbnails», являющихся полным размером и слайд шоу в виде превьюшек соответственно.
Пусть вас не удивляет их обманчивая пустота: они наполнены только тем, что нужно, чтоб описать это в каскадной таблице стилей и предоставить скрипту для наполнения красотой.
8. Разбираемся с JavaScript функцией.
Итак:
var slideshow=new TINY.slideshow(«slideshow»);
window.onload=function(){
}
Это копируем не задумываясь. Зачем нам сейчас разбираться в теории создания классов в JavaScript?
А вот то, что внутри, нам уже интересно. Рассмотрим то, что на примере:
slideshow.auto=true; — прокручивается ли карусель автоматически. По умолчанию – false.
slideshow.speed=5; — скорость прокрутки. По умолчанию – 10.
slideshow.link=»linkhover»; — это название класса отображения ссылки. Вернёмся к нему, когда будем рассматривать каскадные стили.
slideshow.info=»information»; — информация. Указывает id div’а, содержащегося в «fullsize».
slideshow.thumbs=»slider»; — id div’а в котором будет отображаться слайд шоу. Если удалить строчку – слайд шоу не будет.
slideshow.left=»slideleft»; slideshow.right=»slideright»; — id div’ов, отвечающих за прокрутку слайд шоу. Как можно заметить, все 3 div’а находятся в «thumbnails». Как вы их расположите, значения не имеет.
slideshow.scrollSpeed=4; — скорость, с которой будет крутиться слайдер. Чем больше число – тем выше скорость.
slideshow.spacing=5; — расстояние между превьюшками.
slideshow.active=»#fff»; — цвет граница активной превьюшки.
slideshow.init(«slideshow»,»image»,»imgprev»,»imgnext»,»imglink»); — то, без чего это всё вообще работать не будет. «slideshow» – это id списка, о котором я писал в пункте 6. «image»,»imgprev»,»imgnext»,»imglink» – это div’ы изображения, кнопки «вперёд», «назад» и ссылки соответственно. Всё это содержится в «fullsize».
9. Опишем это всё с помощью CSS. Тут замечу, что подргузка лишнего CSS занимает  много времени, а при реализации карусели посредством плагина без загрузки лишней каскадной таблицы стилей обойтись нельзя было.
Я очень мучился и извращался, когда создавал свой плагин G_Buzz_Button, пытаясь обойтись без дополнительной CSS. Мне это стоило больших нервов и времени, но я всё сделал и получил очень аккуратный и лёгкий код на выходе.
Реализовывая карусель моим методом, мы сможем добавить всё нужное для таблицы стилей в CSS нашей темы. Добавим такой код:
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px; font-size: 10px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
Я не буду сейчас рассказывать о том, что такое CSS, вы должны об этом знать и так. Как видите, тут описаны все наши id и class’ы. Вы можете оставить так, как есть, а можете редактировать как вашей душе угодно.
Кстати, хочу сделать важное замечание: все названия вы можете изменять как вам угодно, главное, чтоб они все были согласованны в div’ах, в JavaScript’е и в CSS.
Предлагаю вам попробовать уйти от стандартной компоновки и расположить компоненты карусели как душе угодно. К примеру, все кнопки могут быть отдельно, вы можете не делать большое изображение, а просто увеличить изображения из слайдера. Вы можете сделать так, чтоб всё крутилось и менялось с огромной скоростью, а можете сделать, чтоб ссылки из карусели вели в разные места одной статьи. Вы совсем не ограничены количеством изображений в карусели и их размером.

В качестве альтернативы предлагаю вам способ, как добавить карусель на ваш блог без плагина.

Итак, для начала напомню, что каждый плагин для WordPress тормозит его работу, увеличивает глючность и мешает нахождению причины неисправностей. Я не спорю, но бывают плагины, без которых невозможно обойтись: на написание кода у вас уйдёт не одна неделя, а если вы не располагаете ни временем, ни знанием языка программирования – то тут и речи не может идти об замене плагина собственными скриптами.

Другое дело, когда речь идёт об плагинах, интегрирующих в WordPress скрипты других разработчиков. В качестве примера можно сразу вспомнить миллион реализаций плагинов, добавляющих Light Box эффект к вашим изображениям. Все они делают одно и то же: подключают JS – библиотеку и используют её функции.

Иногда, заглянув в один из таких плагинов, просто ужасаешься: становится страшно за будущее нашего программного обеспечения. Прошли те времена, когда все ругали кривой код индийских программистов: нет, они пишут также, просто ругать уже некому.

Отгоним пессимистические мысли: всё в наших руках, и вернёмся к нашей карусели.

Плагин написан с использованием скрипта отличного программиста Michael Leigeber’a. Наверное, по причине занятости, автор поленился написать хорошее руководство для своего скрипта, но, зато, представил несколько примеров. Рассмотрим один из них.

1. Первым делом решим, куда мы будем вставлять нашу карусель. Я думаю, небольшой опыт в написании и редактировании тем для WordPress у вас есть. По крайней мере, кому, как ни вам знать, как называются у вас шаблоны, отвечающие за вид главной страницы, страницы с постом, страницы с архивами. Напомню, что в стандартной теме они носят названия: index.php, single.php, arhive.php соответственно. Также вы можете пользоваться функциями вродe is_home(), is_single и т.д, и/или разместить код в footer.php.

2. Скачиваем скрипт.

3. Распаковываем его куда-нибудь, я бы посоветовал в папку с темой, в которую вы его вставляете. Нам надо 2 файла и 1 папку: compressed.js, script.js, IMAGES.

4. Подключаем библиотеку:

<script type=»text/javascript» src=»<?php bloginfo(‘stylesheet_directory’);?>/carusel/compressed.js»></script>

В случае, если вы записали файлы в папку carusel в директорию с вашей темой для WordPress.

5. Вставляем JavaScript код:

<script type=»text/javascript»>

$(‘slideshow’).style.display=’none’;

$(‘wrapper’).style.display=’block’;

var slideshow=new TINY.slideshow(«slideshow»);

window.onload=function(){

slideshow.auto=true;

slideshow.speed=5;

slideshow.link=»linkhover»;

slideshow.info=»information»;

slideshow.thumbs=»slider»;

slideshow.left=»slideleft»;

slideshow.right=»slideright»;

slideshow.scrollSpeed=4;

slideshow.spacing=5;

slideshow.active=»#fff»;

slideshow.init(«slideshow»,»image»,»imgprev»,»imgnext»,»imglink»);

}

</script>

Это функция вызова скрипта. Далее я разберу отдельно каждую строчку.

6. Добавляем код с картинками.

<ul id=»slideshow»>

<li>

<h3>TinySlideshow v1</h3>

<span><?php bloginfo(‘stylesheet_directory’);?>/carusel/photos/orange-fish.jpg</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>

<a href=»#»><img src=»<?php bloginfo(‘stylesheet_directory’);?>/carusel/thumbnails/orange-fish-thumb.jpg» alt=»Orange Fish» /></a>

</li>

<li>

<h3>Sea Turtle</h3>

<span><?php bloginfo(‘stylesheet_directory’);?>/carusel/photos/sea-turtle.jpg</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>

<img src=»<?php bloginfo(‘stylesheet_directory’);?>/carusel/thumbnails/sea-turtle-thumb.jpg» alt=»Sea Turtle» />

</li>

</ul>

Это содержание нашей карусели. Оно оформлено в виде списка. Каждая новая картинка находится в виде отдельной строчки <li></li>. Написанное в теге <h3></h3> будет отображаться как заголовок во всплывающем окне. В теге <span></span> содержится ссылка на полное изображение. В нашем случае, это изображение находится в подпапке PHOTOS папки CARUSEL в директории темы нашего WordPress. То, что написано в <p></p> будет отображаться во всплывающем окне.

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

Теперь самое интересное: смотрим на JavaScript функцию, которую мы видели выше. Видите строчку $(‘slideshow’).style.display=’none’; ? Это значит, что список, который мы написали выше отображаться не будет. Сейчас страница выглядит также как и до того, как мы что-то писали. Следующим шагом будет вставка div’а, в котором это всё будет отображаться.

7. Мой догадливый читатель подумал, что div будет называться также как в строчке JavaScript’а:

$(‘wrapper’).style.display=’block’;

Всё правильно! А выглядеть наш код будет примерно вот так:

<div id=»wrapper»>

<div id=»fullsize»>

<div id=»imgprev» class=»imgnav» title=»Previous Image»></div>

<div id=»imglink»></div>

<div id=»imgnext» class=»imgnav» title=»Next Image»></div>

<div id=»image»></div>

<div id=»information»>

<h3></h3>

<p></p>

</div>

</div>

<div id=»thumbnails»>

<div id=»slideleft» title=»Slide Left»></div>

<div id=»slidearea»>

<div id=»slider»></div>

</div>

<div id=»slideright» title=»Slide Right»></div>

</div>

</div>

Большой div «wrapper» содержит в себе два div’а поменьше: «fullsize» и «thumbnails», являющихся полным размером и слайд шоу в виде превьюшек соответственно.

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

8. Разбираемся с JavaScript функцией.

Итак:

var slideshow=new TINY.slideshow(«slideshow»);

window.onload=function(){

}

Это копируем не задумываясь. Зачем нам сейчас разбираться в теории создания классов в JavaScript?

А вот то, что внутри, нам уже интересно. Рассмотрим то, что на примере:

slideshow.auto=true; — прокручивается ли карусель автоматически. По умолчанию – false.

slideshow.speed=5; — скорость прокрутки. По умолчанию – 10.

slideshow.link=»linkhover»; — это название класса отображения ссылки. Вернёмся к нему, когда будем рассматривать каскадные стили.

slideshow.info=»information»; — информация. Указывает id div’а, содержащегося в «fullsize».

slideshow.thumbs=»slider»; — id div’а, в котором будет отображаться слайд шоу. Если удалить строчку – его не будет.

slideshow.left=»slideleft»; slideshow.right=»slideright»; — id div’ов, отвечающих за прокрутку слайд шоу. Как можно заметить, все 3 div’а находятся в «thumbnails». Как вы их расположите, значения не имеет.

slideshow.scrollSpeed=4; — скорость, с которой будет крутиться слайдер. Чем больше число – тем выше скорость.

slideshow.spacing=5; — расстояние между превьюшками.

slideshow.active=»#fff»; — цвет граница активной превьюшки.

slideshow.init(«slideshow»,»image»,»imgprev»,»imgnext»,»imglink»); — то, без чего это всё вообще работать не будет. «slideshow» – это id списка, о котором я писал в пункте 6. «image»,»imgprev»,»imgnext»,»imglink» – это div’ы изображения, кнопки «вперёд», «назад» и ссылки соответственно. Всё это содержится в «fullsize».

9. Опишем это всё с помощью CSS. Тут замечу, что подргузка лишнего CSS занимает  много времени, а при реализации карусели посредством плагина без загрузки лишней каскадной таблицы стилей обойтись нельзя было.

Я очень мучился и извращался, когда создавал свой плагин G_Buzz_Button, пытаясь обойтись без дополнительной CSS. Мне это стоило больших нервов и времени, но я всё сделал и получил очень аккуратный и лёгкий код на выходе.

Реализовывая карусель моим методом, мы сможем добавить всё нужное для таблицы стилей в CSS нашей темы. Добавим такой код:

#slideshow {list-style:none; color:#fff}

#slideshow span {display:none}

#wrapper {width:506px; margin:50px auto; display:none}

#wrapper * {margin:0; padding:0}

#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}

#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}

#information h3 {padding:4px 8px 3px; font-size:14px}

#information p {padding:0 8px 8px; font-size: 10px}

#image {width:500px}

#image img {position:absolute; z-index:25; width:auto}

.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}

#imgprev {left:0; background:url(images/left.gif) left center no-repeat}

#imgnext {right:0; background:url(images/right.gif) right center no-repeat}

#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}

.linkhover {background:url(images/link.gif) center center no-repeat}

#thumbnails {margin-top:15px}

#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}

#slideleft:hover {background-color:#333}

#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}

#slideright:hover {background-color:#333}

#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}

#slider {position:absolute; left:0; height:81px}

#slider img {cursor:pointer; border:1px solid #666; padding:2px}

Я не буду сейчас рассказывать о том, что такое CSS, вы должны об этом знать и так. Как видите, тут описаны все наши id и class’ы. Вы можете оставить так, как есть, а можете редактировать как вашей душе угодно.

Кстати, хочу сделать важное замечание: все названия вы можете изменять как вам угодно, главное, чтоб они все были согласованны в div’ах, в JavaScript’е и в CSS.

Предлагаю вам попробовать уйти от стандартной компоновки и расположить компоненты карусели как душе угодно. К примеру, все кнопки могут быть отдельно, вы можете не делать большое изображение, а просто увеличить изображения из слайдера. Вы можете сделать так, чтоб всё крутилось и менялось с огромной скоростью, а можете сделать, чтоб ссылки из карусели вели в разные места одной статьи. Вы совсем не ограничены количеством изображений и их размером.

__________

Спасибо, Андрею за подробную инструкцию.

А сейчас о приятном. Планка в 400 подписчиков преодолена :shock: — сегодня feedburner показал цифру 404 (прям как одноименная страница об ошибке), что несказанно радует. А еще вчера на столе я обнаружил следующий конверт.

конверт от google

Это 1400 рублей на рекламную кампанию adwords. Такой бонусный купон можно было получить, оплатив какой-то сервис или воспользовавшись чьими-нибудь услугами (в пределах участников акции). Но самое интересно, что в акции я не участвовал, то есть купон пришел мне просто так, как участнику google adsense . Может быть кому-то тоже такие купончики приходили?

Забавно получается: начинаешь писать пост днем в одном городе, а заканчиваешь вечером в другом.

Постовой:
Когда нужны актуальные программы на заказ, начинаешь задумываться, что разработка программного обеспечения будет лучшим решением.

1 звезда2 звезды3 звезды4 звезды5 звезд (6 голос., в среднем: 4,33 из 5)
Loading ... Loading ...

Дата: 11.02.2010
Получайте актуальные статьи по SEO, блоггингу и заработку в Интернете
прямо на ваш почтовый ящик. Уже более 3000 подписчиков!

Отзывов уже 83:

  1. 1. Kiteg | kiteg.info | 11 февраля 2010

    Мне приходил летом такой купон)

  2. 2. Andrew | gblog.zzl.org | 11 февраля 2010

    Да. А моему другу пару недель назад пришел такой конверт на сумму 300грн, просто как участнику гугл эдвердс

  3. 3. nevill.exe | nevill-exe.ru | 11 февраля 2010

    Надо бы проверить почтовый ящик, может быть тоже лежит :smile:

  4. 4. ITSnezok | www.1000baksov.net | 11 февраля 2010

    Мне тоже приходил на 300грн. Кстати спасибо за пост. Будем вешать слайдер ;)

  5. 5. yana | 11 февраля 2010

    Спасибо, Сергей! Ты очень помог! Яна

  6. 6. Healthy | ifeelstrong.ru | 11 февраля 2010

    Сосновский, вы бы добавили, что помимо легкости плагина, следует придерживать легкость загружаемых изображений.

  7. 7. yana | 11 февраля 2010

    Работает все замечательно. А можно ли изменить скорость (интервал времени) переключения картинок?

  8. 8. Алёшка | jesh.ru | 11 февраля 2010

    jesh.ru/2010/02/xalyavnye-kupony-google-adwords/

    Ещё вчера про купончик новость запостил :shock:
    Точно такой же пришёл)

    А про ротацию картинок — спасибо! Сейчас реализую такую же на своём блоге…

  9. 9. Aronsky | www.muzhiks.com | 11 февраля 2010

    У плагина от Роланда проблемы с настройками, он их не обновляет как надо. Можно заметить, если попробовать заменить картинку на другую с таким-же именем, или попробовать добавить 4 картинки по выбору.
    В сети есть ещё одна реализация плагина вордпресс на базе скрипта Leigeber’а, только я забыл, кто его написал. Там меньше настроек, но стабильнее работа.
    Вообще, эти все скрипты проще прикручивать к WP не в виде плагинов, а как к обычному сайту. Уменьшается вес кода => увеличивается скорость работы.

  10. 10. Серж Shine | best-end-top.ru | 12 февраля 2010

    Прочитал про плагин — круто. Порой даже очень необходимо. Прочитал в комментах, что можно без него и тут возник вопрос, а можно подробней описать как вставить карусель без плагина???

  11. 11. Sosnovskij | sosnovskij.ru | 12 февраля 2010

    Healthy, добавил ;-)
    yana, я не нашел, скорее всего нельзя.
    Aronsky, а меня все устраивает :smile: Напишите как без плагина это организовать — интересно. Серж Shine, а вы как раз прочитаете тоже.

  12. 12. Aronsky | www.muzhiks.com | 12 февраля 2010

    Собственно, проблемы никакой нету, всё понятно описано на странице автора:
    leigeber.com/2008/12/javascript-slideshow/
    Хотя, я могу перевести и описать применительно к WP, если есть такая необходимость.

  13. 13. Sosnovskij | sosnovskij.ru | 13 февраля 2010

    Aronsky, так я сейчас только вспомнил, что Роланд на его основе и сделал этот плагин.
    Кто хочет организовывать карусель без плагина, то тогда по ссылке выше.

  14. 14. Серж Shine | best-end-top.ru | 13 февраля 2010

    Я был бы очень признателен, если бы то, что находиться по ссылке переделали на вордпресс и перевели на русский. А то я не силен в английском да и другие читатели будут признательны)))

  15. 15. Sosnovskij | sosnovskij.ru | 13 февраля 2010

    Серж Shine, так этот плагин и есть то, что вы захотели. Он сделан на основе javascript, переделан в php оболочку и организован как плагин для wordpress.

  16. 16. Серж Shine | best-end-top.ru | 13 февраля 2010

    Да я знаю, просто не хочется больше вордпресс дополнительными плагинами загружать. Хочу встроить в саму тему :smile:

  17. 17. Sosnovskij | sosnovskij.ru | 13 февраля 2010

    Так javascript исполняется вне зависимости от движка. Там надо код скачать и вставить его к себе в шаблон, заранее настроив вывод всех параметров. Как я понял описания к картинкам надо там же писать в ручную и каждый раз изменять файл с шаблоном, что не всегда удобно.

  18. 18. Aronsky | www.muzhiks.com | 14 февраля 2010

    В общем, наделал я путаницы с этим скриптом. Я постараюсь сегодня написать небольшой мануал на русском как удобно встроить скрипт прямо в тему вордпресс и, если Сергей согласится — прямо на этом блоге и опубликуем, в дополнение к этому посту.

  19. 19. Sosnovskij | sosnovskij.ru | 14 февраля 2010

    Aronsky, да, конечно. Присылайте на почту, а я опубликую и про ссылку не забуду ;-)

  20. 20. Дмитрий | www.paravin.ru | 14 февраля 2010

    во! актуально очень!

    у меня rc-tiny не хочет работать почему-то. и проблемы в админке вызывает: перестают работать динамические менюшки.
    альтернативы достойной так и не нашел. если будет вариант без установки плагина (просто кодом) вообще будет супер!

  21. 21. Sosnovskij | sosnovskij.ru | 24 февраля 2010

    Добавил подробный мануал по организации карусели для сайта от Андрея Аронского :-)

  22. 22. Дмитрий | www.paravin.ru | 27 февраля 2010

    большое спасибо! :razz:

  23. 23. happybolt | 6 марта 2010

    Впервые пришел на ваш сайт по запросу «карусель WordPress».
    Прочитал несколько страниц. Интересно!
    Что там в конверте от Гугл? Чек? Как вообще обналичить деньги на счету гугл эдвердс? Я об ничего не знаю.

  24. 24. happybolt | 6 марта 2010

    Подскажите, если карусель добавить в блог без плагина, то ссылки на нужные страницы нужно будет прописывать вручную? Я правильно понял?

  25. 25. Sosnovskij | sosnovskij.ru | 6 марта 2010

    happybolt, в конверте был код для активации бонусных 1400 рублей. Со счета google adwords деньги нельзя обналичить. Вы наверно спутали с google adsense. Для жителей России есть более удобный способ вывода через отделения почты.
    Насчет ссылок в карусели вы правильно поняли ;-) .

  26. 26. happybolt | 7 марта 2010

    Sosnovskij, спасибо за ваш ответ.
    Я добавил карусель в блог. Такой технически простой способ имеет одно важное преимущество — мне все понятно!
    А если прописать в коде шаблона номер ID избранной рубрики для отображения в слайдере и количество постов? Потребуется сложный код?

  27. 27. Sosnovskij | sosnovskij.ru | 7 марта 2010

    happybolt, не понял, что вы хотите :)

  28. 28. happybolt | 7 марта 2010

    Sosnovskij, например, есть шаблоны в которых для слайдера можно назначить вывод избранной рубрики, анонсы которой нужно показать, из админки WP, указав номер ID; также количество статей. Но чтобы из админки — это сложно, в смысле написать такой код.
    Возможно ли, использовав пару строк кода, указать в самом шаблоне (например, в index.php) какую именно рубрику должен отображать слайдер? И количество статей из этой рубрики?

  29. 29. Aronsky | www.muzhiks.com | 7 марта 2010

    happybolt, Сделать можно всё :-)
    Обратите внимание на пункт 6: код, содержащийся там описывает ЧТО должно отображаться (остальной код описывает КАК оно должно отображаться).
    Проверить, какая отображается категория можно с помощью функции is_category();
    ( codex.wordpress.org/Function_Reference/is_category ). Остальное прописать руками для каждой категории и организовать ветвление.
    Также вы можете написать несколько строчек php для того, чтоб он производил запросы к БД WP, но это будет сложнее, вам придётся курить кодекс (ссылка выше).

  30. 30. happybolt | 7 марта 2010

    Aronsky, спасибо за подсказку.
    На сегодняшний день моего знания хватит только на то, чтобы адаптировать чье-то готовое решение под свои нужды. Я кое-что нашел уже.

  31. 31. Алексей | www.termo-stal.ru | 11 марта 2010

    Да приходил. Я его применил на рекламу сайта.

  32. 32. Nata | hochu-vse-znat.ru | 15 марта 2010

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

  33. 33. Borisovna | live.bibnout.ru | 21 марта 2010

    Прочитала, выполнила по написанному, получилось. Спасибо, большое!

  34. 34. k0tello | kotelloblog.com | 3 апреля 2010

    Интересный слайдер ;-) Этот я еще не пробовал) Пощупаю…

  35. 35. scamry | www.wtimes.ru | 17 апреля 2010

    Спасибо за информацию о плагине! Давно хотел сделать нечто подобное. Удачно я зашел на Ваш блог.

  36. 36. Elena | velosipedizm.ru | 24 апреля 2010

    Спасибо! Буду ставить карусель на свой блог, тема раскрыта)

  37. 37. Ян | stupid-blog.ru | 1 мая 2010

    Очень подробно, спасибо, хотя и довольно не просто.

    зы. Хочу конвертик от гугла)) Хоть цель ставь, хотя мой эксиримент а АдСенсом не очень удался)

  38. 38. Ольга Удалова | olgaudalova.com | 3 мая 2010

    Спасибо огромное за понятно изложенную информацию, Сергей! :idea:
    Не могу нарадоваться на новоиспеченное слайд-шоу!!! ;-)

  39. 39. Evgenicus | evgenicus.ru | 11 мая 2010

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

  40. 40. Sven | 9 августа 2010

    Добрый день. Поставил плагин, но видимо он некорректно работает, все записи отображаются в столбик + картинки не отображаются. Ставлю на локалке, путь к папке указываю правильно, но картинки не отображаются. Подскажите в чем проблема

  41. 41. Sosnovskij | sosnovskij.ru | 9 августа 2010

    Sven, а пробовали не на локалке? У меня проблем таких не возникало. Попробуйте спросить у автора в этом посте chanishvili.org/rc-tiny/ ;-)

  42. 42. Sven | club-mobile.info | 9 августа 2010

    Спасибо, уже разобрался. Была проблема в том что папка биг была не в корне, а в подпапке. Ожидал от этого модуля другого результата :)

    Может видели такой модуль как на этом сайте? _http://www.seotm.com
    Хотелось бы такой модуль :)

  43. 43. Sosnovskij | sosnovskij.ru | 9 августа 2010

    Sven, нет такого не встречал.

  44. 44. Андрей ЕГО | soft-4-free.ru | 31 августа 2010

    Sosnovskij, а не могли бы про использование купона поподробнее рассказать?
    Я просто хочу купить их по дешевке, вот и хотел уточнить нюансы. К примеру есть ли отличия купонных денег от реальных которыми ты пополняешь счет?
    Или что я должен знать такого особенного чтобы не пролететь с ними.
    Заранее спасибо.

  45. 45. Sosnovskij | sosnovskij.ru | 31 августа 2010

    Андрей ЕГО, один купон — один аккаунт. Для активации каждого нужно пополнить счет на 400 рублей. В остальном все также.

  46. 46. Андрей ЕГО | soft-4-free.ru | 31 августа 2010

    Sosnovskij, то есть я не смогу активировать на своем акке еще один купон после первого? (даже если еще 400 рублей кину?)

  47. 47. Sosnovskij | sosnovskij.ru | 1 сентября 2010

    Андрей ЕГО, нет. Купоны рассчитаны на пробные рекламные кампании для новых клиентов (пользователей).

  48. 48. Андрей ЕГО | soft-4-free.ru | 1 сентября 2010

    Sosnovskij, извиняюсь что так докапываюсь, но а что меня может остановить от создания и активации еще одного аккаунта? или они привязаны с URL?

  49. 49. Sosnovskij | sosnovskij.ru | 1 сентября 2010

    Андрей ЕГО, так вот именно, что ничего :smile: . Просто для нового аккаунта в идеале все новые данные и все.

  50. 50. Андрей ЕГО | soft-4-free.ru | 1 сентября 2010

    Sosnovskij, Замечательно)) надо бы заняться))

  51. 51. Евгений | Bluda.org | 30 сентября 2010

    Привет, возник вот такой вопрос: В данном плагине получается что выводится одна большая картинка, с анонсом поста и при нажатии открывается пост к которому привязана картинка (и соответственно стрелочки, которыми можно прокручивать вперед-назад). А можно ли, сделать так, чтобы выводились несколько маленьких картинок, как например в плагине jCarousel Lite??? ПС: Только не нужно советовать установить этот плагин. :)

  52. 52. Sosnovskij | sosnovskij.ru | 30 сентября 2010

    Евгений, нет, в это плагине это не предусмотрено.

  53. 53. XenK | xenk.ru | 11 октября 2010

    Хотелось бы увидеть конечный результат :oops:

  54. 54. Sosnovskij | sosnovskij.ru | 11 октября 2010

    XenK, я уже убрал карусель. Пример можно посмотреть тут sandbox.leigeber.com/javascript-slideshow/
    Только в плагине нет нижних картинок.

  55. 55. vinaction | tytto.ru | 20 октября 2010

    Отличная статья про слайдер, но я не понял одну вещь. Берет ли этот слайдер сам картинки из постов и делает из них тумбы для своей галереи? Или же нужно указывать ему где картинки лежат или прописывать дополнительные поля в каждом посте где указывать польный путь до картинки, как в случае с еще одним слайдером для WP — Featured Content Gallery ?!
    В общем, надо ли ручками добавлять путь до картинки, или же плагин автоматом берет первую картинку из поста и автоматом же делает тумбу?

  56. 56. Sosnovskij | sosnovskij.ru | 20 октября 2010

    vinaction, создавать и заливать на хостинг надо ручками (4,6 пункты).

  57. 57. vinaction | tytto.ru | 20 октября 2010

    Sosnovskij, ну это не интересно… если у меня на сайте уже 200постов я для каждого должен сделать тумбу и слить их все в одну папку?! И все это ручками!

    Вроде 21ый век же?! :lol:

    Есть отличный плагин IGIT Related Posts With Thumb он сам шурудит по постам выдергивает первую картинку и делает из нее тумбу и рандомно или как душе взбредет выводит в конце поста.
    Я ищу что-то похожее, но с красивостями флеши. RC-Tiny похоже очень деревянный.

  58. 58. Sosnovskij | sosnovskij.ru | 21 октября 2010

    vinaction, в моем представлении в слайдере должны быть картинки-ссылки на самые интересные страницы. Поэтому 3-5 картинок мне за глаза :smile: . Да и гибкость пропадает в случае автоматических вставок.

  59. 59. vinaction | tytto.ru | 21 октября 2010

    Sosnovskij, А по какому критерию выбирается самый интересный пост? Опять сам определяешь? Или по кол-ву просмотров страницы все таки выбирается?

  60. 60. Sosnovskij | sosnovskij.ru | 21 октября 2010

    vinaction, сам, конечно. Просмотры могут быть и с поиска. Когда я его устанавливал, то мне нужно было решение для привлечения внимание посетителей к определенным постам. Этот плагин полностью справлялся со своей задачей :smile: .

  61. 61. Борис | zhitok.org | 12 ноября 2010

    Парни не знаю писал тут на эту тему кто нибудь или нет но у меня такая проблемка плагин залил начал ставить ссылку и он не находит папку пишет что папка не существует :( в общем как только не обзывал папку куда я ее только не пихал, в каких только позах не указывал урл ни чего не получается подскажите плиз срочно надо :oops:

  62. 62. Борис | zhitok.org | 13 ноября 2010

    И так не дождался и решил проблему сам кому нужно будет решить такую же проблемку пишите на мыло

  63. 63. Светлана | 16 ноября 2010

    Большое спасибо, получилось правда не сразу! :shock:

  64. 64. александр | 2 декабря 2010

    Всё сделал так как расписал автор блога, но в итоге слайдер не появляется в нужном месте где прописал show(); ?>
    Нужно ли в самих файлах слайдера что-то дописывать/убрать. Подскажите пожалуйста.

  65. 65. Sosnovskij | sosnovskij.ru | 2 декабря 2010

    александр, нет, больше ничего не нужно :smile: .

  66. 66. vadimon | 10 января 2011

    Как привязать картинку к посту написано, а как мне наименовать картинку если слайдер будет привязан в шапке блога и он будет идти сквозняком через весь блог?

  67. 67. Sosnovskij | sosnovskij.ru | 10 января 2011

    vadimon, вопрос не понял. Инструкция как раз для того, чтобы слайдер был встроен сквозняком на блоге, а в нем показывались анонсы постов с картинками, которые будут соответствующим образом привязаны (пункт 4). :smile:

  68. 68. vadimon | 10 января 2011

    Sosnovskij, я так понял, что картинка, которая будет в слайдере, обязательным образом должна присутствовать и в посте? точно такого же размера?

  69. 69. vadimon | 10 января 2011

    Все делаю строго по инструкции для плагина, но слайдер так и не отображается…

  70. 70. Sosnovskij | sosnovskij.ru | 10 января 2011

    vadimon, нет. Она должна присутствовать в созданном каталоге (по умолчанию big).

  71. 71. Алексей | proobschenie.ru | 14 марта 2011

    мне как раз похожая статья на ящик пришла:) только слайдеры называется

  72. 72. Ирина | 26 июня 2011

    Плагин установила и активировала, картинки загрузила, в настройках плагина они отображаются. Вставляю указанный вами код в файл index.php, а на сайте ничего не добавляется? В чем может быть причина?

  73. 73. YYN | besthappy.ru | 25 августа 2011

    Пойду спать… Завтра на работу рано, добавил в закладки, позже разберусь.

  74. 74. Марьян | www.seasonpoetry.ru | 11 декабря 2011

    Что-то не хочет работать…
    Но наверное я что-то не так сделал.
    Спасибо за плагин!

  75. 75. ХаМ | 3 января 2012

    Мне то же купон приходил на 1400 :) только у меня карточка зелёная )

  76. 76. Татьяна | tatinakovalenko.com | 4 февраля 2012

    Спасибо очень нужно установить карусель фото на сайт. иду пробовать. Хотя бы получилось.

  77. 77. Наталья-эмансипе | emans.ru | 13 февраля 2012

    Приветствую! Впервые на твоем блоге, статья понравилась — очень подробная и понятная, времени не хватает, чтобы все настраивать самостоятельно (переезжаю в другой город). Мой Блог поменял хостинг, и слайдер перестал отображаться верно. Использую Featured Content Slider, ты знаешь, как его настроить? (Можешь посмотреть проблему на моем блоге — анонсы постов растянулись на всю страницу). Посоветуй, как быть, пожалуйста!

  78. 78. Sosnovskij | sosnovskij.ru | 13 февраля 2012

    Наталья-эмансипе, к сожалению, с плагином Featured Content Slider никогда не встречался.

  79. 79. Юрий | 3 августа 2013

    Евгений, не мог бы ты подсказать или дать ссылку, как реализовать на wordpress слайдер, как на этом сайте (верхний слайдер) gidonlinekino.com причем, я сам хочу вручную выбирать какие посты будут публиковаться.

  80. 80. Сергей | web-prime.ru | 12 октября 2013

    Без обид, но..
    Как же задолбали на всех сайтах одинаковые посты про плагин Роланда Чанишвили для слайдера постов. Я ведь забиваю в поисковике карусель картинок а не постов. Жаль.. Пойду дальше искать.

  81. 81. Вадим | 12 июня 2014

    yana, я не понял и плагин не работает — ничего не отображается (((

  82. 82. Габриел | 17 августа 2014

    слайдер карусель, что то новенькое ))

  83. 83. serialmint | 4 июля 2015

    А не подошел мне модуль потому что для горизонтальной карусели логотипов мне нужно было чтобы перелистывание происходило ровно на 1 логотип влево, а здесь (насколько я помню) сменялось сразу несколько. Теоретически можно было покопаться в коде плагина и этот момент подправить, но я выбрал поиск другого решения.

Подняться наверхПодняться наверх
WordPress: 66.88MB | MySQL:34 | 1,951sec