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

Share on Facebook

Subscribe to Yepinol via Email

GET MORE STORIES LIKE THIS IN YOUR INBOX!

Join 5000+ Other Readers