Содержание страницы
домикГлавная / Скрипты java и php / Красивая фотогалерея на jQuery
Слайдшоу на jQueryРассмотрим пример красивая фотогалерея, которое было создано с помощью jQuery, CSS и небольшого блока HTML.

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

Пример работы фотогалереи на jQuery

пример слайд шоу на jQuery
Теперь перейдём непосредственно к самому скрипту. Для установки красивой фотогалереи на свой сайт скачайте архив со скриптом (ссылка внизу), залейте к себе на сервер и распакуйте его там.
Затем вставьте этот код перед закрывающимся тегом </head>
htmlCOPY
<link rel="stylesheet" type="text/css" href="css/coin-slider.css" /> <script type="text/jаvascript" src="js/cufon-yui.js"></script> <script type="text/jаvascript" src="js/droid_sans_400-droid_sans_700.font.js"></script> <script type="text/jаvascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/jаvascript" src="js/script.js"></script> <script type="text/jаvascript" src="js/coin-slider.min.js"></script>
Далее пропишите у себя на странице, где будет установлен ваша фотогалерея на jQuery следущий код:
htmlCOPY
<div id="coin-slider"> <a href="#"><img src="images/slide1.jpg" width="540" height="250" alt="" /></a> <a href="#"><img src="images/slide2.jpg" width="540" height="250" alt="" /></a> <a href="#"><img src="images/slide3.jpg" width="540" height="250" alt="" /></a> <a href="#"><img src="images/slide4.jpg" width="540" height="250" alt="" /></a> <a href="#"><img src="images/slide5.jpg" width="540" height="250" alt="" /></a> <a href="#"><img src="images/slide6.jpg" width="540" height="250" alt="" /></a> <a href="#"><img src="images/slide7.jpg" width="540" height="250" alt="" /></a> </div>
В этом коде использованы мои картинки для примера, вы соответственно замените их на свои. Чтобы изменить размеры фотогалереи поменяйте значения ширины и высоты в HTML коде и в script.js (в самом начале скрипта).

Для визуального примера в архив вложен файл index.html - откройте его в браузере для просмотра, а в текстовом редакторе для редактирования.

У кого будут какие вопросы - задавайте смело и не стесняйтесь, вместе разберём вашу проблему, а так же кому понравился скрипт - нажимаем Лайки и оставляйте свои комментарии.

стрелка вниз Скачать красивую фотогалерею на jQuery

Ссылка на файл: скачать архив
Дата публикации: 03.07.2018
Комментарии
Станислав
15 июля 2018 17:06
Станислав
Спасибо за хороший скрипт!
Только при установки слайдшоу на jQuery у меня каким-то образом исчезли заголовки H1-H3
Не подскажите как исправить, потому как точно из-за скрипта, до этого всё исправно было.
Admin
15 июля 2018 17:20
Admin
Здравствуйте, Станислав!
Всё легко и просто исправляется: открываете папку js, затем файл - script.js и удаляете в последней строке нужные вам заголовки.
Либо просто здесь же в этой строке измените значение hover:true на hover:false.
Всё должно нормализоваться!
Станислав
15 июля 2018 18:16
Станислав
Всё "ОК" - благодарю)))
Получилось по первому варианту - сделал нужные удаления заголовков.
Екатерина
15 июля 2018 22:03
Екатерина
Прошу помогите!
Я только учусь. объясните, для чего нужен каждый скрипт?
Как заменить слова с заливкой next и hrev на стрелочки, либо на русские слова?
Admin
15 июля 2018 23:34
Admin
Я не могу вам точно сказать для чего нужен каждый отдельный скрипт, но вместе они отвечают за правильную работу Слайдшоу в целом.
----
Для изменения показа next и hrev:
откройте файл coin-slider.min.js и замените там в коде на нужные слова, а для вывода стрелочек пропишите там же картинки с помощью параметра: background-image
Саня
16 июля 2018 10:42
Саня
Как говорит мой сын: ...я болдю!
Первый раз в жизни установил скрипт в котором не нужно что-то дописывать, удалять, что-то менять.
Короче, Огромное спасибо. КЛАСС!!!
Михаил
16 июля 2018 15:43
Михаил
Здравствуйте!
Подскажите пожалуйста, как изменить время показа слайдов в скрипте слайдшоу?
Admin
16 июля 2018 16:19
Admin
Добрый день!
Откройте тот же скрипт: coin-slider.min.js
Там в последней строчке есть параметр: delay:3000
что означает - 3 секунды ( в тысячу раз меньше ).
Вот и меняйте его под свои нужды.
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!