Mini-LightBox

Unobtrusive compact and lightweight modal window script. Simple Lightbox alternative no-framework dependent.

Mini-lightbox is a lightweight unobtrusive and compact script that allows you to open image modal overlays on the same web document. This script will fit your needs if you are looking for a compact, simple, framework dependent-free alternative to Lokesh Dhakar LightboxJS without use of fancy effects or external libraries, just a modal window to show images on your website.

Examples
How to Use it
  1. Include the references to the mini-lightbox.js and mini-ligthbox.css files within the <head> of your web document.

    <script type="text/javascript" src="mini-lightbox/mini-lightbox.js"></script>
    <link rel="stylesheet" href="mini-lightbox/mini-lightbox.css" type="text/css" media="screen" />
    
  2. Add the attribute rel="mini-lightbox" to the link elements where you want mini lightbox to get activated. You can also use the attribute title on the anchor tag in order to show a textual caption on the image modal window.

    <a href="images/image-1.jpg" rel="mini-lightbox" title="my caption">image #1</a>
    
  3. Sample ( Above list html code )

    <ul>
        <li><a rel="mini-lightbox" href="media/assets/test-image.jpg" title="Lorem ipsum dolor sit amet. This is just a simple test">Local Image and Text. Relative path.</a></li>
        <li><a rel="mini-lightbox" href="media/assets/test-image.jpg">Local Image without caption.</a></li>
        <li><a rel="mini-lightbox" href="http://placehold.it/600x400/336699/ffffff?text=mini-lightbox.js" title="Remote Image">Remote Image</a></li>
        <li><a rel="mini-lightbox" href="http://placehold.it/600x400/336699/ffffff?text=mini-lightbox.js">Remote image loading with no title attribute.</a></li>
        <li><a rel="mini-lightbox" href="http://www.google.com/press/images/logos/google.jpg">Remote Image with absolute path.</a></li>
        <li><a rel="mini-lightbox" href="http://www.google.com/press/images/gallery/photo8b.jpg">Absolute Path on Image HREF. Example #01 (http://www.google.com/press/images/gallery/photo8b.jpg)</a></li>
        <li><a rel="mini-lightbox" href="http://www.google.com/press/images/gallery/photo8.jpg">Absolute Path on Image HREF. Example #02 (http://www.google.com/press/images/gallery/photo8.jpg)</a></li>
    </ul>
    
Download

Share This!