Веб-дизайн и поисковая оптимизация
Создание фотогалереи на сайте
• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery — просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта — размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
>> смотреть все статьи о jQuery
Фотогалерея LightBox2 — установка и настройка
В одной из предыдущих статей было рассказано о самой, наверное, популярной бесплатной фотогалерее — Lightbox, созданной на основе библиотеки скриптов jQuery. На базе Lightbox веб-дизайнеры разработали множество интересных клонов, но и первоначальный вариант до сих пор продолжает развиваться и с успехом применяется для фотогалерей на множестве сайтов. Рассмотрим его последнее обновление — плагин Lightbox2, отличающийся небольшим размером и как всегда, простой установкой на сайт. При этом Lightbox2 имеет привлекательный дизайн, работает во всех браузерах и, что особенно приятно, корректно выводит большие изображения, сжимая их в соответствие с размером экрана пользователя.
Разработчик плагина Lightbox2 — Lokesh Dhakar, программист из Сан-Франциско. В настоящее время (2014 год) доступна версия Lightbox v2.7.1, которую и попытаемся установить на сайт. Пример разворачивания одиночного изображения c помощью LightBox2 показан на рисунке.
Установка фотогалереи LightBox2
Для установки фотогалереи LightBox2 сначала создадим на сайте новую папку, назвав её, конечно же, lightbox2. Эта папка должна находиться в том же каталоге, что и страница с фотогалереей. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней два скрипта (*.js), вспомогательные картинки (папка img) и файл CSS (*.css). Далее вставим в заголовок страницы с будущей фотогалереей внутрь тега . следующие строчки, указывающие пути к нашим новым файлам:
href=»lightbox2/css/lightbox.css» rel=»stylesheet» type=»text/css»/>
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
.
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Теперь необходимо разместить на странице сайта нужные изображения. Как обычно, каждое должно быть представлено в виде миниатюры (small) и полноразмерной картинки (big), на которую указывает ссылка с миниатюры. В теге ссылки дополнительно указываем rel=»lightbox» — для одиночного изображения, а если хотим объединить в галерею несколько картинок, то через дефис любое выражение, одинаковое для всех, например, rel=»lightbox-one» 
и так далее.
Если необходимо делать надписи к изображениям, то размещаем их в title ссылок.
Пример простой фотогалереи из трех изображений показан на рисунке:
Важное замечание: если размер основного изображения (big.jpg) больше размера экрана в браузере пользователя, то LightBox2 автоматически подгоняет (уменьшает) его под размер экрана. При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.
Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD — 1920х1080. В нашем примере, это картинка «Субботник».
Настройка фотогалереи LightBox2
Для настройки фотогалереи откройте файл lightbox.js в любом HTML- или текстовом редакторе, например, в Блокноте. В самом начале файла увидите доступные настройки:
this.fadeDuration = 500; //время открытия картинки мс
this.fitImagesInViewport = true; //подгонка под размер экрана true/false
this.resizeDuration = 700; //время разворачивания картинки мс
this.positionFromTop = 50; //отступ окна lightBox сверху экрана
this.showImageNumberLabel = true; //вывод номера картинки true/false
и т.д.
Основные из них снабжены комментариями на русском языке. Изменяйте значения параметров, и после сохранения файла lightbox.js можете наблюдать результат, открыв страницу с вашей фотогалереей в браузере.
Некоторые параметры окна галереи, например, цвет фона и его прозрачность, цвет надписи и др. задаются в CSS-файле lightbox.css. Вспомогательные картинки (вперед, назад, загрузка, выход) расположены в папке img, и их также можно менять на ваше усмотрение.
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе «Веб-дизайн и SEO».
Источник
Статьи:
Мы подготовили новое пакетное предложение по разработке сайтов для нотариусов. Если Вы — частный нотариус, то создание сайта у нас позволит вам:
Lightbox — изменение размера картинки
Иногда бывает необходимым немного изменить картинку, которая выводится популярным скриптом lightbox. К примеру изменить ширину или высоту картинки. Решение этой проблемы не очевидно, но существует.
Столкнулся с проблемой при использовании Lightbox — мне необходимо однозначно определить размеры картинки ( изображения), которые выводится при нажатии. В моем случае, размер картинки не должен был превышать 400 пикселей.
Простое ковыряние с lightbox’ css не дал желаемых результатов, поскольку переопределить размер картинки можно через css, но контейнера, в котором выводится картинка — нет. И в некоторых броузерах получается маленькая картинки на громадном белом фоне.
На сам пост не смотрим, простым переопределнием размеров картинки не получается заставить lightbox делать resize изображения как надо ( о чем и свидетельствуют отзывы в комментах). CSS надо менять, но кроме него необходимо внести правки и в lightbox.js
Итак, в lightbox.css правим
В lightbox.js
Код, который необходимо вставить, отмечен *
//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) <
activeImage = imageNum; // update global var
// hide elements during transition
if(animate)< Element.show('loading');>
Element.hide(‘lightboxImage’);
Element.hide(‘hoverNav’);
Element.hide(‘prevLink’);
Element.hide(‘nextLink’);
Element.hide(‘imageDataContainer’);
Element.hide(‘numberDisplay’);
imgPreloader = new Image();
// once image is preloaded, resize image container
imgPreloader.onload=function() <
Element.setSrc(‘lightboxImage’, imageArray[activeImage][0]);
*
if(imgPreloader.width > maxWidthImage) <
var resizeHeight = ((imgPreloader.height)/(imgPreloader.width)* maxWidthImage);
myLightbox.resizeImageContainer(maxWidthImage, resizeHeight);
Element.setWidth(‘lightboxImage’, maxWidthImage);
>
else <
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
>
*
imgPreloader.onload=function()<>; // clear onLoad, IE behaves irratically with animated gifs otherwise
>
imgPreloader.src = imageArray[activeImage][0];
>,
Я сделал немного не так правильно,
более в лоб. Обошелся без декларации отдельной переменной и проверок.
Источник
Как открывать большие картинки в Lightbox, чтобы они вмещались в экран?
При разработке очередного клиентского сайта, мне захотелось небольшого разнообразия и я решил променять свой любимый Fancybox на что-то новое. Fancybox – это один из лучших и функциональных просмотрщиков картинок для сайтов. Поэтому искал я что-то похожее на него.
Свой выбор я остановил на Lightbox, который оказался очень простым и не менее красивым. Результат получился очень даже неплохой. Но так как я всегда просчитываю все возможные клиентские поступки, то заметил небольшую проблему. Если человек, который будет в последствии, наполнять сайт, загрузит большое по разрешению изображение, то Lightbox выведет его в полый размер. Даже если это изображение будет больше ширины пользовательского экрана, а это уже нехорошо.
Немного покопавшись в интернете я нашел на одном забугорном форуме решение этой проблеме.
При разработке любого сайта нужно всегда учитывать возможные действия менеджера, который будет наполнять в дальнейшем сайт.
Недолго думая, я слямзил его к себе на блог и применил на клиентском сайте. Остался доволен как слон.
Открываем для редактирования файл lightbox.js и ищем в нем кусок кода:
А также немного нужно подправить стили. Делается это в файле ligthbox.css. Ищем код:
и меняем его на:
После этих нехитрых манипуляций Lightbox научился правильно выводит картинки, учитывая пользовательское разрешение экрана.
Источник
Описание jQuery Lightbox
Прежде чем устанавливать плагин на страницу и заниматься его настройкой, давайте взглянем на примеры:
Начало работы с Lightbox
Скачайте последнюю версию плагина (также доступна через Bower: bower install lightbox2 —save ). После этого разархивируйте zip файл и загляните в урезанный рабочий пример, который находится в папке examples.
Готовые для установки Lightbox на вашей странице? Начните с подключения CSS и Javascript. Вы можете взять оба этих файла из папки dist. Вставьте следующий код между тегами head в вашей web-странице
Следующий код, подключающий плагин, вставьте перед закрывающим тегом body:
Убедитесь, что JQuery, который требуется Lightbox, также загружаются. Если вы уже используете JQuery (требуется JQuery 1.7 или выше) на странице, убедитесь, что он загружается до lightbox.js. Если у вас не подключена jQuery, воспользуйтель dist/js/lightbox-plus-jquery.js , в котором уже есть эта библиотека, либо скачайте последнюю версию с оф. сайта. Убедитесь, что четыре изображения, прописанные в lightbox.css расположени в указанном месте. Вы можете взять изображения из папки /dist/images.
Теперь займемся HTML-кодом. Добавьте атрибут data-lightbox к ссылке, содержащей изображения и к которым мы хотим применить наш плагин. В качествен значения атрибута используйте уникальное для каждого изображения имя. Например:
Добавьте атрибут data-title , если вы хотите показать заголовок. Если у вас есть группа связанных изображений, которые вы хотели бы объединить в набор, используйте одинаковое значение в атрибуте data-lightbox для требуемых изображений. Например:
Настройки Lightbox
Если вы хотите изменить какие-либо параметры по умолчанию, вызовите метод option :.
Если true, то левая и правая стрелки навигации, которые появляются при наведении мыши при просмотре набора изображений, будут всегода видимы на устройствах с поддержкой сенсорного ввода
fadeDuration По умолчанию: 500
Время, необходимое для исчезновения контейнера, в миллисекундах.
fitImagesInViewport По умолчанию: true
Если true, то пропорционально уменьшаем размер изображения чтобы картинка поместилось в области просмотра. Это избавляет пользователя от необходимости скроллить, чтобы увидеть все изображение.
Если задано, высота изображения будет ограничена этим значением (в пикселях). Соотношение сторон не будет соблюдаться.
Если задано, ширина изображения будет ограничена этим значением (в пикселях). Соотношение сторон не будет соблюдаться.
positionFromTop По умолчанию: 50
Расстояние от верхней части окна просмотра до Lightbox-контейнера (в пикселях).
resizeDuration По умолчанию: 700
Время, в течение которого Lightbox-контейнер будет изменять свою ширину и высоту при смене изображений разного размера (в миллисекундах).
showImageNumberLabel По умолчанию: true
Если false, в текст будет указываться текущий номер изображения и общее количество изображений в наборе, например: «Изображение 2 из 4».
wrapAround По умолчанию: false
Если true, то при показе последнего изображения кнопка для показа следующего изображения не исчезает. Нажатие на нее приведет к показу первого изображения.
Источник
Lightbox настройка размера изображения
Сообщение Maholyot » 02 мар 2015, 22:09
Если кому интересно, то я всё же добился своего. Правда есть пару нюансов, если кто может, подскажите как из исправить.
Итак, чтобы сделать Лайтбокс подстраивающимся под содержимое, не подойдут стандартные настройки для линка с выводом в качестве лайтбокса. Видимо так задумано, но из всего списка с http://fancybox.net/api работает очень малое количество команд. Нужен принципиально другой подход.
Необходимо прописать скрипт. Чтобы это сделать, создаём HTML блок. В нём пишем скрипт для вывода содержимого с другой страницы. В качестве непосредственной ссылки можно использовать обычный текстовый линк или заранее созданную кнопку, ссылаясь на её ID:
Пояснения по скрипту:
В скрипте мы будем ссылаться на , поэтому и в строке $(«a#zakaz») тоже должно фигурировать zakaz.
Тип всплывающего окна должен быть обязательно — ajax
Так же нужно прописывать размеры окон. autoDimensions нужно отключить, иначе при первой загрузке окна размер будет подстроен не адекватно.
Это был скрипт для первого всплывающего окна.
Для последующих срипт будет немного другой:
Сюда добавится та самая команда, которая делает ресайзинг — $.fancybox.resize
и к ней в дагоночку $.fancybox.center
В целом это всё. Один нюанс. Обатите внимание, что если у вас есть форма на главной странице и формы, которые будут отображаться в всплывающих окнах, то их ID должны быть разными, иначе свойства формы, допустим БЕГРАУНД, будут перениматься формами с главной страницы.
И одно НО. Некоторые блоки на главной странице, которые не имеют выравнивания по центру и растягивания по краям, будут смещаться чуть в право из за того, что всплывающие окна и главная страница имеют одинаковый параметр div#container но с разными значениями по ширине. Можно конечно оставить, если вас это не напрягает, потому как блоки возвращаются после закрытия всплывающих окон, а можно в ручную поменять этот div на, допустим, container2. Сделать это можно в самих файлах страниц *.php. Но при следующем обновлении это дело слетит. Поэтому вопрос, как изменить название div#container в самой программе WB?
Источник
➤detector