Colorbox / Lightbox Popup

It is easy to create a popup of higher resolution images. Learn how

We have integrated the colorbox lightbox feature from http://colorpowered.com/colorbox/

Typical use is like so, where you have a link to the high resolution image surrounding the low resolution thumbnail. Repeat multiple times for other images.

Example Code A: rel=colorbox

<p>

<a rel="colorbox" href="/uploads/shared/images/banners/Feminine/bubbles_D6D7D9.gif"><img src="/uploads/shared/images-80x80/banners/Feminine/bubbles_D6D7D9.gif"></a>

<a rel="colorbox" href="/uploads/shared/images/banners/Feminine/butterfly_EFC4CF.gif"><img src="/uploads/shared/images-80x80/banners/Feminine/butterfly_EFC4CF.gif"></a>

<a rel="colorbox" href="/uploads/shared/images/banners/Feminine/hibiscus_D5C5D3.gif"><img src="/uploads/shared/images-80x80/banners/Feminine/hibiscus_D5C5D3.gif"></a>

</p>

Example Code B: custom use of colorbox (for multiple slideshows)

For multiple slideshows please insert the following HTML and JAVASCRIPT code into your page.

Change colorBoxSlide1 to colorBoxSlide2 if you want separate slideshows. 

<p>

<a rel="colorBoxSlide1" href="/uploads/shared/images/banners/Feminine/bubbles_D6D7D9.gif"><img src="/uploads/shared/images-80x80/banners/Feminine/bubbles_D6D7D9.gif"></a>

<a rel="colorBoxSlide1" href="/uploads/shared/images/banners/Feminine/butterfly_EFC4CF.gif"><img src="/uploads/shared/images-80x80/banners/Feminine/butterfly_EFC4CF.gif"></a>

<a rel="colorBoxSlide1" href="/uploads/shared/images/banners/Feminine/hibiscus_D5C5D3.gif"><img src="/uploads/shared/images-80x80/banners/Feminine/hibiscus_D5C5D3.gif"></a>

</p>

<script>  $("a[rel='colorBoxSlide1']").colorbox(); </script>

Customise Further - Effects

OR for an automatic slideshow effect, find even more options on the http://colorpowered.com/colorbox/ website

<script>  $("a[rel='colorBoxSlide1']").colorbox({transition:"fade",slideshow:true}); </script>

Example