Решился потренироваться в написании jQuery плагинов, и вот предлагаю на суд общественности мой первый плагин…
Данный плагин позволяет организовать мини-презентацию из любых DOM элементов, он прост в использовании и вполне может Вам пригодиться. Ну от слов к делу.
Для начала нам понадобится контент для нашего слайд-шоу. Нам подойдут любые теги <p>, <img>, <div> и т.д:
<div id="MySlideshow"><!-- обертка нашего слайд-шоу -->
<p>Some text... on slide one</p>
<img src="img/image_0.jpg" alt="It's slide number two"/>
<img src="img/image_1.jpg" alt="It's slide number three"/>
<p><label>Title</label>Some text... on slide four</p>
<img src="img/image_2.jpg" alt="It's slide number five"/>
</div>
Теперь подключим JavaScript (jquery и плагин) и файл стилей:
<link href="js/jquery.aslideshow/simple/styles.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js?ver=1.2.6"></script> <script type="text/javascript" src="js/jquery.aslideshow.js"></script>
Инициализация:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#MySlideshow').slideshow();
});
//]]>
</script>
Каков же будет результат вы можете посмотреть на домашней страничке проекта ;)
Конфигурация
В качестве заголовка слайдов берется атрибут “alt” для картинок, либо первый тег “label” для остальных слайдов…
Плагин так же имеет ряд настроек:
$('#CustmSlideshow').slideshow({
width:320, // ширина в пикселях
height:240, // ширина в пикселях
index:0, // начать со слайда номер N
content :{
'nextclick':false, // переключаться на следующий слайд по клику на главное окно
'playclick':false, // включать/выключать проигрывание слайд-шоу по клику на главное окно
'playframe':true, // отображать вначале слайд "Play Now!"
'imgresize':false, // изменять размер картинок под размер слайд-шоу
'imgcenter':true // выравнивать картинки по центру (пока не работает)
},
controls :{ // элементы управления
'hide':true, // всплывающий тулбар
'first':true, // кнопка первый слайд
'prev':true, // кнопка предыдущий слайд (если это первый, идем на последний слайд)
'play':true, // запуск слайд-шоу
'next':true, // кнопка следующий слайд (если это последний, идем на первый слайд)
'last':true, // кнопка последний слайд
'help':true, // кнопка отображения строки помощи
'counter':true // отображение номера текущего слайда
},
slideshow :{
'time':3000, // задержка между сменой слайдов
'title':true, // отображать заголовок или нет
'panel':true, // отображать панель управления или нет
'help':"Hello World!" // текст строки помощи
}
});
Скачать
Скачать данный плагин можно используя либо доступ к SVN’у:
svn checkout http://a-slideshow.googlecode.com/svn/trunk/ a-slideshow-read-only
Либо в архиве:
http://code.google.com/p/a-slideshow/downloads/list
http://plugins.jquery.com/project/a-slideshow
This entry was posted
on Tuesday, December 2nd, 2008 at 07:21 and is filed under JavaScript.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
С почином, как говорится,
интересный плагин
Fantastic plugin, but how do you make it autoplay? (start without a click)
Thanks,
Benji
This is a great plugin, I would also like to know how to make it autoplay.
I solved the autoplay function.
Where it says Play slideshow button, just add the following:
this.find('a.play').ready(function() { _self.play(); });It worked for me. :)
Sorry, forgot to also add that:
Здравствуйте. Интересный плагин. Было бы неплохо если бы Вы сделали возможность смены фото и по щелчку, но совсем без времени, что-то наподобе autoplaying: true. Т.е. пока не щелкаеш – не меняется картинка.
Спасибо.
Извеняюсь, недосмотрел. Все это уже есть…….
@Benjibuls and @Nicole:
Autoplay now aviable in new version – 0.3 (only SVN)
I upload changes to hosting tomorrow…
При написании плагинов для jQuery в коде рекомендуется использовать имя ‘jQuery’ вместо ‘$’:
http://docs.jquery.com/Plugins/Authoring
@Snowcore:
В той же доке есть следующее решение:
(function($) { // plugin code here, use $ as much as you like })(jQuery);Собственно именно оно и используется…
упс… не заметил, сорри :)
Доброго времени суток.
Хотелось бы поблагодарить за замечательный плагин и задать пару вопросов.
$(document).ready(function(){ $('#MySlideshow').slideshow(); });Например при инициализации без настроек слайдшоу нормально отображается во всех браузерах, но стоит мне добавить свои настройки, например
$(document).ready(function(){ $('#slides').slideshow({ title:false, playframe:false, panel:false, time:3000, } ).playSlide(); });, то в ie6 (возможно и в 7, не проверял просто)отображаются обычные ссылки. Можно ли побороть данный эффект достигнув кроссбраузерности?
У Вас возникает JS ошбика – уберите последнюю запятую
$('#slides').slideshow({ title:false, playframe:false, panel:false, time:3000, // вот эту... }).playSlide();Огромное спасибо за подсказку, просто в яваскрипте не силен…)
Антон, судя по коду, картинки у вас подгружаются сразу, а как можно сделать так, чтобы сперва загружалась первая картинка. Пока посетитель любуется ею, подгружалась следующая и т.д.
Есть ли для картинок событие onLoad?
Для этого достаточно будет натравить слайдшоу не на сами картинки, а на ссылки см. пример http://slideshow.hohli.com/docs/demo02.html
Замечательный плагин. Спасибо.
Подскажите как изменить прозрачность тоолбара?
Загляни в CSS файл плагина, и тама уже вноси подобные изменения…
Антон скажи, а как сделать чтобы информация (которая в alt=”" записана) всегда отображалась, а не только когда мышь наводим…
//<![CDATA[ $(document).ready(function(){ $('#CustomSlideshow').slideshow({ width:320, // width in px height:240, // height in px index:0, // start from frame number N time:3000, // time out beetwen slides title:true, // show title panel:true, // show controls panel play:false, // play slideshow loop:true, // looping effect:'scrollLeft', // aviable fade, scrollUp/Down/Left/Right, zoom, zoomFade, growX, growY effecttime:500,// aviable fast,slow,normal and any valid fx speed value filter:true, // remove <br/>, empty <div>, <p> and other stuff nextclick:true, // bind content click next slide playclick:false, // bind content click play/stop playhover:false, // bind content hover play/stop playhoverr:false, // bind content hover stop/play (reverse of playhover) playframe:false, // show frame "Play Now!" fullscreen:false, // in full window size imgresize:false, // resize image to slideshow window imgcenter:true, // set image to center // TODO imgajax:true, // load images from links linkajax:false, // load html from links controls :{ // show/hide controls elements 'hide':false, // show controls bar on mouse hover 'first':true, // goto first frame 'prev':true, // goto previouse frame (if it first go to last) 'play':true, // play slideshow 'next':true, // goto next frame (if it last go to first) 'last':true, // goto last frame 'help':false, // show help message 'counter':true // show slide counter } }); }); //]]>Ой, забыл обновить документацию – появился новый параметр:
ещё почимуто не работает scrollRight точнее работает но также как и scrollLeft ( в ту же сторону)
Антон, спасибо — классный плагин.
В настройки еще можно добавить скорость непосредственно затухания картинок.
Упс, прошу прощенья, оказывается уже есть такая настройка.
А что делает вот этот параметр:
imgajax:true, // load images from links
Если у тебя в списке тегов есть A c HREF указывающим на картинку – то она будет подгружена автоматически как еще один слайд…
Так она и так подружается. Без этого параметра.
А как можно сделать смену после подгрузки. Т.е. чтобы картинка не менялась, пока следующая не загрузится?
ты хочешь чтобы человечег с хорошим интернет каналом вообще фоток не увидел?? то есть увидел но на нереально скорости смены кадров ??)
KruGoZor, каналы у всех разные, вес фоток тоже.
Для реализации надо два флага. Первый — истечение задержки time, второй — загрузка следующей картинки.
Как только оба = true, меняем картинку.
Еще можно предложить параметр для задания задержки перед Первой сменой кадров. То есть получается задержка или ускорение старта.
Здравствуйте. Спасибо большое за вашу статью. очень полезно при изучении jquery. Но у меня появилась с этим проблема, которую не получается решить. Буду очень признательна за помощь.
Итак, у меня есть и отображается окошко для слайд-шоу (div id=’SlideShow’), а также 2е кнопки для промотки послайдово. Авто не требуется. Проблема в событиях этих кнопок. скрипт зависает и отображает белое окошко а в количествах слайдов пишет цифру, превышающую мною подгруженное! :(
$(document).ready(function(){ $('#SlideShow').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false}); $('#but_l1').click(function(){ $('#SlideShow').slideshow({width:230,height:150,imgresize:true,playframe:false}).prevSlide(); }); $('#but_r1').click(function(){ $('#SlideShow').slideshow({width:230,height:150,imgresize:true,playframe:false}).nextSlide(); }); $('#image_alt').text()=$('#SlideShow').slideshow({titleshow:true}); });А если попробывать вот таким способом:
$(document).ready(function(){ var slide = $('#SlideShow').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false}); $('#but_l1').click(function(){ slide.prevSlide(); }); $('#but_r1').click(function(){ slide.nextSlide(); }); });В Вашем примере вы просто несколько раз инициализируете слайдшоу…
Ой, Спасибо большое! Работает! :)
Неск.раз? возможно. но чего я только не пробовала. теперь буду знать. спасибо.
Еще вопрос: что не так в 9-ой строчке скрипта? мне нужно коммент(title,alt)текущего слайда отображать. но блок для его отображения (p id=image_alt) находится после контейнера для слайдшоу. Как правильно это значение присвоить содержимому ,напр.?
*содержимому
теги не отображаются здесь без контейнера для кода? извините..
я имела в виду селектор р.
Вопрос понял, только на данный момент получить тайтл текущего слайда не получится нормальным путем, воспользуйтесь следйющим кодом:
$('#SlideShow').find('.slideshow-label').html();Как я должна использовать этот код? Результата нет ни при загрузке страницы, ни при нажатии кнопки..
$(document).ready(function(){ var slide = $('#SlideShow').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false}); var slide2 = $('#SlideShow2').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false}); $('#SlideShow2').hide(); $('#image_alt').text=$('div').find('.slideshow-label').html(); $('#but_l1').click(function(){ $('#SlideShow2').hide(); $('#SlideShow').show(); slide.prevSlide(); $('#image_alt').text=$('#SlideShow').find('.slideshow-label').html(); }); ...Не получается динамично выводить тайтл. Выводит только 1раз – в самом начале работы с контейнером,т.е. при загрузке страницы и при смене видимого контейнера. при смене же самих сладов внутри одного контейнера выводимый текст не меняется.
// var title =$('div').find('.slideshow-label').html(); // $('#image_alt').text(title); $('#image_alt').text($('#SlideShow').find('.slideshow-label').html());В обоих случаях результаты одинаковые. Может я что-то делаю не так?
Еще раз здравствуйте! :)
Тайтл наконец-то отображается. :) но имеет при этом интересную особенность: происходит отображение тайтла предыдущего слайда!О_о
Для отслеживания тайтла используете функцию change?
нет не использую… у меня есть кнопки для прокрутки назад/вперед, поэтому поиск тайтл находится в обработчике click..
ну а если брать change, то применительно к какому элементу? слайдшоу?-не действует..
var slide = $('#SlideShow').slideshow({width:230,height:150,imgresize:true,hide:false,panel:false,playframe:false}); $('#image_alt').text($('#SlideShow').find('.slideshow-label').html()); slide.change(function() {$('#image_alt').text($('#SlideShow').find('.slideshow-label').html());} //не отображает тайтл ); $('#but_l1').click(function() { $('#SlideShow2').hide(); $('#SlideShow').show(); slide.prevSlide(); //$('#image_alt').text($('#SlideShow').find('.slideshow-label').html()); отображает тайтл но не текущего а предыдущего слайда });hi all, I wanted to report you a small bug on this plug-in.
if you use the external buttons to control the slide with the functions my_slide.next() or my_slide.prev() these work fine with IE OR Chrome, but whit firefox don’t work. for this browser you must use the follow syntax.
$('#my_slide')[0].prev(); $('#my_slide')[0].next();bye
Leo
Пожалуйста, подскажите как корректно выводить тайтл отображаемого слайда слайд-шоу?
Доработал слегка скрипт – скачивайте новую версию и см. http://slideshow.hohli.com/docs/demo09.html
Спасибо огромное!!! :)
Добрый день
Первый показывает кадры с паузой в 5 секунд, а повторно происходит
показываем первый кард, сразу же второй, пауза 5 секунд
$(document).ready(function(){ $('#slideshow').slideshow({ width:465, height:200, time:5000, play:true, playframe:false, effect:'scrollLeft', controls :{ 'hide':true, 'help':false, } }); });Да уж. баг имеет место, вот возможное решение – http://plugins.jquery.com/node/7541 – выйду на работу, обновлю плагин…
у меня очень жесткая проблема , хотел вставить слайд шоу себе на сайт. но столкнулся с проблемой, дело в том что у меня не получается его вставить дажен а пустойй лист. В чем проблема посмотрите пожалуйста, я совсем только начинаю и плохо разбераюсь во всех тонкостях, присылаю вам код укажите ошибки если вас не затруднит, заранее спасибо за понимание
ВОТ СОБСТВЕННО САМ КОД
Если хотите запаблишить код – используйте соответствующие кнопки на QuickBare
все решил пользовать для этих целей jquery innerfade гораздо проще и эффект который и нужен, простая смена изображений
Здравствуйте, Прошу Вас помочь разобраться.
Установил код на сайт. На главной странице и страницах со вторым уровнем вложения отображается все хорошо, а вот с третьего уровня нет. Картинка сначала дублируется вниз, потом встает на место.
Например посмотрите тут: http://www.absolutnoe100fm.ru/project/mechta/
На данной странице у меня совсем все плохо смотрится, точнее картинки не подгружаются по ссылкам, т.к. ссылка на них имеет вид image.jpg?UID=1234567890 – мой скрипт не обрабатывает правильно данные ссылки, в следующей версии я постараюсь это исправить…
Возможно так же есть проблемы совместимости с другими скриптами на странице – попробуйте их отключить…
Столкнулся с проблемой следующего характера:
Внутри слайдера у меня HTML в свободной форме. Сгруппированный диваками. Так вот у меня внутри этих диваков, ссылки не работают. В чем может быть причина?
Необходимо выставить в настройках:
{ playclick:false, nextclick:false }Чтобы не было перехвата событий.
Антон, в том то и дело, что не работало… Пробовал неоднократно…
Пришлось в ссылках onClick=”javascript: window.location = ‘my_url’;” использовать…
И еще, есть ли возможность отключить изменения hash?
А то пришлось руками в коде это отрубать…
Антон, доброго времени суток! Очень понравился ваш плагин, но к сожалению возникли некоторые проблемы. Если вкратце – когда на страничке используются сразу несколько окошек плагина, в которых .htm содержимое – то он работает очень криво, грузит одно окошко, остальные глючат. Хотя если использовать просто .jpg то всё работает очень хорошо, или если поставить на страничку только один плагин с .htm содержимым, то опять же всё работает!
К тому же в IE даже одно окошко с .htm содержимым не отображается совсем.
Пробовал вместо .htm использовать .html, или .php разницы никакой.
Вот то о чём собстна реч.
http://fiestakids.ru/ts.php
Добрый день, Антон!
В Opera 10.Х не листаются слайды из демо-примера…
Какая именно демка не работает?
Проверил первые две на версии 10.01
Здравствуйте Антон!
К сожалению до сих пор никак не могу побороть проблему с отображением html содержимого, пожалуйста отпишитесь есть ли возможность разобраться с этим багом? если вам для этого нужно править скрипт я со своей стороны готов оплатить потраченное на работу пиво =)
Спасибо заранее!
plugin классный. но почему-то в chrome 3.0 даже демо-примеры не работают… просто пустой div…
привет Антон!,
возникла потребность разместить на 1 странице 2 окна сладов с разными стилями css…
Для размещение двух окон сделал так:
<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $('#MySlideshow').slideshow(); }); //]]> </script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $('#MySlideshow2').slideshow2(); }); //]]> </script> <div id="MySlideshow"> ... </div> <div id="MySlideshow2"> .... </div>Но теперь нужно чтобы у MySlideshow был 1 css файл (именно цвет у slideshow-label-place, background-color) а у MySlideshow2 был второй css с другим background-color заголовка… как можно это реализовать?
Тебе нужно сделать следующее в CSS:
#MySlideshow .slideshow-label-place { background-color:#ff0000 !important; } #MySlideshow2 .slideshow-label-place { background-color:#00ff00 !important; }Спасибо!
А ширина длинна title где указывается?
.slideshow-label-place { padding:0; position:absolute; top:85%; left:0px; z-index:90; height:30px; }Доброго времени суток. У меня такой вопрос. Видите ли в чем дело, я ваш слайд шоу использую не для показа картинок, а для вывода массивного текста частями в узком месте. Так вот, к примеру посетитель прочель две трети текста, и хочет сохранить ссылку где он остановился. Естественно что ссылка приведет на первый фрейм. Как сделать чтоб можно было указывать ссылку сразу же на фрейм. И могу ли я работать использовать вложенные ? Или не получится из-за того что из них берутся фреймы. Спасибо
Привет, слайдшоу поддерживает переход по хистори (back & forward) браузера, для этого надо лишь включить соответствующую опцию “history”, пример http://slideshow.hohli.com/docs/demo01.html#slide-3
Спасибо за совет, по моему это был не правильный и очень громоздкий подход к делу. Я его уже решил.
У меня другой вопрос, не знаю в каком топике его задать, поэтому задаю тут. Вопрос по поводу jQuery
Я с jQuery ни разу не работал в жизни почти, до того момента как попробовал по вашему уроку сделать то слайдшой меню контента. Используя документацию на официальном сайте сделал модуль бб-кодов на сайт одной девушке для которой делаю проект…. Чет я разболтался)))
Ну так вот, с помощью jQuery отслеживаю нажатие по определенному элементу и добавляю определенный бб-код.
Проблема в том что он добавляется до тех пор, пока я не впишу ни какого текста в форму textarea как только я там что либо написал или изменил как сразу же все перестает работать. Могли бы вы посмотреть что же это такое, по этому адресу.
http://swain.webuda.com/content.php?id=2&type=zapiski
Там внизу есть форма добавить комментарий. Или могли бы вы хотя бы посоветовать в какую сторону копать то! Большое спасибо за предыдущий ответ. И каким бы ни был ответ на этот вопрос, спасибо и за него.
Hey,
How do I pause the slideshow through javascript?
Очень понравился плагин. Тем не менее есть потребность сделать слайдшоу в двух связанных областях.
существунт, например, три текста и каждый текст имеет от двух до четырех иллюстраций (в принципе не в количестве дело дело в том, что их количество разное).
Что надо получить. показываем текст 1 в области 1, в области 2 показываем слайдшоу из иллюстраций к тексту 1,
показываем текст 2 в области 1, в области 2 показываем слайдшоу из иллюстраций к тексту 2, и так далее. Подскажите, пожалуйста, как это логичнее реализовать с помощью aSlideshow.
Отвечать не нало – все сделал….