Small lightbox + html popup. Pure JavaScript + CSS. No dependencies!
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
LICENSE
README.md
demo.html
loading.gif
microlightbox.css
microlightbox.js
microlightbox.min.js

README.md

microlightbox

Small lightbox + html popup. Pure JavaScript + CSS. No dependencies!

Browser support

microlightbox supports all major browsers including Internet Explorer 8 and above

Demo

Quick start

  1. Copy microlightbox.min.js (5.5 kb) and microlightbox.css (3 kb)
  2. Add to <head>:
<head>
    ...
    <link rel="stylesheet" href="microlightbox.css" type="text/css">
    <script type="text/javascript" src="microlightbox.min.js"></script>
    ...
</head>
  1. call microlightbox:
<script>
    microlightbox(".microlightbox");
</script>
  1. add class "microlightbox" to <a>:
    <a class="microlightbox" href="...">

API & Options

<script>
    microlightbox(elm[, opt]);
</script>

elm:

  1. DOM-element:
    • <a href="image.jpg"> - при клике по ссылке будет открываться во вспылывающем окне ресайзеная картинка image.jpg
    • <a href="#html_id"> - при клике по ссылке будет открываться всплывашка с HTML-кодом блока
    • <img src="image.jpg"> - будет открыта всплывашка с ресайзеной картинкой, взятой из src.
    • любой другой тег - будет открыт во всплывашке.
  2. string:
    • начинающаяся с символа "#" - id DOM-елемента. Поведение функции аналогично передаче DOM-елемента с указанным ID.
    • начинающаяся с символа "." - название класса. Поведение функции аналогично вызову функции для каждого DOM-елемента с этим классом.
    • в других случаях - воспринимается как HTML-код, который должен быть отображен во всплывашке.

opt: object {optionname1:value[, optionname2:value2]}

Available options

Key Type Default value Description
type string 'auto' Декларирует тип содержимого. Может принмать значения: 'auto', 'image', 'html' или 'inline'. Если 'auto' - определить автоматически.
title string, null null Строка, содержащая заловок всплывающиего окна; Если null - попытаться прочитать из атрибута title
titlePosition string 'auto' позиция отображения title: 'titlebar', 'inside' или 'auto' (для image - используется inside, во всех остальных случаях - titlebar)
padding integer 10 Пространство между контейнером microlightbox и контентом.
margin integer 20 Пространство между областью просмотра и контейнером microlightbox.
minWidth integer 100 Минимальная ширина контейнера microlightbox.
minHeight integer 100 Минимальная высота контейнера microlightbox.
maxWidth integer 0 Максимальная ширина контейнера microlightbox. Если 0 - игнорировать.
maxHeight integer 0 Максимальная высота контейнера microlightbox. Если 0 - игнорировать.
width integer 0 Ширина контейнера microlightbox по умолчанию. Если 0 - игнорировать. Данный параметр игнорируется для изображений.
overlayColor string 'rgba(0,0,0,0.7)' Цвет фонового затемнения (значение для microlightbox_overlay.style.backgroundColor).

Examples

<script>
    microlightbox("#id");
    microlightbox(".classname");
    microlightbox(document.getElementById("id"), {title:"text"});
    microlightbox("#id", {title:"text", titlePosition:"titlebar", overlayColor:''});
    microlightbox("<b>html code</b>", {minWidth:200});
    microlightbox("image.jpg", {type:"image"});
</script>