Симпатичная галерея для сайта за 20 минут на javascript

Симпатичная галерея для сайта за 20 минут

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

Для показа мы воспользуемся бесплатным шаблоном, в котором создадим еще одну страницу под нашу галерею. Сразу стоит отметить, что задача, которую мы решим в уроке, на самом деле может быть выполнена средствами PHP гораздо менее рутинно… но это уже тема отдельного урока.

Детали учебника

Тема: HTML, CSS

Сложность: Легкая

Урок: Видео (.mp4)

Время: 00:26:38

Размер архива: 79 Mb

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

скачать исходникискачать урок

Все картинки галереи я поместил в каталог /gallery_img/. Картинки разделены по двум папкам в этом каталоге — это папки /big/ и /small/. Полагаю, Вы уже догадались, что в этих папках хранятся картинки оригинальных размеров и миниатюры. При этом все миниатюры имеют одинаковые размеры — 150 пикселей ширины и 100 пикселей высоты. Одинаковые размеры использованы для того, чтобы миниатюры ровно и красиво располагались на странице. Таким образом, миниатюра и картинка оригинальных размеров составляют комплект одного изображения — миниатюра выводится на страницу, а по клику по ней показывается большая картинка.

Создадим на странице блок с классом gallery — в этом блоке будут располагаться миниатюры:

<div class="gallery">
	<!-- Здесь миниатюры -->
</div>

Теперь добавим картинок в этот блок. Все картинки я выводить здесь не буду, покажу лишь парочку — оставшиеся выводятся аналогично:

<div class="gallery">
	<a rel="gallery" class="photo" href="gallery_img/big/01.jpg" title="Картинка 1"><img src="gallery_img/small/01.jpg" width="150" height="100" alt="" /></a>
	<a rel="gallery" class="photo" href="gallery_img/big/02.jpg" title="Картинка 2"><img src="gallery_img/small/02.jpg" width="150" height="100" alt="" /></a>
</div>

Как мы видим, картинки помещены в ссылку, которая указывает на большую картинку. Также каждая ссылка имеет класс photo и атрибут rel со значением gallery (далее Вы поймете, для чего нужен этот атрибут). Таким же образом добавляем оставшиеся картинки, изменяя лишь пути к миниатюрам и большим фото. В итоге мы получили некое подобие галереи… пока, правда, не очень симпатичной:

Давайте добавим для галереи несколько стилевых правил, чтобы «оживить» ее и сделать более привлекательной. Откроем файл стилей и добавим 2 правила (я их прокомментировал):

/* Gallery */
.gallery img{
	margin:5px; /* внешние отступы картинок */
	border:3px solid #fff; /* рамка картинок */
}
a.photo:hover img{
	border:3px solid #034F80; /* изменение цвета рамки при наведении на картинку */
}

Вот теперь наша галерея выглядит «живой» и привлекательной:

Осталось только добиться того, чтобы показ большой картинки производился в модальном окне. Для этого воспользуемся любым понравившимся Вам скриптом «а-ля Lightbox». Мне в этом плане симпатичен Fancybox. Описание и документацию к нему Вы сможете найти на офсайте — http://fancybox.net.

Скачиваем архив, распаковываем и подключаем необходимые скрипты и стили к нашей странице. Для нашего сайта я создам отдельный каталог под скрипты — /scripts/. Туда скопируем файл с библиотекой jQuery (ее можно взять из архива Fancybox или на офсайте). Также в каталог /scripts/ поместим полностью папку fancybox со всем содержимым (скрипты, стили, картинки). Подключаем все это добро между тегами head:

<script type="text/javascript" src="./scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

Осталось лишь написать небольшой код jQuery, чтобы наша галерея полноценно заработала. Необходимо отобрать ссылки, для которых будет открываться модальное окно, как Вы помните, — это ссылки с классом photo. Ну и для отобранных ссылок вызывается метод fancybox()… вот и все — ничего сложного:

$(document).ready(function(){
	$("a.photo").fancybox();
});

