Бесплатное в сети!
» » Красивая фотогалерея на jQuery

Красивая фотогалерея на jQuery

Слайдшоу на jQuery

Рассмотрим пример - красивая фотогалерея, которое было создано с помощью jQuery, CSS и небольшого блока HTML.

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

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


Теперь перейдём непосредственно к самому скрипту. Для установки красивой фотогалереи на свой сайт скачайте архив со скриптом (ссылка внизу), залейте к себе на сервер и распакуйте его там.
Затем вставьте этот код перед закрывающимся тегом </head>

Код для *.html

<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 следущий код:

Код для *.html

<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

Ссылка на файл: slide-show.zip

Комментарии 8
Станислав
15 июля 2018 17:06
Станислав

Спасибо за хороший скрипт!
Только при установки слайдшоу на jQuery у меня каким-то образом исчезли заголовки H1-H3
Не подскажите как исправить, потому как точно из-за скрипта, до этого всё исправно было.

Читать полностью
15 июля 2018 17:20
Admin

Станислав,
Здравствуйте, Станислав!
Всё легко и просто исправляется: открываете папку "js", затем файл - "script.js" и удаляете в последней строке нужные вам заголовки.
Либо просто здесь же в этой строке измените значение "hover:true " на "hover:false ".
Всё должно нормализоваться!

Читать полностью
Станислав
15 июля 2018 18:16
Станислав

Admin,
Всё "ОК" - благодарю)))
Получилось по первому варианту - сделал нужные удаления заголовков.

Читать полностью
Екатерина
15 июля 2018 22:03
Екатерина

Прошу помогите!
Я только учусь. объясните, для чего нужен каждый скрипт?
Как заменить слова с заливкой next и hrev на стрелочки, либо на русские слова?

Читать полностью
15 июля 2018 23:34
Admin

Екатерина,
Я не могу вам точно сказать для чего нужен каждый отдельный скрипт, но вместе они отвечают за правильную работу Слайдшоу в целом.
----
Для изменения показа next и hrev:
откройте файл coin-slider.min.js и замените там в коде на нужные слова, а для вывода стрелочек пропишите там же картинки с помощью параметра: background-image

Читать полностью
Саня
16 июля 2018 10:42
Саня

Как говорит мой сын: ...я болдю!
Первый раз в жизни установил скрипт в котором не нужно что-то дописывать, удалять, что-то менять.
Короче, Огромное спасибо. КЛАСС!!!  sunglasses

Читать полностью
Михаил
16 июля 2018 15:43
Михаил

Здравствуйте!
Подскажите пожалуйста, как изменить время показа слайдов в скрипте слайдшоу?

Читать полностью
16 июля 2018 16:19
Admin

Михаил,
Добрый день!
Откройте тот же скрипт: coin-slider.min.js
Там в последней строчке есть параметр: delay:3000
что означает - 3 секунды ( в тысячу раз меньше ).
Вот и меняйте его под свои нужды.

Читать полностью
Добавить комментарий