Sunday, 21 December 2014
A+ R A-
 

Lightbox example

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

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>  
 

Reconocimientos y participaciones

 
  • Ponente en el XIV Congreso Iberoamericano VIRTUAL EDUCA O.E.A. – M.E.N.- MINTIC. Medellín junio 2013.
  • Seleccionado como una de las 10 EXPERIENCIAS SIGNIFICATIVAS con uso educativo en TIC, por el portal COLOMBIA APRENDE. Mayo de 2013.
  • Proyecto expuesto virtualmente en la CONFERENCIA MUNDIAL EDUCATIVA. Noviembre de 2012.
  • Ponente en el  CONGRESO IBEROAMERICANO DE ENSEÑANZA MEDIADA POR TECNOLOGIA, organizado por UNAM MEXICO DF, SEPTIEMBRE de 2012.
  • Ponentes en el  XI CONGRESO IBEROAMERICANO DE INFORMATIVA EDUCATIVA, organizado por RIBIE, RIBIECOL, CETICS. Bogotá, Julio de 2012.
  • Proyecto premiado por MICROSOFTT y Ministerio de Educación Nacional como innovador para ser expositor en el IV Foro Latinoamericano de Innovación Educativa en TIC, organizado por Microsoft, Santiago de CHILE, septiembre de 2011.
  • Proyecto ganador en el I Foro Nacional de Innovación Educativa en TIC, organizado por M.E.N.  y Microsoft, Bogotá, junio de 2011.
  • Proyecto ganador de la I Feria Distrital INNOVA DE LAS AMERICAS, organizada por Secretaria de Educación Distrital, Bogotá, octubre de 2010.
  • Proyecto seleccionado por RIBIECOL,  MICROSOFTT y Ministerio de Educación Nacional como innovador para ser expositor en el III Foro Latinoamericano de Innovación Educativa en TIC, organizado por Microsoft en PANAMA. Agosto de 2010.