Как сделать галерею из картинок

Добавлено: 19.01.2018, 04:33 / Просмотров: 63372

Галерея изображений с плавно меняющимися картинками

Автор: Андрей Краснокутский

Дата: 2011-10-09

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

Если изображения не видно, обновите страницу

Для создания такого эффекта, нам понадобится библиотека jQuery и плагин jquery.cross-slide.js. На самом деле плагин jquery.cross-slide.js может обеспечивать несколько различных эффектов, но о них мы поговорим в последующих уроках.

Скачайте и распакуйте архив с библиотекой и плагином jquery.cross-slide.js. Положите файлы: библиотеки и плагина в корневую папку или в любую другую, но не забудьте правильно прописать путь до этих файлов. Давайте будем считать, что эти файлы мы положили в корень сайта.

Между тегами <head> и </head> прописываем код код Листинга 1:

Листинг 1.

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.cross-slide.js"></script>
<script type="text/javascript">
$(function() {
$('#test1').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: 'images/01.jpg' },
{ src: 'images/02.jpg' },
{ src: 'images/03.jpg' },
{ src: 'images/04.jpg' }
]);

});

</script>

<style type="text/css">
#test1 {
margin: 1em auto;
border: 2px solid #6699CC;
width: 380px;
height: 360px;
}
</style>

Плагин не очень привередлив и будет работать даже если Вы пропишите этот код и в теле web-страницы.

Конечно же Вам понадобятся и сами изображения, которые будут сменять друг друга. В данном случае я как сделать галерею из картинок использую 4 картинки: 01.jpg, 02.jpg, 03.jpg, 04.jpg, которые лежат в папке images. Размеры моих картинок 380х360 пикселей. Количество картинок конечно же можно увеличить.

Время смены картинок задается в секундах, параметром:sleep: 2В данном случае установлено время смены картинок - 2 секунды.

Ниже, в Листинге 1, прописан стиль оформления, в данном случае это сплошная рамка толщиной в 2 пикселя. Естественно Вы можете этот стиль изменить под свои требования.

В том месте web-страницы где Вы хотите вывести галерею сменяющихся картинкок, прописываем код Листинга 2:

Листинг 2.

<div align="center" id="test1">Если изображения не видно, обновите страницу</div >

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

 

Читайте так же другие наши материалы.

Что такое jQuery, как работает и что может jQuery.

Как сделать плавное увеличение картинки при клике.

Как практически зарегистрировать Доменное Имя.

Как заработать на Бирже Статей.

Невидимые блоки на сайте.

Как самому сделать сайт. Обучающий видео курс.

 

Просмотров: 51867


Андрей, здравствуйте. Спасибо вам за такие полезные уроки. Все, что вы мне присылаете внимательно читаю и еще ни одна рассылка не была бесполезна.А насчет этого урока... Вы как раз подгадали. Задумал блог на одну тему и как раз такая галерея будет кстати, только у меня просьба... можно я использую эти ваши картинки? Заранее благодарен!

Очень полезный и нужный урок! Спасибо, Андрей!

Спасибо, Андрей! Урок как нельзя кстати. Совсем недавно задумался о такой возможно на сайте.

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

отличнызуй урок.Вот только бы скачать их сразу все.а то бывает неуспеваю

отличнызуй урок.Вот только бы скачать их сразу все.а то бывает неуспеваю

Спасибо огромное, отличный урок

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

Добрый день! Галерея с плавно меняющимися картинками нормально заработала на сайте, код которого был написан "напрямую" в Блокноте. Почему то она "отказывается" работать на сайте, сделанном на CMS GetSimple. Голубая рамочка присутствует там, где это необходимо, но картинки не демонстрируются. Какая же может быть причина? Путь к картинкам я указываю правильно.

Добрый день! Галерея с плавно меняющимися картинками нормально заработала на сайте, код которого был написан "напрямую" в Блокноте. Почему то она "отказывается" работать на сайте, сделанном на CMS GetSimple. Голубая рамочка присутствует там, где это необходимо, но картинки не демонстрируются. Какая же может быть причина? Путь к картинкам я указываю правильно. e-mail:

Присоединяюсь к словам благодарности, действительно очень полезная информация! Отдельное спасибо автору за то, что он делится с новичками знаниями бескорыстно! В ответ на комметарий Ольги Алексеевны Жихаревой: посмотрите на мой сайт....... (я не знаю, можно ли в комментах давать свои ссылки?). Вы легко сможете создать свой в бесплатной школе (я пишу о ней на странице "Обо мне"). Успехов!

Здравствуйте Андрей. Спасибо за урок.Но есть маленькая проблема, скрипт работает в опере но отказываеться работать в эксплорере.Верю что есть решение.

Здравствуйте Андрей. Спасибо за урок.Но есть маленькая проблема, скрипт работает в опере но отказываеться работать в эксплорере.Верю что есть решение. e-mail:

Может просто сделать, Как на этом сайте http://www.1

Пытаюсь применить скрипт в создании школьного сайта при работе с конструктором на народе (школьный фотоальбом) каритнки не появляются при обновлении страницы. Почему? Адреса фото прописываю верно.olka

