Малое, да удалое слайдшоу
Привет, читатель! Давненько я не писал — банально не о чем.
Сегодня я заприметил, мой любимый javascript виртуоз Михаэль, шеф-повар кухни минималистских скриптов, опубликовал свое новое творение.
Я думаю вы уже знаете кто это такой хотя бы по этой маленькой заметке.
Так вот, на этот раз объектом для его работы был скрипт полноценного слайд-шоу. Его слайд-шоу отличается от многих других тем, что оно занимает 5 килобайт без использования сторонних библиотек, при отличной опциональности и функционале.
Отличное решение для тех кто в своих проектах не использует javascript библиотеки.
Начнем. Для начала создадим на html список из нужных нам изображений и описаний.
<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg
<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="thumbnails/image-one.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.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="thumbnails/image-two.jpg" alt="Image Two" />
</li>
</ul>
Теперь применим javascript.
<script type="text/javascript" src="compressed.js"></script>
<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>
Как Вам количество настроек? По-моему совсем неплохо.
То что из этого получилось, мы можем посмотреть, скачать и применить воспользовавшись ссылками указанными ниже ;-)
До новых встреч!
Отличная новость. Обязательно воспользуюсь!!!
В FF и хроме безбожно глючит
Кроме того сначала выдается список без стилей и скриптов.
Добавить бы прелоадер к картинкам и вышла бы конфетка. Мне понравилось.
У меня в хроме отлично работает. Возможно проблема у вас.
А в FF 3.0.1 глючит — то появляется горизонтальный скроллбар, то картинка не до конца появляется (становится видна предыдущая).
Правда потом, через несколько тычков положение улучшается.
в приведенном примере не закрыт первый span :)
а само слайдшоу, и правда, впечатляет, по крайней мере, на первый взгляд (без оглядки на разеры изображений, к примеру)
Спасибо за скрипт, как раз искал подобное!
Однако, нашел так же небольшую проблему с ним..
Когда есть загружается меньшее по высоте изображение после большего, то под меньшим видно большее… вот скрин.
Причем скрипт прекрасно отличает вертикальные и горизонтальные картинки, и соответсвенно «чистит» задний фон…
Моих знаний JS увы недостаточно чтобы убрать данную проблему(( Возможно кто-нибудь подскажет с какими параметрами надо играться?
Спасибо!
Я бы посоветовал отправлять баги напрямую автору, причем он активно призывает это делать в своих постах.
Так что не стесняйтесь и смело отправляйте. Ведь он быстрее всех может их исправить ;-)
Написал одновременно и ему, но поста сегодня уже нету(((( То-ли удален, то ли на модерации из-за ссылки на скрин.. Подожду до вечера…
Так он же писал, что баги все слать на email.
Наверно он прочитал ваш комментарий и удалил.
Скрипт работает с ошибками в FF 3.0.5
То картинка за рамки выскакивает, то просто зависает(глючит)
я у себя на блоге собираю подборку эффектных галерей для сайтов если интересно, то ссылка вот:
А как сделать только слайдер? Карусель, кажется, называется этот эффект.
да,подглючивает немного в лисичке,но помойму это достаточно легко исправить
глючит по полной
Странно, пробовал – вроде не глючило.
>В FF и хроме безбожно глючит
>
>Кроме того сначала выдается список без стилей и скриптов.
у меня получилось подобное в Opera, у меня картинки по умолчанию показываются только кешированые. И я счелкнул чтоб их отобразить.
Получилось тоже самое что и на скриншоте.
Если нажать потом F5 то всё хорошо.
Глучит страшно
Прочитал про глюки в Лисе… Скажите, что я делаю не так? У меня все отлично работает…
Весьма интересный способ.Но глючит по-страшному!Жаль.
Хорошее слайдшоу. Тоже можно использовать как вариант когда много иллюстрациЙ к статье и все хочется показать. Попробую, надеюсь не будет глючить.
Идея отличная. Только де то ошибка наверно, у меня картинки влезают в рамку наполовину и выходят наполовину из рамки справа
Идея отличная, и мне понравилась…И все работает))))
Классная идея
Симпатично выглядит, но CSS действительно портит вид вначале
Отличное решение для тех кто в своих проектах не использует javascript библиотеки.
у кого так глючит ? у меня все нормально работает на FF3.0.5
Очень симпатичный эффект, но подходит не для всех блогов
Отличное решение для тех кто в своих проектах не использует javascript библиотеки.
Акто может сделать так что бы тумбы прокручивались сверху вниз и были справа
Хочу добавить раздел на сайт о себе. Как раз такой скрипт для слайд шоу подойдет для мини фотоальбома.
А как бы туда ссылки прикрутить?
Как по мне – такие скрипты для многих еще роскошь, ибо как нужен хороший интернет
Всё отлично работает! Красиво…
Я по html вобще ничего не шарю… а так хочется такое зделать…
Красота бери и пользуй а там поймеш
а может кто-нить скинуть код для вертикального сролла?
спасибо..
Жалко, что так бажит… =(
А так неплохо!
Может кто подскажет как ссылку на изображение поставить? плиииззззз…
Впервые вижу такое чудо в 5ти килобайтах, кстати я видал такой слайд-шоу вроде на 10steps.sg внизу сайта, но оно вроде немножко модернизированное, советую посмотреть
Отлично работает в 4-х основных браузерах IE, FF, Opera, Google Chrome. Только нужно исправить ошибку, пропущен закрывающий тег . Обожаю минимализм в кодировании:)
Lots of specialists say that help people to live their own way, just because they can feel free to buy necessary goods. Furthermore, a lot of banks present short term loan for different classes of people.
Wow! Genuinely remarkable publish identified it on Yahoo . This aricle is extremely helpful. You seem to be a very skilled blogger I am in fact new to running a blog
I required for this web site post admin seriously thanks i will seem your future sharings i bookmarked your weblog
I required for this webpage article admin really thanks i’ll seem your following sharings i bookmarked your webpage
oh my god amazing publish admin will check out your weblog usually
hey admin thanks for great and easy understandable publish i beloved your blog site web site really significantly bookmarked also
I was curious about your next publish admin really essential this weblog super astounding webpage
i bookmarked you in my browser admin thank you so much i will be trying to find your future posts
I was in search of this blog site last three times good blog proprietor wonderful posts all the things is terrific