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.


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 )

        <li><a rel="mini-lightbox" href="resources/mini-lightbox/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="resources/mini-lightbox/test-image.jpg">Local Image without caption.</a></li>
        <li><a rel="mini-lightbox" href="" title="Remote Image">Remote Image</a></li>
        <li><a rel="mini-lightbox" href="">Remote image loading with no title attribute.</a></li>
        <li><a rel="mini-lightbox" href="">Remote Image with absolute path.</a></li>
        <li><a rel="mini-lightbox" href="">Absolute Path on Image HREF. Example #01 (</a></li>
        <li><a rel="mini-lightbox" href="">Absolute Path on Image HREF. Example #02 (</a></li>