made in Germany
The Bit Brewery Lightbox is equipped with special features adding to many of the usual standard functionalities. These features make our Bit Brewery Lightbox unique in comparison to other lightboxes. Particular features amongst others are as follows:
The Bit Brewery Lightbox offers endless combination options of various media formats in one gallery, e.g. a gallery could consist of an image, an iframe, a video and another image.
Opening up a second lightbox within the first one is completely hassle-free. The special part of it: the contents of the first lightbox are retained at all times.
The configuration of the Bit Brewery Lightbox is easy and powerful. All click areas have texts that are easily changed.
The Bit Brewery Lightbox does not only offer the standard tracking tools of typical user activities like the opening and closing of the lightbox. Eight pre-defined callbacks make it possible to integrate further useful functionalities.
Just select the links you want to open in a lightbox, the type of the resource will be recognized by the url.
$('.bblb').bbLightbox();One of the Bit Brewery Lightbox standard tools is the integration of pictures of any size.
<a href="/path/to/image.jpg" class="bblb">Image</a>$.bbLightbox({ type: 'image', src: '/path/to/image.jpg' });You can connect every supported content-type to a gallery.
<a href="/path/to/image.jpg" class="bblb" data-bblb-group="gallery" >Image</a>
<a href="/path/to/image.jpg" class="bblb" data-bblb-group="gallery" >Image</a>
...$.bbLightbox([{ type: 'image', src: '/path/to/image.jpg' }, { type: 'image', src: '/path/to/image.jpg' }, ... ]);You can also show preview-images but you have to define them.
<a href="/path/to/image.jpg" class="bblb" data-bblb-group="gallery" >Image</a>
<a href="/path/to/image.jpg" class="bblb" data-bblb-group="gallery" >Image</a>
...$.bbLightbox([{ type: 'image', src: '/path/to/image.jpg' }, { type: 'image', src: '/path/to/image.jpg' }, ... ]);The Bit Brewery Lightbox can be opened in full-screen mode.
<a href="/path/to/image.jpg" class="bblb" data-bblb-openfullscreen="true">Fullscreen</a>$.bbLightbox({ type: 'image', src: '/path/to/image.jpg' }, { openfullscreen: true });Another standard option is the integration of self-hosted videos in the Bit Brewery Lightbox with SWF-fallback.
What’s special about it?
Depending on the kind of browser their own preferred video formats can alternatively be incorporated for a greater overall performance.
<a href="/path/to/video.mp4" class="bblb" data-bblb-width="1280" data-bblb-height="720" data-bblb-formats='["/path/to/video.webm"]' data-bblb-preview="/path/to/preview.jpg">Video</a>$.bbLightbox({ type: 'video', formats: ['/path/to/video.mp4', '/path/to/video.webm'], preview: '/path/to/img.jpeg' }, { width: 1280, height: 720 });Iframes, for instance used to embed YouTube videos or Google Maps, only need the following details for their utilization in the Bit Brewery Lightbox: the url and size in which the Lightbox shall display the iframe.
<a href="external-url" class="bblb">Iframe</a><a href="internal-url" data-bblb-force="iframe" class="bblb">Iframe</a>$.bbLightbox({ type: 'iframe', src: 'url' });The interweaving of several Bit Brewery Lightboxes is possible at all times. For instance, if you want to use one lightbox for standard forms, links with further information (e.g. company terms and conditions) can be accessed in a second lightbox without losing the content of the first one. The content of the first lightbox will only temporarily be greyed out. When closing the second lightbox the user returns to the first one and will therefore not close the entire Lightbox-function. Further in-depth interweaving is also possible.
Subscribe to receive inspiration,
ideas, and news in your inbox.
Your Privacy Policy text
<div id="lb-lvl1" class="bb-lightbox-htmlcontent">
<a href="/local-url" class="bblb">Second Trigger</a>
</div>
<button class="bblb" data-bblb-content="#lb-lvl1">First Trigger</button>You can use the Bit Brewery Lightbox to display HTML-elements of the opened website.
If you wish to display only a particular HTML element of the opened website a CSS selector can be used.
<button data-bblb-content="selector" class="bblb">show selected element</button>$.bbLightbox({ type: 'html', content: selector });Alternatively, the entire content of the trigger element which activates the Lightbox can be displayed. The advantage of this method is that you do not need to specify a selector.
<div class="bblb">
<button>Trigger</button>
<div class="bb-lightbox-htmlcontent">HTML-Content</div>
</div>$.bbLightbox({ type: 'html', content: 'HTML-String' });$.bbLightbox({ type: 'html', content: jQuery|DOM - Element });When using AJAX the Bit Brewery Lightbox filters all CSS and JavaScript elements of the source page and only displays the body of that HTML page which is to be loaded. This works as a safety feature for the user and as a compatibility feature for the webmaster.
<a href="/local-url" class="bblb">Ajax</a>$.bbLightbox({ type: 'ajax', src: '/local-url' });Not necessarily will the complete HTML resource be displayed when using AJAX. By using a selector one particular HTML element of the source page can be selected for display.
<a href="/" class="bblb" data-bblb-selector=".main header">Ajax</a>$.bbLightbox({ type: 'ajax', src: '/local-url', selector: '#content' });The standard Bit Brewery Lightbox practice of not loading CSS and JavaScript elements can be adjusted, i.e. the source page can be loaded with CSS without JavaScript, with only JavaScript excluding CSS or with either CSS or JavaScript. It is also possible to filter all css and js resources with a callback.
If you view this demo locally (url starts with file://) in Googles Chrome Browser the ajax request will be blocked. Please visit the hosted demo to view this demo.
<a href="/local-url" class="bblb" data-bblb-addjs="true" data-bblb-addcss="true">Load Page with scripts and css</a>$.bbLightbox({ type: 'ajax', src: '/local-url', loadcss: true, loadjs: true, selector: 'selector' });‘Alert‘, ‚confirm‘ and ‚prompt‘ are standard JavaScript elements that are replicated within the Lightbox, i.e. you can integrate status messages by use of alert, action confirmations by use of confirm (‘yes’ or ‘no’) and newsletter subscriptions by use of prompt.
<button data-bblb-force="modal" data-bblb-alert="Alert Text" class="bblb-alert">Alert</button>$('.bblb-alert').bbLightbox({ contentclose: false, backgroundclose: false, fullscreen: false }).on('modal', function(e, res) { alert(res); });var $el = $.bbLightbox({ type: 'modal', kind: 'alert', message:'Alert Text' }, { contentclose: false, backgroundclose: false, fullscreen: false });
$el.on('modal', function(e, res) { alert(res); });<button data-bblb-force="modal" data-bblb-confirm="Confirm Text" class="bblb-confirm">Confirm</button>$('.bblb-confirm').bbLightbox({ contentclose: false, backgroundclose: false, fullscreen: false }).on('modal', function(e, res) { alert(res); });var $el = $.bbLightbox({ type: 'modal', kind: 'confirm', message: 'Confirm Text' }, { contentclose: false, backgroundclose: false, fullscreen: false });
$el.on('modal', function(e, res) { alert(res); });<button id="#something" data-bblb-force="modal" data-bblb-prompt="Prompt Text" class="bblb-prompt">Prompt</button>$('.bblb-prompt').bbLightbox({ contentclose: false, backgroundclose: false, fullscreen: false }).on('modal', function(e, res) { alert(res); });var $el = $.bbLightbox({ type: 'modal', kind: 'prompt', message: 'Prompt Text' }, { contentclose: false, backgroundclose: false, fullscreen: false });
$el.on('modal', function(e, res) { alert(res); });In case of a missing resource the Bit Brewery Lightbox will automatically show an error message you can configure.
The Bit Brewery Lightbox can be activated at any point within JavaScript and therefore does not necessarily need a trigger element.
$.bbLightbox({ type: 'image', src: '/image.jpg'; });If the hash on the url is the same as the ID of a Trigger-Element, the lightbox will be opened immediately.
The name of the theme gets appended to the wrapping container of the lightbox, so you can build the style you want.
As indicated above a further eight callbacks will be predefined in the Bit Brewery Lightbox (except from opening and closing the Lightbox) as follows:
You can choose if you want to set the options inline with the data-bblb-Syntax or you can pass an option-object to the initialization.
$('.bblb').bbLightbox({
width: 1000,
translation: {
slide: 'close' //options with a hyphen like "translation-slide" are nested objects
}
});| option | default | description |
|---|---|---|
| dataprefix | bblb- | prefix for data-options (data-prefix-...), can only be configured through the options-object |
| trigger | click | event that opens the lightbox |
| theme | standard | [standard, classic, vintage] |
| inline | false | append lightbox html in DOM right after the trigger element instead of placing it as the last element in the DOM |
| fullscreen | true | show fullscreen button |
| openfullscreen | false | open lightbox in fullscreen mode |
| contentclose | true | show close button |
| backgroundclose | true | click on background closes lightbox |
| closekeys | [27] | array of keycodes that close the lightbox [escape] |
| width | 800 | default width for iframes and videos |
| height | 600 | default height for iframes and videos |
| copyevents | true | copy event-listeners of html-content when using a css selector to show content of the current page in the lightbox |
| force | force a content-type when autodetection does not work, e.g. your image-urls have no file suffix | |
| Group-Options | ||
| loop | true | allows sliding from first-to-last and last-to-first |
| preload | 1 | preloads x-slides before and y-slides after the current slide defined as array [x,y], if x and y are equal can be set as integer |
| pager | true | show pager |
| pagergallery | false | show preview images, preview-images have to be specified |
| prevkeys | [33,37,65,74] | array of keycodes that close the lightbox [pageup, left, a, j] |
| nextkeys | [34,39,68,76] | array of keycodes that close the lightbox [pagedown, right, d, l] |
| enableswipe | true | change slides with slide gestures |
| maxswipeduration | 250 | duration until swipe has to be finished |
| minswipex | 200 | minimal swipe width |
| maxswipey | 100 | maximal swipe height |
| Animationen | ||
| transition-open | growin | animation on open lightbox [fadein, slideintop, slideinright, slideinbottom, slideinleft, flipin, flipinv, growin, shrinkin] |
| transition-close | shrinkout | animation on close lightbox [fadeout, slideouttop, slideoutright, slideoutbottom, slideoutleft, flipout, flipoutv, growout, shrinkout] |
| transition-slide | slideslide | animation on change slides [fadeslide, slideslide, slideslidev, flipslide, flipslidev, shrinkslide] |
| Translations | ||
| translation-close | close* | Text for Close-Elements |
| translation-fullscreen | fullscreen* | Text for Fullscreen-Button |
| translation-previous | previous* | Text for Previous-Button |
| translation-next | next* | Text for Next-Button |
| *These texts are only visible for screen readers, but can be made visible for everyone through css | ||
| translation-alert-ok | ok | Text for alert-ok-button |
| translation-confirm-ok | ok | Text for confirm-ok-button |
| translation-confirm-cancel | cancel | Text for confirm-cancel-button |
| translation-prompt-ok | ok | Text for prompt-ok-button |
| translation-prompt-cancel | cancel | Text for prompt-cancel-button |
| translation-error | Resource could not be loaded. | Text for error-message |
| Callbacks | ||
| onbeforeopen | 0 | callback before open return { stop: true } to keep lightbox from opening |
| onafteropen | 0 | callback when open |
| onbeforeclose | 0 | callback when close is called return { stop: true } to keep lightbox from closing |
| onafterclose | 0 | callback when closed |
| onfilter | 0 | lets you customize the content-object ({ html: jQuery-Element, css: [array], js: [array] }) of a slide that has been loaded and will be inserted into the DOM |
| onslideloaded | 0 | callback when lightbox-content is created, argument is jQuery-object of the created element |
| onslideopen | 0 | callback when lightbox-content is shown, argument is jQuery-object of the element |
| onslideclose | 0 | callback when lightbox-content is hidden, argument is jQuery-object of the element |