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

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

15 1 722

Слайдшоу на 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

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

Похожие новости

Станислав
  • 0
User: СтаниславСпасибо за хороший скрипт!
Только при установки слайдшоу на jQuery у меня каким-то образом исчезли заголовки H1-H3
Не подскажите как исправить, потому как точно из-за скрипта, до этого всё исправно было.
  • 8 августа 2013 14:29
Админ
  • 1
User: Moderator→ Станислав
Здравствуйте, Станислав!
Всё легко и просто исправляется: открываете папку "js", затем файл - "script.js" и удаляете в последней строке нужные вам заголовки.
Либо просто здесь же в этой строке измените значение "hover:true" на "hover:false".
Всё должно нормализоваться!
  • 8 августа 2013 17:33
Станислав
  • 1
User: Стас→ Админ
Всё "ОК" - благодарю)))
Получилось по первому варианту - сделал нужные удаления заголовков.
  • 12 августа 2013 11:36
Анатолий
  • 0
User: АнатолийAdmin тебе цены нету!
Я так давно искал эту программу и скрипт слайшоу, СПАСИБО ТЕБЕ!!! И спасибо что научил как бесплатно качать с летитбит и пр. РЕСПЕКТ!!!
  • 20 ноября 2013 19:08
Екатерина
  • 0
User: ЕкатеринаПрошу помогите!
Я только учусь. объясните, для чего нужен каждый скрипт?
Как заменить слова с заливкой next и hrev на стрелочки, либо на русские слова?
  • 2 декабря 2013 19:48
Админ
  • 0
User: модератор→ Екатерина
Я не могу вам точно сказать для чего нужен каждый отдельный скрипт, но вместе они отвечают за правильную работу Слайдшоу в целом.

Для изменения показа next и hrev:
откройте файл coin-slider.min.js и замените там в коде на нужные слова, а для вывода стрелочек пропишите там же картинки с помощью параметра: background-image
  • 3 декабря 2013 08:16
Саня
  • 0
User: СаняКак говорит мой сын: ...я болдю!
Первый раз в жизни установил скрипт в котором не нужно что-то дописывать, удалять, что-то менять.
Короче, Огромное спасибо. КЛАСС!!!
  • 19 декабря 2013 15:17
Михаил
  • 0
User: МихаилЗдравствуйте!
Подскажите пожалуйста, как изменить время показа слайдов в скрипте слайдшоу?
  • 13 октября 2014 08:31
Админ
  • 0
User: Redaktor→ Михаил
Добрый вечер!
Откройте тот же скрипт: coin-slider.min.js
Там в последней строчке есть параметр: delay:3000
что означает - 3 секунды (в тысячу раз меньше).
Вот и меняйте его под свои нужды.
  • 13 октября 2014 11:05
Вика
  • 0
User: ВикаРеспект автору! огромное спасибо!!
вообще без изъянов все установилось.. до сих пор поверить не могу )
  • 24 ноября 2014 20:29
Оксана
  • 0
User: ОксанчикСкажите пожалуйста, а почему вы не даёте для скачивания скриптов файлы со своими уже изменениями (это не только этот скрипт), а выкладываете (я так понимаю) в оригинале, где нам ещё предстоит помучиться с ними?
Не принимайте пожалуйста это за упрёк )))  blush
  • 19 февраля 2017 15:50
Админ
  • 0
User: редактор→ Оксана
Да, это так, но это же очевидно!!!
"На вкус и цвет товарищей нет", - и у вас будет намного больше заморочек, если я буду выкладывать файлы со своим оформлением.
Что вам мешает включить FireBag и посмотреть стилевые значения, а после прописать их у себя на сайте?!
Это единственный пока случай именно в слайдшоу на jQuery, где оформление вперёд и назад прописываются в самом скрипте, что и затрудняет для Вас с дизайном.
  • 19 февраля 2017 18:26
Оксана
  • 0
User: Оксанчик→ Админ
Извините, в какой-то мере согласна))
Как заменить next и hrev на русские слова нашла где сделать, а вот заменить на картинки не пойму как и где, ... знаний и опыта мало )))
Если не трудно, подскажите кусок кода в скрипте, где это можно сделать?
За ранее, благодарю!
  • 20 февраля 2017 12:17
Админ
  • 1
модераторЗамена слов:
Открываете файл 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', ... })
  • 20 февраля 2017 17:04
Админ
  • 1
Super-AdminЗамена слов картинками (стрелками):

Первый вариант
----------------------
Вместо слов 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'

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