ГлавнаяСкрипты java и phpФотогалерея на jQuery

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

Слайдшоу на jQuery

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

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

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

фото рысь фото белый конь фото выдра фото лев фото попугаи фото дельфины фото акула

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

Код для *.html


<link rel="stylesheet" type="text/css" href="css/coin-slider.css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/droid_sans_400-droid_sans_700.font.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" 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

Рейтинг: 4.4/5     Оценили: 19

Похожие публикации

Комментарии к статье 15

Станислав

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

Админ

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

Станислав

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

Анатолий

User: АнатолийAdmin тебе цены нету!
Я так давно искал эту программу и скрипт слайшоу, СПАСИБО ТЕБЕ!!! И спасибо что научил как бесплатно качать с летитбит и пр. РЕСПЕКТ!!!

Екатерина

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

Админ

User: Админ→ Екатерина
Я не могу вам точно сказать для чего нужен каждый отдельный скрипт, но вместе они отвечают за правильную работу Слайдшоу в целом.

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

Саня

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

Михаил

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

Админ

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

Вика

User: ВикаРеспект автору! огромное спасибо!!
вообще без изъянов все установилось.. до сих пор поверить не могу )

Оксана

User: ОксанаСкажите пожалуйста, а почему вы не даёте для скачивания скриптов файлы со своими уже изменениями (это не только этот скрипт), а выкладываете (я так понимаю) в оригинале, где нам ещё предстоит помучиться с ними?
Не принимайте пожалуйста это за упрёк )))

Админ

User: Админ→ Оксана
Да, это так, но это же очевидно!!!
"На вкус и цвет товарищей нет", - и у вас будет намного больше заморочек, если я буду выкладывать файлы со своим оформлением.
Что вам мешает включить FireBag и посмотреть стилевые значения, а после прописать их у себя на сайте?!
Это единственный пока случай именно в слайдшоу на jQuery, где оформление вперёд и назад прописываются в самом скрипте, что и затрудняет для Вас с дизайном.

Оксана

User: Оксана→ Админ
Извините, в какой-то мере согласна))
Как заменить next и hrev на русские слова нашла где сделать, а вот заменить на картинки не пойму как и где, ... знаний и опыта мало )))
Если не трудно, подскажите кусок кода в скрипте, где это можно сделать?
Заранее, благодарю!

Админ

User: модераторЗамена слов:
Открываете файл coin-slider.min.js и с помощью поиска находите:
<a href="#" id="'cs-prev-+el.id+" class="cs-prev">next
и
<a href="#" id="'cs-next-+el.id+" class="cs-next">hrev
меняете слова next и hrev на свои слова.
------
Для оформления этих слов ищите код:
('#cs-prev-'+el.id).css({ 'position':'absolute', ... }) - они следом идут
и этот
('#cs-next-'+el.id).css({ 'position':'absolute', ... })
и добавляете сюда свои стилевые параметры между фигурными скобками {...}

Например, вы захотели добавить фон для этих ссылок и рамку, и тогда нужно прописать:
.css({ 'background-color':'#fff','border':'1px solid red','position':'absolute', ... })

Админ

User: АдминЗамена слов картинками (стрелками):

Первый вариант
----------------------
Вместо слов next и hrev прописываете код для отображения картинки, например:
<img class="strela" src="strelka.jpg" alt="" />
и в стилевом файле прописываете для class="strela" нужное оформление для этих картинок (тень, отступы и т.д.)

Второй вариант
---------------------
Удаляете слова next и hrev из скрипта, и в знакомом уже коде:
('#cs-prev-'+el.id).css({ 'position':'absolute', ... })

дописываете между фигурными скобками
'margin':'0','padding':'0','background-image':'url("images/strelka.jpg")','background-repeat':'no-repeat','background-position':'left center'

Это всё условно, и каждый будет дописывать свои параметры для оформления.