проблема такая же... картинки не отображаются, только голубая рамочка :(

TV, могу сказать однозначно: Вы где то допускаете ошибку

здраствуйте. Вы не подскажите, по какой причине эти скрипты не работают в эксплоере? Может есть решение.

Оля этот скрипт прекрасно работает во всех браузерах, в том числе и в Internet Explorer. Вы где то допускаете ошибку... :(

На Denwere все скрипт работает, на удаленном хостинге почему то не хочет. (движек wordpress, пути все прописаны верно) в чем может быть причина?

Спасибо, все работает отлично, вопрос только один, почему когда я применяю этот урок "Галерея изображений с плавно меняющимися картинками" и ваш урок "Как сделать плавное увеличение картинки при клике" на одной странице сайта плавное увеличение картинки не получается, работает нормально только "Плавно меняющиеся картинки", не получается, чтоб работало все?

Спасибо, вы решили мою проблему, нд которой я билась весь месяц

А можно как то на каждую картинку ссылку проставить? Что бы к примеру при нажатии переходила по ссылке

Спасибо большое!!! Всё прекрасно получилось!!!

неделю искала эту информацию....огромное спасибо. Супер

Сначала тоже только рамка была, а потом, в поле с названием первого изображения, обнаружил одну лишнюю галочку, исправил и все заработало. ОГРОМНОЕ СПАСИБО!!! :)

Здравствуйте!Не могу понять куда вставлять эти скрипты.Помогите,а?Надо чтобы шапка сайта менялась

На сервисах и конструктарах сайтов типа Юкоз и аналогичных подобные скрипты довольно часто не работают. Администраторы таких сервисов умышленно урезают многие функции. В данном случае Вам лучше обратиться к администратору сервиса Юкоз.

Спасибо за ответ.

Здравствуйте. Очень полезный сайт. Но я тоже прошу помощи. Подскажите, по какой причине эти скрипты не работают в эксплорере? e-mail:

Здравствуйте, очень красиво все получилось, за Вам огромное спасибо. Только вот если бы не одно НО, на главной странице работает а при переходе на любую другую, не хочет.((( Не подскажите как исправить? Сайт на юкоз. Код уже вставляла, куда только можно))). Работает только на главной. Заранее спасибо.

О! Отлично! Спасибо! В избранное! Попробую сегодня же!

Прекрасный скрипт! Спасибо! Сайт на Юкозе, скрипт прекрасно работает в Хроме, Опере, Мазиле но ни как не хочет в IE8, IE9 работать. Пожалуйста, подскажете что можно подправить, почему IE не хочет отображать?

Огромнейшее спасибо за урок! Все получилось :) Единственное "но" - у меня (как и, смотрю, у многих других), скрипт не "схватывается" браузером Internet Explorer. А в Мозилле, Гугл Хром и Опере все отлично.

Александре. Честно говоря я не заметил (специально проверял), чтобы данный скрипт не работал в других браузерах. При тестировании мною проблем не обнаружено. Замечательно работае в том числе и в Internet Explorer.

Может кто дать такойже скрипт только со стрелками по бокам, на следующию картинку и на придыдущею

Спасибо, именно то, что искал.

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

А как ссылку к фото добавить?

Здравствуйте! у меня почему-то в слайдшоу сменяются только 2 картинки. и то-один раз,без повторов. Т.е. захаодишь на страничку-появляется картинка1, сменяетс на картинку 2 и все.тишина.

почему-то не видно картинок?

У меня тоже картинки не появляются что-то.Что я только не делал.

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

Андрей,будьте добры подскажите что ещё может быть за причина..Картинки не листаются,рамка есть и все...Спасибо

У меня только синяя рамка и всё.Подскажите в чем причина -очень нужно

Ольга как видете,я тоже спросила-а тема видать сдохла давным давно уже....

Я пользуюсь этим скриптом, очень нравится) Если фото не "воспроизводятся", посмотрите как в коде записан путь к фото, будьте внимательны к расширениям. "jpg" и "JPG" - разные. Я хотел бы узнать, можно ли "воспроизводить" картинки не по порядку, а рандомно. Заранее спасибо!

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

Все работает нормально и в UCOZе то же. А можно ли как нибудь к этим картинкам прикрутить ссылки?

Спасибо! Очень полезный урок.

А можно ли к этим картинкам делать гиперссылки? Есть такой плагин?

Cлайдер работает нормально

Спасибо!

Благодарю за великолепное и доступное объяснение! Все работает. Все красиво и корректно!

Спасибо за лаконичное и доступное объяснение - очень помог Ваш урок в оптимизации странички!

Здавствуйте! Почему при добавлении более картинок ничего не работает?

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

Спасибо!


Источник: http://www.luksweb.ru/view_post.php?id=284


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Картины из осенних листьев. Аппликации из осенних Поэтапно рисуем ящерицу


Как сделать галерею из картинок Как сделать галерею из картинок Как сделать галерею из картинок Как сделать галерею из картинок Как сделать галерею из картинок Как сделать галерею из картинок Как сделать галерею из картинок

ШОКИРУЮЩИЕ НОВОСТИ


Back to Top