WP Lightbox 2 Plugin WordPress Demo

Thanks to making WP Lighbox 2 plugin as one of the most popular WordPress plugin, till today downloads count: 284885 and counting continues. We have divided WP Lightbox 2 demo in two part.

  1. 1: Lightbox/colorbox impact for images and
  2. 2: Lightbox/colorbox impact for image map.

Here we have written the html code also for manual implementation. Feel free to reach me for any queries regarding configuration/implementation.

WP Lightbox Demo:

Click blow image to see the Lightbox 2 Plugin in action-
Green glass towers
random house

HTML Code Image Group:

<a title="Green glass towers" href="http://yepinol.com/wp-content/uploads/2012/12/image1.jpg" rel="lightbox[26]"> <img class="slickr-post" alt="Green glass towers" src="http://yepinol.com/wp-content/uploads/2012/12/image1_s.jpg" width="75" height="75" /> </a>
<a title="random house" href="http://yepinol.com/wp-content/uploads/2012/12/image2.jpg" rel="lightbox[26]"> <img class="slickr-post" alt="random house" src="http://yepinol.com/wp-content/uploads/2012/12/image2_s.jpg" width="75" height="75" /> </a>
<a title="glass" href="http://yepinol.com/wp-content/uploads/2012/12/image3.jpg" rel="lightbox[26]"> <img class="slickr-post" alt="glass" src="http://yepinol.com/wp-content/uploads/2012/12/image3_s.jpg" width="75" height="75" /> </a>

Click blow image to see the Lightbox 2 Plugin in action for image map -





HTML Code Image Map:

<img alt="myMap" src="http://yepinol.com/wp-content/uploads/2012/12/main-image.png" usemap="#Map" width="480" height="448" border="0" />
<map id="Map" name="Map">
<a href="http://yepinol.com/wp-content/uploads/2012/12/image1.png" rel="lightbox[mapgroup]">
<area coords="7,76,9,221,75,223,116,219,133,223,145,222,157,223,156,223,148,21,150,23,162,3,7,2,8,46" shape="poly" href="#" />
<a href="http://yepinol.com/wp-content/uploads/2012/12/image2.png" rel="lightbox[mapgroup]">
<area coords="168,12,316,12,318,76,316,220,165,221" shape="poly" href="#" /> 
<a href="http://yepinol.com/wp-content/uploads/2012/12/image3.png" rel="lightbox[mapgroup]">
<area coords="322,2,477,225" shape="rect" href="#" />
<a href="http://yepinol.com/wp-content/uploads/2012/12/image4.png" rel="lightbox[mapgroup]">
<area coords="7,420,143,416,142,326,142,290,141,244,6,242,12,302" shape="poly" href="#&quot;" />
<a href="http://yepinol.com/wp-content/uploads/2012/12/image5.png" rel="lightbox[mapgroup]">
<area coords="159,231,314,444" shape="rect" href="#" />
<a href="http://yepinol.com/wp-content/uploads/2012/12/image6.png" rel="lightbox[mapgroup]">
<area coords="319,232,484,443" shape="rect" href="#" />


Pankaj and Arpit Babu

Pankaj and Arpit Babu


  1. Joy says

    This is a great plugin for lighbox effect. Also, it this work well well on Android also. For me the images are cut off on the right, and so the Next button isn’t there. The Close button doesn’t always work either, and when I rotate the phone it doesn’t update the image.

  2. Nick says

    HI there,
    nice plugin. I could only wish for one more addition. Can a “share to
    facebook” icon be overlayed on top of the image gallery show? This way
    the user will be able to share just one photo and not the whole post.
    Thanks for considering to implement this (if there is such a plugin, could you direct me to it please?).
    Best regards,

  3. Stefan says

    The code generated by the plugin isn’t w3c valid because of the rel attribute. Ist the any way to replace the rel attribute by the data attribute witch is html5 valid?

Leave a Reply

Your email address will not be published. Required fields are marked *