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
glass

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 -

myMap








 

 

 

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>
<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>
<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>
<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>
 
<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>
 
<a href="http://yepinol.com/wp-content/uploads/2012/12/image6.png" rel="lightbox[mapgroup]">
 
<area coords="319,232,484,443" shape="rect" href="#" />
</a>
 
</map>

Caption

Pankaj and Arpit Babu

Pankaj and Arpit Babu


Comments

  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,
    Very
    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,
    Nick

  3. Stefan says

    Hi
    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?
    Thanks

Leave a Reply

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


*