Фото галерея с плавно меняющимися картинками
Вот такой симпатичный эффект плавно меняющихся картинок в фото галерее можно получить, используя jQuery и плагин Cycle.
На самом деле эффектов там несколько. Перейдите по ссылке на сайт авторов и увидите сами. Я расскажу лишь про эффект плавной смены картинок — fade.
Для работы, как вы понимаете, понадобится сам плагин, который можно скачать здесь и библиотека jQuery версии от 1.2.6 и выше.
Из скачанного архива с плагином нам понадобится только скрипт с именем jquery.cycle.min.js. Прописываем пути в <head> </head>. Как это сделать, я уже рассказывал ранее здесь.
Там же прописываем условия работы плагина:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 1000 });
});
</script>
В данном случае помимо самого эффекта добавлен регулятор скорости смены картинок timeout: 1000. Меньше число — быстрее меняются. Напомню, что в скриптах время указано в миллисекундах. Соответственно 1000 мс = 1 сек.
Полный список всевозможных опций здесь. Добавлять их нужно в столбик, отделяя каждую запятой.
Выводится блок с картинками на странице очень просто:
<div class="slideshow">
<img src="photo1.jpg" with="800" height="533" alt="" />
<img src="photo2.jpg" with="800" height="533" alt="" />
<img src="photo3.jpg" with="800" height="533" alt="" />
</div>
Надеюсь, вам понравился эффект.
Enjoy!
Спасибо большое за пример!
Пожалуйста, Сергей!
здравствуйте.
сделал через CSS width 100% и при CTRL + «+» или CTRL + «-» размер width то увеличивается, то уменьшается.
сначала грешил на CSS, перепроверил все по сто раз, а теперь уже не знаю что и думать
Здравствуйте, Артем!
Не совсем вас понял. Что именно вы сделали «через CSS width 100%» ?