Saturday, 01 November 2014
A+ R A-

Lightbox example

  • Category: Joomla!
  • Published: Friday, 28 September 2012 22:56
  • Written by Super User
  • Hits: 116

Single Image Example




Grouped Images Example




Sample Code
<a href="/images/posters/poster6.jpg" rel="lytebox[gallery]" title="Sample photo 1"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster6_thumb.jpg" alt="" class="album" width="100" height="100"  </a> 
<a href="/images/posters/poster7.jpg" rel="lytebox[gallery]" title="Sample photo 2"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster7_thumb.jpg" alt="" class="album"  width="100" height="100" </a> 
<a href="/images/posters/poster8.jpg" rel="lytebox[gallery]" title="Sample photo 3"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster8_thumb.jpg" alt="" class="album" width="100" height="100"  </a> 
<a href="/images/posters/poster9.jpg" rel="lytebox[gallery]" title="Sample photo 4"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster9_thumb.jpg" alt="" class="album"  width="100" height="100" </a> 
<a href="/images/posters/poster10.jpg" rel="lytebox[gallery]" title="Sample photo 5"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster10_thumb.jpg" alt="" class="album" width="100" height="100"  </a> 
<a href="/images/posters/poster11.jpg" rel="lytebox[gallery]" title="Sample photo 6"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster11_thumb.jpg" alt="" class="album"  width="100" height="100" </a> 
<a href="/images/posters/poster12.jpg" rel="lytebox[gallery]" title="Sample photo 7"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster12_thumb.jpg" alt="" class="album" width="100" height="100"  </a> 
<a href="/images/posters/poster13.jpg" rel="lytebox[gallery]" title="Sample photo 8"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster13_thumb.jpg" alt="" class="album" width="100" height="100"  </a> 
<a href="/images/posters/poster14.jpg" rel="lytebox[gallery]" title="Sample photo 9"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster14_thumb.jpg" alt="" class="album"  width="100" height="100" </a> 
<a href="/images/posters/poster15.jpg" rel="lytebox[gallery]" title="Sample photo 10"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster15_thumb.jpg" alt="" class="album" width="100" height="100"  </a> 
<a href="/images/posters/poster16.jpg" rel="lytebox[gallery]" title="Sample photo 11"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster16_thumb.jpg" alt="" class="album" width="100" height="100"  </a>  

Slideshow Example


Sample Code
<a href="/images/posters/poster12.jpg" rel="lyteshow[posters]" title="Sample photo 1"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster12_thumb.jpg" alt="" class="album"  width="100" height="100" </a> 
<a href="/images/posters/poster2.jpg" rel="lyteshow[posters]" title="Sample photo 2"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster2_thumb.jpg" alt="" class="album" width="100" height="100"  </a> 
<a href="/images/posters/poster3.jpg" rel="lyteshow[posters]" title="Sample photo 3"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster3_thumb.jpg" alt="" class="album"  width="100" height="100" </a> 
<a href="/images/posters/poster4.jpg" rel="lyteshow[posters]" title="Sample photo 4"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster4_thumb.jpg" alt="" class="album" width="100" height="100"  </a> 
<a href="/images/posters/poster5.jpg" rel="lyteshow[posters]" title="Sample photo 5"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster5_thumb.jpg" alt="" class="album"  width="100" height="100" </a> 
<a href="/images/posters/poster6.jpg" rel="lyteshow[posters]" title="Sample photo 6"><img style="margin-right: 2px; margin-left: 2px" src="/images/posters/poster6_thumb.jpg" alt="" class="album" width="100" height="100"  </a>