От автора: в этом несложном практическом уроке мы с Вами за короткое время создадим простую, но вместе с тем симпатичную галерею, которая замечательно будет смотреться на сайте. Итак, приступим.
Для показа мы воспользуемся бесплатным шаблоном, в котором создадим еще одну страницу под нашу галерею. Сразу стоит отметить, что задача, которую мы решим в уроке, на самом деле может быть выполнена средствами PHP гораздо менее рутинно… но это уже тема отдельного урока.
Все картинки галереи я поместил в каталог /gallery_img/. Картинки разделены по двум папкам в этом каталоге — это папки /big/ и /small/. Полагаю, Вы уже догадались, что в этих папках хранятся картинки оригинальных размеров и миниатюры. При этом все миниатюры имеют одинаковые размеры — 150 пикселей ширины и 100 пикселей высоты. Одинаковые размеры использованы для того, чтобы миниатюры ровно и красиво располагались на странице. Таким образом, миниатюра и картинка оригинальных размеров составляют комплект одного изображения — миниатюра выводится на страницу, а по клику по ней показывается большая картинка.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееСоздадим на странице блок с классом gallery — в этом блоке будут располагаться миниатюры:
| 1 2 3 | <div class="gallery"> <!-- Здесь миниатюры --> </div> |
Теперь добавим картинок в этот блок. Все картинки я выводить здесь не буду, покажу лишь парочку — оставшиеся выводятся аналогично:
| 1 2 3 4 | <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 правила (я их прокомментировал):
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее| 1 2 3 4 5 6 7 8 | /* Gallery */ .gallery img{ margin:5px; /* внешние отступы картинок */ border:3px solid #fff; /* рамка картинок */ } a.photo:hover img{ border:3px solid #034F80; /* изменение цвета рамки при наведении на картинку */ } |
Вот теперь наша галерея выглядит «живой» и привлекательной:
Осталось только добиться того, чтобы показ большой картинки производился в модальном окне. Для этого воспользуемся любым понравившимся Вам скриптом «а-ля Lightbox». Мне в этом плане симпатичен Fancybox. Описание и документацию к нему Вы сможете найти на офсайте — //fancybox.net.
Скачиваем архив, распаковываем и подключаем необходимые скрипты и стили к нашей странице. Для нашего сайта я создам отдельный каталог под скрипты — /scripts/. Туда скопируем файл с библиотекой jQuery (ее можно взять из архива Fancybox или на офсайте). Также в каталог /scripts/ поместим полностью папку fancybox со всем содержимым (скрипты, стили, картинки). Подключаем все это добро между тегами head:
| 1 2 3 4 | <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()… вот и все — ничего сложного:
| 1 2 3 | $(document).ready(function(){ $("a.photo").fancybox(); }); |
Теперь большие картинки открываются в модальном окне — симпатично, не правда ли? 
Кстати, открыв картинку, мы можем, не закрывая ее, перейти к следующему или предыдущему изображению. Эту возможность как раз и обеспечивает атрибут rel, который мы присвоили ссылкам галереи. Одинаковое значение (оно может быть любым) атрибута связывает ссылки в одну группу.
Также Вы можете поиграться с настройками галереи, воспользовавшись документацией на сайте Fancybox. У меня в итоге были установлены следующие настройки:
| 1 2 3 4 5 6 7 8 9 10 | $(document).ready(function(){ $("a.photo").fancybox({ transitionIn: 'elastic', transitionOut: 'elastic', speedIn: 500, speedOut: 500, hideOnOverlayClick: false, titlePosition: 'over' }); }); |
На этом наша галерея на javascript закончена. Надеюсь, что этот небольшой урок Вам понравился и будет полезен. Успехов Вам!
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Доброго времени суток!! Очень полезная статья! Правда у меня возникла проблема, если картинка вертикальная, то по высоте она 100pix, а вот по ширине меньше и в результате растягивается до 150, в общем получается сплющенная. Если ставлю значение auto, тогда красивый ряд смещается и получается каша. Как — то это исправить? Чтобы появились хотя бы черные края, но картинки сохраняла свои пропорции?
Заранее Спасибо!
Здравствуйте.
Только обработкой картинок — ручной либо автоматической. В любом графическом пакете вырезаете из картинки нужную область с размерами 150х100. При автоматической скрипт будет делать это за Вас.
Очень полезная информация
Мне очень понравился урок, но скрипты не сработали, моя галерея, не открывается в новом окне, и все что идет дальше тоже не работает,хотя все делала пошагово.ОЧЕНЬ расстроилась:(
У меня не работают скрипты, хотя все делала пошагово, а урок очень интересный.Очень жаль,что не вышло:(
Татьяна, скорее всего Вы попросту ошиблись с подключением скриптов. Создайте тему на нашем форуме, дайте ссылку на страницу или прикрепите Ваш проект в архиве, и мы постараемся Вам помочь.
Спасибо,сама разобралась с путями.
Добрый день.Большое спасибо за урок, но у меня возникли проблемы. Когда мы делаем нашу галерею «живой и привлекательной» у меня не получаются отступы между фотографиями и нет рамки. Подскажите что я прозевала? Заранее спасибо.
Здравствуйте, Наталья.
Дайте ссылку на страницу, только тогда можно будет сказать где ошибка.
Я еще не регастрировала сайт, только верстаю,может я могу Вам сбросить как то файл.Срасибо
Наталья, на днях должен возобновить работу наш форум и можно будет создать тему там. Также, как вариант, можете создать билет в нашей службе поддержки и прикрепить архив со страницей и прочими материалами. Еще один вариант — выложить страницу на какой-нибудь бесплатный сайт, например, — на Народ.
Хотела написать «Спасибо»
Большое спасибо за понимание к новичкам и к их ошибкам. Итог — хорошая галерея. Скажите пожалуйста возможно ли поменять размер шрифта в комментариях к фотографиям.
Пожалуйста.
Конечно можно. Это, опять таки делается через CSS, используя свойство font-size. Например, комментарии находятся в блоке с классом comments. В таком случае размер устанавливается так:
.comments{font-size: 15px;}А разве мы создавали этот класс в html чтоб присвоить ему свойство в css. Или его надо сейчас создать и где?
Так мы там и комментариев не создавали, вроде как
Вы же где-то комментарии должны выводить? Логичнее это делать в отдельном блоке DIV, для которого и устанавливается нужный класс.
Андрей, огромное спасибо за урок! Впервые создавала галерею, и все получилось! Благодаря Вам)Ваш сайт — мой самый лучший помощник!
Пожалуйста, Елена
спасибо за хороший совет. У меня была проблема загружая галерею на серверю. Некоторые изображения на сервере не отображаются.Я не могу понять, где может быть проблема.
Диана, скорее всего, проблема в корректности пути к этим картинкам… также возможен вариант, что эти картинки попросту недогрузились. Дайте ссылку на галерею и тогда можно будет сказать конкретнее в чем проблема.
добрый день, очень понравился ваш урок, но никак не получается открытие в модальном окне,
папку со скриптами создала, что нужно скопировала в нее,
скрипты прописала, в точности как у вас в уроке показано, перепроверила много раз,
картинки открываются но в новом окне
подскажите — в чем может быть дело?
Добрый день, Ольга.
Скорее всего проблема в том, что где-то не подключили (или ошиблись с путями) какой-то из необходимых для работы скриптов. Создайте тему на нашем форуме, выложите там в архиве папку с проектом или дайте ссылку на страницу и постараемся разобраться что к чему.
вот страничка smallgold.ru/GALLERY.html, посмотрите пожалуйста, я уже 2 дня сижу ))))
Ольга, я же просил создавать тему на форуме и решать проблему там… в комментариях это делать крайне неудобно… первый раз отвечу здесь, в виде исключения, а дальнейшее обсуждение давайте все же продолжим на форуме. По проблеме:
1) внимательно посмотрите, как вы пытаетесь подключить библиотеку jQuery, вы не закрыли двойную кавычку… это замечательно видно если посмотреть исходный код страницы в Firefox, который подсвечивает ошибку красным цветом
2) даже если бы кавычка и была закрыта, то все равно по адресу smallgold.ru/scripts/jquery-1.4.3.min.js нет библиотеки jQuery
хорошо, извините,
просто вы написали «…или дайте ссылку на страницу и постараемся разобраться что к чему.»
поэтому и написала так )
Точно, только это я написал в продолжение «Создайте тему на нашем форуме, выложите там в архиве папку с проектом или…»
Я имел в виду что можно в теме на форуме выложить архив или там же дать ссылку на страницу. В общем, извиняться нечего, ничего страшного на самом деле нет в том, что вы выложили ссылку здесь… просто на форуме решать подобные вопросы гораздо удобнее — там и код можно выложить, и архив приложить, и скриншот дать… в общем, удобнее
создала тему на форуме
http://webformyself.com/forum/index.php/topic/1488/
Здравствуйте. Очень понравился ваш урок, но появился один вопрос. Как прописывать пути к картинкам если я буду использывать CMS Joomla? Так — <img src="baseurl ?>/templates/template ?>/images/01.jpg»/> ?
Здравствуйте, Тимофей.
Не совсем. К сожалению, комментарии не предназначены для полноценной публикации кода, поэтому можете задать свой вопрос на форуме, где постараемся помочь.
Здравствуйте. Здесь ошибка.
Полашаю, Вы уже догадались, что в этих папках хранятся картинки оригинальных размеров и миниатюры.
Здравствуйте, Сергей.
Спасибо за внимательность. Исправили.
Андрей, здравствуйте!
Спасибо Вам за еще один замечательный урок! И хотя время с его публикации уже прошло не малое, он продолжает пользоваться популярностью
Здравствуйте, Лев.
Всегда пожалуйста
Доброй ночи, а где спрятаны картинки кнопок лево, право и выход.Хотела поменять на свои, но так и не нашла, где.А вообщем мне понравилась галерея, у себя использую.
Здравствуйте, Татьяна.
В исходниках к уроку они находятся в папке 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 меняете на свои.
Если возникнут трудности, тогда можете создать тему на нашем форуме, и я там обязательно помогу, выложив пример кода.
Спасибо за пояснения и оперативность, а если мои картинки окажутся больше, то размер указать в bacground-pjsinion? хотя позишен это вроде позиция, местополажение тоесть. или резмер не имеет значения?
Размеры указываются в том же файле стилей для элементов #fancybox-left-ico, #fancybox-right-ico. Там указаны ширина и высота по 30 пикселей. Соответственно, там же и ставим свои, если нужно. Свойство background-position отвечает за позиционирование, т.е. оно нужно в том случае, если работа идет с составной картинкой и нужно взять лишь часть составной картинки.
Спасибо большое!!!
добрый день, Андрей, отличная галерея,спасибо
все перепроверила, подскажите, пожалуйста, почему у меня фото открываются в новом окне?
вот например на этой страничке «http://smallgold.ru/baget.html»
Добрый день, Ольга.
Проблема в подключении библиотеки jQuery и скриптов и стилей Fancybox. Они не подключились. К примеру, для подключения библиотеки jQuery указан в исходном коде такой путь:
src="./scripts/jquery-1.4.3.min.js"Это значит, что библиотека jQuery должна находиться в папке scripts, а эта папка должна быть расположена там же, где и файл baget.html… однако папки scripts там нет. Поэтому нужно внимательно проверить корректность подключения скриптов и стилей.
спасибо! все получилось!:)
Пожалуйста
Спасибо большое, все работает! Очень простое и доходчивое объяснение.
Пожалуйста)
Андрей, спасибо большое за Ваши уроки!
Сюда «забрела» совершенно случайно и Очень вовремя — пишу работу — сайт изостудии — с дизайном всё в норме, а вот с кодом еще не всё в порядке. Задача — добиться красивого вида через css … И как настоящий студент — всё приходится делать в последние дни(…
Ваша галерея — мое спасение. Надеюсь опубликовать сайтик мой, обязательно сделаю ссылку в разделе «Полезное» на Ваш ресурс(с Вашего разрешения).
Можно пару вопросов по «галочке» под формой (Я не робот.)- как её прописать в коде(эту маленькую формочку) чтобы «поставить» на своем страничке обратной связи. Спасибо за понимание!
Пожалуйста)
Елена, относительно вопроса капчи, то здесь уже нужны некоторые знания в области программирования. Посмотрите этот урок, возможно, он Вам подойдет — 2 варианта капчи для сайта.
Здравствуйте, урок замечательный. На одном сайте все получилось с первого раза, на втором не совсем. При первом посещении страницы скрипты не срабатывают, после ctrl+F5 rfr как ни странно работает, в чем может быть проблема? сайт artkuhnya.kiev.ua/skafi_kupe.html Благодарю
Здравствуйте, Александр.
Скорее всего проблема в кэше браузера. Попробуйте очистить его. На сайте проблем и ошибок нет, галерея без проблем работает у меня с первого раза.
Спасибо Андрей, пробовал сделать как описано вами все через Adobe Dremweaver, но как только вставляю скрипты, полностью все пропадает, остается только серый экран, в чем может быть проблема?
Все спасибо огромное очень познавательно, разобрался не закрыл скрипт, и установил неправильный путь к скриптам. Удачи вам в работе и побольше интересных уроков:)
Огромное спасибо, прекрасный урок, все понятно. Благодаря Вам галерея на нашем сайте теперь работает). И это при том, что я про fancybox вообще ничего не знала. Даже искала Вас в соцсетях, чтобы выразить свою благодарность, а потом заметила, что здесь можно оставить комментарии
Пожалуйста, Вероника
Не открываются картинки в модальном окне. Посмотрите пожалуйста.
Ссылка на тему на форуме http://webformyself.com/forum/index.php/topic/3452/
Заранее спасибо.
Спасибо Вам огромное!! очень полезный урок, все получилось!!!!!!!
Здравствуйте… Всё получилось, только вот почему то переключения между фото искажается
Разъясните куда прописывать это.
1.
$(document).ready(function(){
2.
$(«a.photo»).fancybox();
3.
});
К уроку ведь специально прилагаются исходники. Скачайте их и посмотрите, куда нужно вписать данный код… хотя из урока все должно быть понятно, в общем-то.
Разобрался. Спасибо за статью. Все работает, единственное стрелок нет, покапаюсь в коде. Кстати я маленькие фотки отдельно не делал, да смысла делать их не вижу. Может и стоит, пока не понял.
Пожалуйста)
Видео посмотрел сделал все пошагово , ни чего на работает, фото открывается в новом окне. Проверил все на три раза.
Все хорошо! Отличная галерея! Но… По указанным ссылкам теперь скачиваются архивы с другими версиями библиотек, поэтому нужно не просто копировать коды, а внимательно проверять их. Лично я вообще в этом деле хоть и «чайник», но часа за три таки докопался! Теперь на моем сайте появилась простая и удобная галерея! Так что — дерзайте!
Спасибо Вам большое! У меня все получилось! Я новичок в web программировании и моему счастью не было предела
))
Пожалуйста
Здравствуйте
jquery.fancybox-1.3.4.pack.js:1 Uncaught TypeError: Cannot read property ‘msie’ of undefined
at jquery.fancybox-1.3.4.pack.js:1
at jquery.fancybox-1.3.4.pack.js:29
(anonymous) @ jquery.fancybox-1.3.4.pack.js:1
(anonymous) @ jquery.fancybox-1.3.4.pack.js:29
galereya:157 Uncaught TypeError: $(…).fancybox is not a function
at HTMLDocument. (galereya:157)
at j (jquery-1.11.0.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
at Function.ready (jquery-1.11.0.min.js:2)
at HTMLDocument.K (jquery-1.11.0.min.js:2)
(anonymous) @ galereya:157
j @ jquery-1.11.0.min.js:2
fireWith @ jquery-1.11.0.min.js:2
ready @ jquery-1.11.0.min.js:2
K @ jquery-1.11.0.min.js:2
вот такая проблема
Здравствуйте.
Это урок 2012 года, т.е. ему уже почти 10 лет. Обновите версии fancybox и jquery. На сегодня актуальна уже версия fancybox 3 и jquery 3.