Теперь большие картинки открываются в модальном окне — симпатично, не правда ли? :) Кстати, открыв картинку, мы можем, не закрывая ее, перейти к следующему или предыдущему изображению. Эту возможность как раз и обеспечивает атрибут rel, который мы присвоили ссылкам галереи. Одинаковое значение (оно может быть любым) атрибута связывает ссылки в одну группу.

Также Вы можете поиграться с настройками галереи, воспользовавшись документацией на сайте Fancybox. У меня в итоге были установлены следующие настройки:

$(document).ready(function(){
	$("a.photo").fancybox({
		transitionIn: 'elastic',
		transitionOut: 'elastic',
		speedIn: 500,
		speedOut: 500,
		hideOnOverlayClick: false,
		titlePosition: 'over'
	});
});

На этом наша галерея на javascript закончена. Надеюсь, что этот небольшой урок Вам понравился и будет полезен. Успехов Вам!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (61)

  1. Evgeniy

    Доброго времени суток!! Очень полезная статья! Правда у меня возникла проблема, если картинка вертикальная, то по высоте она 100pix, а вот по ширине меньше и в результате растягивается до 150, в общем получается сплющенная. Если ставлю значение auto, тогда красивый ряд смещается и получается каша. Как — то это исправить? Чтобы появились хотя бы черные края, но картинки сохраняла свои пропорции?
    Заранее Спасибо!

    • Андрей Кудлай

      Здравствуйте.
      Только обработкой картинок — ручной либо автоматической. В любом графическом пакете вырезаете из картинки нужную область с размерами 150х100. При автоматической скрипт будет делать это за Вас.

  2. Проекты домов из бруса

    Очень полезная информация

  3. Татьяна

    Мне очень понравился урок, но скрипты не сработали, моя галерея, не открывается в новом окне, и все что идет дальше тоже не работает,хотя все делала пошагово.ОЧЕНЬ расстроилась:(

  4. Татьяна

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

    • Андрей Кудлай

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

  5. Татьяна

    Спасибо,сама разобралась с путями.

  6. Наталья

    Добрый день.Большое спасибо за урок, но у меня возникли проблемы. Когда мы делаем нашу галерею «живой и привлекательной» у меня не получаются отступы между фотографиями и нет рамки. Подскажите что я прозевала? Заранее спасибо.

    • Андрей Кудлай

      Здравствуйте, Наталья.
      Дайте ссылку на страницу, только тогда можно будет сказать где ошибка.

  7. Наталья

    Я еще не регастрировала сайт, только верстаю,может я могу Вам сбросить как то файл.Срасибо

    • Андрей Кудлай

      Наталья, на днях должен возобновить работу наш форум и можно будет создать тему там. Также, как вариант, можете создать билет в нашей службе поддержки и прикрепить архив со страницей и прочими материалами. Еще один вариант — выложить страницу на какой-нибудь бесплатный сайт, например, — на Народ.

  8. Наталья

    Хотела написать «Спасибо»

  9. Наталья

    Большое спасибо за понимание к новичкам и к их ошибкам. Итог — хорошая галерея. Скажите пожалуйста возможно ли поменять размер шрифта в комментариях к фотографиям.

    • Андрей Кудлай

      Пожалуйста.
      Конечно можно. Это, опять таки делается через CSS, используя свойство font-size. Например, комментарии находятся в блоке с классом comments. В таком случае размер устанавливается так:
      .comments{font-size: 15px;}

  10. Наталья

    А разве мы создавали этот класс в html чтоб присвоить ему свойство в css. Или его надо сейчас создать и где? :)

    • Андрей Кудлай

      Так мы там и комментариев не создавали, вроде как :)
      Вы же где-то комментарии должны выводить? Логичнее это делать в отдельном блоке DIV, для которого и устанавливается нужный класс.

  11. Елена

    Андрей, огромное спасибо за урок! Впервые создавала галерею, и все получилось! Благодаря Вам)Ваш сайт — мой самый лучший помощник!

  12. Диана

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

    • Андрей Кудлай

      Диана, скорее всего, проблема в корректности пути к этим картинкам… также возможен вариант, что эти картинки попросту недогрузились. Дайте ссылку на галерею и тогда можно будет сказать конкретнее в чем проблема.

  13. Ольга

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

    • Андрей Кудлай

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

  14. Ольга

    вот страничка smallgold.ru/GALLERY.html, посмотрите пожалуйста, я уже 2 дня сижу ))))

    • Андрей Кудлай

      Ольга, я же просил создавать тему на форуме и решать проблему там… в комментариях это делать крайне неудобно… первый раз отвечу здесь, в виде исключения, а дальнейшее обсуждение давайте все же продолжим на форуме. По проблеме:
      1) внимательно посмотрите, как вы пытаетесь подключить библиотеку jQuery, вы не закрыли двойную кавычку… это замечательно видно если посмотреть исходный код страницы в Firefox, который подсвечивает ошибку красным цветом
      2) даже если бы кавычка и была закрыта, то все равно по адресу smallgold.ru/scripts/jquery-1.4.3.min.js нет библиотеки jQuery

  15. Ольга

    хорошо, извините,
    просто вы написали «…или дайте ссылку на страницу и постараемся разобраться что к чему.»
    поэтому и написала так )

    • Андрей Кудлай

      Точно, только это я написал в продолжение «Создайте тему на нашем форуме, выложите там в архиве папку с проектом или…» :)
      Я имел в виду что можно в теме на форуме выложить архив или там же дать ссылку на страницу. В общем, извиняться нечего, ничего страшного на самом деле нет в том, что вы выложили ссылку здесь… просто на форуме решать подобные вопросы гораздо удобнее — там и код можно выложить, и архив приложить, и скриншот дать… в общем, удобнее ;)

  16. Тимофей

    Здравствуйте. Очень понравился ваш урок, но появился один вопрос. Как прописывать пути к картинкам если я буду использывать CMS Joomla? Так — <img src="baseurl ?>/templates/template ?>/images/01.jpg»/> ?

    • Андрей Кудлай

      Здравствуйте, Тимофей.
      Не совсем. К сожалению, комментарии не предназначены для полноценной публикации кода, поэтому можете задать свой вопрос на форуме, где постараемся помочь.

  17. Сергей

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

  18. Lev

    Андрей, здравствуйте!
    Спасибо Вам за еще один замечательный урок! И хотя время с его публикации уже прошло не малое, он продолжает пользоваться популярностью :)

  19. Татьяна

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

    • Андрей Кудлай

      Здравствуйте, Татьяна.
      В исходниках к уроку они находятся в папке scripts\fancybox. Картинка называется fancybox.png и в одной картинке находится сразу и крестик, и навигационные кнопки. Для галереи берется конкретная часть составной картинки, конкретный ее элемент. Если хотите изменить картинки стрелок, тогда есть 2 варианта:
      1) аккуратно редактируете в графическом редакторе составную картинку, заменяя стрелки на собственные;
      2) открываете файл стилей галереи (jquery.fancybox-1.3.4) и находите правила:
      #fancybox-left-ico {
      background-image: url('fancybox.png');
      background-position: -40px -30px;
      }

      #fancybox-right-ico {
      background-image: url('fancybox.png');
      background-position: -40px -60px;
      }

      Свойства background-position удаляете, а картинки в background-image меняете на свои.
      Если возникнут трудности, тогда можете создать тему на нашем форуме, и я там обязательно помогу, выложив пример кода.

  20. Татьяна

    Спасибо за пояснения и оперативность, а если мои картинки окажутся больше, то размер указать в bacground-pjsinion? хотя позишен это вроде позиция, местополажение тоесть. или резмер не имеет значения?

    • Андрей Кудлай

      Размеры указываются в том же файле стилей для элементов #fancybox-left-ico, #fancybox-right-ico. Там указаны ширина и высота по 30 пикселей. Соответственно, там же и ставим свои, если нужно. Свойство background-position отвечает за позиционирование, т.е. оно нужно в том случае, если работа идет с составной картинкой и нужно взять лишь часть составной картинки.

  21. Ирина

    Спасибо большое!!!

  22. Ольга

    добрый день, Андрей, отличная галерея,спасибо
    все перепроверила, подскажите, пожалуйста, почему у меня фото открываются в новом окне? :(
    вот например на этой страничке «http://smallgold.ru/baget.html»

    • Андрей Кудлай

      Добрый день, Ольга.
      Проблема в подключении библиотеки jQuery и скриптов и стилей Fancybox. Они не подключились. К примеру, для подключения библиотеки jQuery указан в исходном коде такой путь:
      src="./scripts/jquery-1.4.3.min.js"
      Это значит, что библиотека jQuery должна находиться в папке scripts, а эта папка должна быть расположена там же, где и файл baget.html… однако папки scripts там нет. Поэтому нужно внимательно проверить корректность подключения скриптов и стилей.

  23. Анатолий

    Спасибо большое, все работает! Очень простое и доходчивое объяснение.

  24. Elena

    Андрей, спасибо большое за Ваши уроки!
    Сюда «забрела» совершенно случайно и Очень вовремя — пишу работу — сайт изостудии — с дизайном всё в норме, а вот с кодом еще не всё в порядке. Задача — добиться красивого вида через css … И как настоящий студент — всё приходится делать в последние дни(…
    Ваша галерея — мое спасение. Надеюсь опубликовать сайтик мой, обязательно сделаю ссылку в разделе «Полезное» на Ваш ресурс(с Вашего разрешения).
    Можно пару вопросов по «галочке» под формой (Я не робот.)- как её прописать в коде(эту маленькую формочку) чтобы «поставить» на своем страничке обратной связи. Спасибо за понимание!

  25. Александр

    Здравствуйте, урок замечательный. На одном сайте все получилось с первого раза, на втором не совсем. При первом посещении страницы скрипты не срабатывают, после ctrl+F5 rfr как ни странно работает, в чем может быть проблема? сайт artkuhnya.kiev.ua/skafi_kupe.html Благодарю

    • Андрей Кудлай

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

  26. Иван

    Спасибо Андрей, пробовал сделать как описано вами все через Adobe Dremweaver, но как только вставляю скрипты, полностью все пропадает, остается только серый экран, в чем может быть проблема?

  27. Иван

    Все спасибо огромное очень познавательно, разобрался не закрыл скрипт, и установил неправильный путь к скриптам. Удачи вам в работе и побольше интересных уроков:)

  28. Вероника

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

  29. Евгений

    Не открываются картинки в модальном окне. Посмотрите пожалуйста.

    Ссылка на тему на форуме http://webformyself.com/forum/index.php/topic/3452/

    Заранее спасибо.

  30. Анна

    Спасибо Вам огромное!! очень полезный урок, все получилось!!!!!!!

  31. Николай

    Здравствуйте… Всё получилось, только вот почему то переключения между фото искажается

  32. Ярослав

    Разъясните куда прописывать это.
    1.
    $(document).ready(function(){
    2.
    $(«a.photo»).fancybox();
    3.
    });

    • Андрей Кудлай

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

      • Ярослав

        Разобрался. Спасибо за статью. Все работает, единственное стрелок нет, покапаюсь в коде. Кстати я маленькие фотки отдельно не делал, да смысла делать их не вижу. Может и стоит, пока не понял.

  33. Ярослав

    Видео посмотрел сделал все пошагово , ни чего на работает, фото открывается в новом окне. Проверил все на три раза.

  34. Дмитрий

    Все хорошо! Отличная галерея! Но… По указанным ссылкам теперь скачиваются архивы с другими версиями библиотек, поэтому нужно не просто копировать коды, а внимательно проверять их. Лично я вообще в этом деле хоть и «чайник», но часа за три таки докопался! Теперь на моем сайте появилась простая и удобная галерея! Так что — дерзайте!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree