От автора: в этом несложном практическом уроке мы с Вами за короткое время создадим простую, но вместе с тем симпатичную галерею, которая замечательно будет смотреться на сайте. Итак, приступим.
Для показа мы воспользуемся бесплатным шаблоном, в котором создадим еще одну страницу под нашу галерею. Сразу стоит отметить, что задача, которую мы решим в уроке, на самом деле может быть выполнена средствами 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. Описание и документацию к нему Вы сможете найти на офсайте — http://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
хорошо, извините,
просто вы написали «…или дайте ссылку на страницу и постараемся разобраться что к чему.»
поэтому и написала так )
Точно, только это я написал в продолжение «Создайте тему на нашем форуме, выложите там в архиве папку с проектом или…»
Я имел в виду что можно в теме на форуме выложить архив или там же дать ссылку на страницу. В общем, извиняться нечего, ничего страшного на самом деле нет в том, что вы выложили ссылку здесь… просто на форуме решать подобные вопросы гораздо удобнее — там и код можно выложить, и архив приложить, и скриншот дать… в общем, удобнее
создала тему на форуме
Здравствуйте. Очень понравился ваш урок, но появился один вопрос. Как прописывать пути к картинкам если я буду использывать 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 … И как настоящий студент — всё приходится делать в последние дни(…
Ваша галерея — мое спасение. Надеюсь опубликовать сайтик мой, обязательно сделаю ссылку в разделе «Полезное» на Ваш ресурс(с Вашего разрешения).
Можно пару вопросов по «галочке» под формой (Я не робот.)- как её прописать в коде(эту маленькую формочку) чтобы «поставить» на своем страничке обратной связи. Спасибо за понимание!
Пожалуйста)
Елена, относительно вопроса капчи, то здесь уже нужны некоторые знания в области программирования. Посмотрите этот урок, возможно, он Вам подойдет — .
Здравствуйте, урок замечательный. На одном сайте все получилось с первого раза, на втором не совсем. При первом посещении страницы скрипты не срабатывают, после ctrl+F5 rfr как ни странно работает, в чем может быть проблема? сайт artkuhnya.kiev.ua/skafi_kupe.html Благодарю
Здравствуйте, Александр.
Скорее всего проблема в кэше браузера. Попробуйте очистить его. На сайте проблем и ошибок нет, галерея без проблем работает у меня с первого раза.
Спасибо Андрей, пробовал сделать как описано вами все через Adobe Dremweaver, но как только вставляю скрипты, полностью все пропадает, остается только серый экран, в чем может быть проблема?
Все спасибо огромное очень познавательно, разобрался не закрыл скрипт, и установил неправильный путь к скриптам. Удачи вам в работе и побольше интересных уроков:)
Огромное спасибо, прекрасный урок, все понятно. Благодаря Вам галерея на нашем сайте теперь работает). И это при том, что я про fancybox вообще ничего не знала. Даже искала Вас в соцсетях, чтобы выразить свою благодарность, а потом заметила, что здесь можно оставить комментарии
Пожалуйста, Вероника
Не открываются картинки в модальном окне. Посмотрите пожалуйста.
Ссылка на тему на форуме
Заранее спасибо.
Спасибо Вам огромное!! очень полезный урок, все получилось!!!!!!!
Здравствуйте… Всё получилось, только вот почему то переключения между фото искажается
Разъясните куда прописывать это.
1.
$(document).ready(function(){
2.
$(«a.photo»).fancybox();
3.
});
К уроку ведь специально прилагаются исходники. Скачайте их и посмотрите, куда нужно вписать данный код… хотя из урока все должно быть понятно, в общем-то.
Разобрался. Спасибо за статью. Все работает, единственное стрелок нет, покапаюсь в коде. Кстати я маленькие фотки отдельно не делал, да смысла делать их не вижу. Может и стоит, пока не понял.
Пожалуйста)
Видео посмотрел сделал все пошагово , ни чего на работает, фото открывается в новом окне. Проверил все на три раза.
Все хорошо! Отличная галерея! Но… По указанным ссылкам теперь скачиваются архивы с другими версиями библиотек, поэтому нужно не просто копировать коды, а внимательно проверять их. Лично я вообще в этом деле хоть и «чайник», но часа за три таки докопался! Теперь на моем сайте появилась простая и удобная галерея! Так что — дерзайте!
Спасибо Вам большое! У меня все получилось! Я новичок в web программировании и моему счастью не было предела
))
Пожалуйста