Starlite Pretty Photo Documentation

Starlite pretty photo plugin is based on pretty photo jquery plugin which is jQuery lightbox clone. It supports images, it also supports for videos, flash, YouTube, iframes and Vimeo. In this way, it is a robust lightbox.

This is a system plugin so you can use in your articles, modules, components everywhere!!!

How To Use It?

1. Single image. In order to achieve this you need to do :
   1. Create a link.
   2. Add the rel attribute "prettyPhoto" to it i.e. (rel="prettyPhoto"). Provide full size image path to the HREF.
   3. If you want to show title in the opened lightbox then you need to add ALT attribute to your thumbnail image. Similarly, in order to show description, you need to add title in HREF link attribute. So in this way the complete syntax would be like
      <a href='FULL_SIZE_IMAGE_PATH' title='DESCRIPTION_IN_LIGHTBOX' rel='prettyPhoto' ><img src='THUMBNAIL_PATH' alt='TITLE_OF_LIGHTBOX'/></a>
2. Slideshow image gallery. In order to achieve this you need to do :
   1. Same syntax as Single image but you need to group rel attribute(rel=prettyphoto). So the complete syntax would be like
      

      <a href='FULL_SIZE_IMAGE_PATH' title='DESCRIPTION_IN_LIGHTBOX' rel='prettyPhoto[GALLERY_NAME]' ><img src='THUMBNAIL_PATH' alt='TITLE_OF_LIGHTBOX'/></a>

3. Flash. In order to achieve this you need to do :
   1. Create a link.
   2. Add the rel attribute "prettyPhoto" to it i.e. (rel="prettyPhoto"). Provide SWF path to the HREF. Then add the width and height as parameters in your HREF (?width=100&height=100).
   3. If you want to show title in the opened lightbox then you need to add ALT attribute to your thumbnail image. Similarly, in order to show description, you need to add title in HREF link attribute.
      So in this way the complete syntax would be like
      <a href='SWF_PATH?width=WIDTH&height=HEIGHT' title='DESCRIPTION_IN_LIGHTBOX' rel='prettyPhoto' ><img src='THUMBNAIL_PATH' alt='TITLE_OF_LIGHTBOX'/></a>
4. Youtube. In order to achieve this you need to do :
   1. Here you need to change the HREF link so it points to the YouTube video page. So the complete syntax would be like
      <a href='YOUTUBE_VIDEOURL' title='DESCRIPTION_IN_LIGHTBOX' rel='prettyPhoto' ><img src='THUMBNAIL_PATH' alt='TITLE_OF_LIGHTBOX'/></a>
5. Vimeo. In order to achieve this you need to do :
   1. Here you need to change the HREF link so it points to the Vimeo video page. So the complete syntax would be like
      <a href='VIMEO_VIDEOURL' title='DESCRIPTION_IN_LIGHTBOX' rel='prettyPhoto' ><img src='THUMBNAIL_PATH' alt='TITLE_OF_LIGHTBOX'/></a>
6. QuickTime. In order to achieve this you need to do :
   1. Create a link.
   2. Add the rel attribute "prettyPhoto" to it i.e. (rel="prettyPhoto"). Provide .MOV path to the HREF. Then add the width and height as parameters in your HREF (?width=100&height=100).
   3. If you want to show title in the opened lightbox then you need to add ALT attribute to your thumbnail image. Similarly, in order to show description, you need to add title in HREF link attribute.
      So in this way the complete syntax would be like
      <a href='MOV_PATH?width=WIDTH&height=HEIGHT' title='DESCRIPTION_IN_LIGHTBOX' rel='prettyPhoto' ><img src='THUMBNAIL_PATH' alt='TITLE_OF_LIGHTBOX'/></a>
7. Iframe(Extenal link). In order to achieve this you need to do :
   1. Create a link.
   2. Add the rel attribute "prettyPhoto" to it i.e. (rel="prettyPhoto"). Provide the external link in the HREF. Then add the iframe, width and height as parameters in your HREF (?iframe=true&width=100&height=100). Please note that the dimensions can be percent based.
   3. If you want to show title in the opened lightbox then you need to add ALT attribute to your thumbnail image. Similarly, in order to show description, you need to add title in HREF link attribute.
      So in this way the complete syntax would be like
      <a href='IFRAME_PATH?iframe=true&width=WIDTH&height=HEIGHT' title='DESCRIPTION_IN_LIGHTBOX' rel='prettyPhoto' ><img src='THUMBNAIL_PATH' alt='TITLE_OF_LIGHTBOX'/></a>
8. Inline content. In order to achieve this you need to do :
   1. Create a link.
   2. Add the rel attribute "prettyPhoto" to it i.e. (rel="prettyPhoto"). Provide ID of the inline content you want to open in to the HREF link
   3. If you want to show title in the opened lightbox then you need to add ALT attribute to your thumbnail image. Similarly, in order to show description, you need to add title in HREF link attribute.
      So in this way the complete syntax would be like
      <a href='#INLINE_CONTENT_ID' title='DESCRIPTION_IN_LIGHTBOX' rel='prettyPhoto' ><img src='THUMBNAIL_PATH' alt='TITLE_OF_LIGHTBOX'/></a>
      <div id="INLINE_CONTENT_ID" style='display:none;' >CONTENT_GOES_HERE</div>