Как работает Lightbox JS для увеличения изображений

Автор:
Nurlan Kemelbekov

Вы, наверное, не раз видели эффект Lightbox JavaScript в действии на многих сайтах. Он накладывает большую версию изображения в верхней части текущей страницы, если пользователь нажал на меньшее изображение, и в этой статье я покажу вам, как работает Lightbox JS для увеличения изображений и вы можете использовать его на своих страницах!

Во-первых, вот пример того, как работает Lightbox JS:

Lightbox JS — простой скрипт, используемый для наложения изображений на текущей странице. Его несложно настроить и работает на всех современных браузерах.

1. Для использования lightbox на страницах вашего сайта, вам нужно включить lightbox.js в head вашего документа, как это.

<script type="text/javascript" src="lightbox.js"></script>

2. Добавить rel=’lightbox’ атрибут любом месте тега, чтобы активировать Lightbox и можно добавить код для изображений. Вы можете сделать это, как показано выше. Вот как:

<a href="angelina.jpg" rel="lightbox"><img src="angelina_tmb.jpg" alt="" /></a>

<a href="jaguar.jpg" rel="lightbox"><img src="jaguarsmall.jpg" alt="" /></a>

Примечание: Используйте атрибут title, если вы хотите, чтобы показать заголовок.

            • НАСТРОЙКА:

Вы можете использовать CSS для стилизации контейнера изображения. Вот код, используемый в приведенных выше примерах:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

Если вы хотите показать пользователю ‘загрузку’ — анимированный процесс, как в примерах выше, необходимо указать это в верхней части lightbox.js файла.

var loadingImage = 'loading.gif';

В том же ключе, если вы хотели бы использовать кнопку Закрыть, ‘х’ графику, как в примерах выше, указать его расположение в верхней части lightbox.js файл.

var closeButton = 'close.gif';

Это выглядит так, как на рисунке ниже.
анимированный процесс
Думаю, что Вы в курсе того, что здесь необходимо указать ссылку на директорию расположения этих изображений.
СКАЧАТЬ:
1. Строка состояния загрузки — используется в примерах выше

2. Графический ‘X’ размещен в верхнем правом углу.

3. 80% непрозрачность, черная плитка — используется для создания тени

Еще из этой категории:
Смена изображения при наведении курсора
Увеличение и последующее уменьшение объекта



Рекомендуемый контент

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

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

* Copy This Password *

* Type Or Paste Password Here *

1 × один =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!