Very practical baguetteBox. js image pop-up layer,

Very practical baguetteBox. js image pop-up layer,

The lightbox JS plug-in, baguetteBox. js, is an image display effect created using pure Javascript. It has an image that is zoomed in and out and has a corresponding CSS3, and can be perfectly displayed on touch screens and other devices.

BaguetteBox. js advantages
Javascript is complete and does not require jQuery library support
Supports touch screen mobile phones
Displays titles and descriptions.
Supports responsive effects
Supports CSS3 transition
Use the SVG button to download no unnecessary files
Only 2 kb after gzip compression is enabled

Online instance

Default

Fade in and out

Response Image

Usage

<Div class = "header large"> <ul class = "nav"> <li> <a class = "cur" href = "#" title = "Homepage"> homepage </a> </li> <a href = "#" title = "template"> website template </a> </li> <a href = "#" title = "webpage effects"> webpage effects </a> </li> <a href = "#" title = "website psd"> website psd </a> </li> </ul> </div>

　　

Copy

We place multiple clickable thumbnails on the page, and add the link href attribute and data-caption title to tag.

<div class="baguetteBox">     <a href="img/1-1.jpg" data-caption="Golden Gate Bridge"></a>     <a href="img/1-2.jpg" title="Midnight City"></a>    ...... </div>

$(function(){     baguetteBox.run('.baguetteBox', {         //options     }); });

Parameter Details

Parameters	Description	Default Value
Captions	Show Image Description	True
Buttons	Display button. Optional values: 'auto', true, and false.	Auto
Async	Asynchronously load files	False
Preload	Number of images to be preloaded	2
Animation	Animation Mode. Options include slideIn and fadeIn.	SlideIn

Download