Lightbox 2 demo we will devide in 2 part 1. Lightbox/colorbox impact for images and 2. Lightbox/colorbox impact for image map. Here I written the html code also for manul implementation. Feel free to reach me for any queries in implementation.
WP Lightbox Demo:
Click blow image to see the Lightbox 2 Plugin in action-
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" src="http://yepinol.com/wp-content/uploads/2012/12/image1_s.jpg" alt="Green glass towers" 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" src="http://yepinol.com/wp-content/uploads/2012/12/image2_s.jpg" alt="random house" 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" src="http://yepinol.com/wp-content/uploads/2012/12/image3_s.jpg" alt="glass" width="75" height="75" /> </a> |
Click blow image to see the Lightbox 2 Plugin in action for image map -
HTML Code Image Map:
<img src="http://yepinol.com/wp-content/uploads/2012/12/main-image.png" alt="myMap" width="480" height="448" border="0" usemap="#Map" rel="lightbox[mapgroup]" /> <map name="Map" id="Map"> <a href="http://yepinol.com/wp-content/uploads/2012/12/image1.png" rel="lightbox[mapgroup]"> <area shape="poly" href="#" 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" /> </a> <a href="http://yepinol.com/wp-content/uploads/2012/12/image2.png" rel="lightbox[mapgroup]"> <area shape="poly" coords="168,12,316,12,318,76,316,220,165,221" href="#" /> </a> <a href="http://yepinol.com/wp-content/uploads/2012/12/image3.png" rel="lightbox[mapgroup]"> <area shape="rect" coords="322,2,477,225" href="#" /> </a> <a href="http://yepinol.com/wp-content/uploads/2012/12/image4.png" rel="lightbox[mapgroup]"> <area shape="poly" coords="7,420,143,416,142,326,142,290,141,244,6,242,12,302" href=#" /> </a> <a href="http://yepinol.com/wp-content/uploads/2012/12/image5.png" rel="lightbox[mapgroup]"> <area shape="rect" coords="159,231,314,444" href="#" /> </a> <a href="http://yepinol.com/wp-content/uploads/2012/12/image6.png" rel="lightbox[mapgroup]"> <area shape="rect" coords="319,232,484,443" href="#" /> </a> </map> |
Caption
[caption id="attachment_719" align="alignnone" width="600"]<a href="http://yepinol.com/wp-content/uploads/2012/12/IMG_6523.jpg"><img src="http://yepinol.com/wp-content/uploads/2012/12/IMG_6523.jpg" alt="Pankaj and Arpit Babu" width="1200" height="900" class="size-full wp-image-719" /></a> Pankaj and Arpit Babu[/caption] |
About Pankaj Jha
