Pretty Photo Galleries & Slideshows

Source: www.no-margin-for-errors.com

If missing styles or portions of the viewports, ensure mixed content (or secure content) when prompted by your browser, to show all content on the page.

Scripts and Styles

<!-- prettyPhoto CSS --> 
<link rel="stylesheet" type="text/css" href="%globals_asset_url:502594%" media="screen" />

<!-- jquery prettyPhoto Plugin --> 
<script type="text/javascript" src="%globals_asset_url:502582%"></script>

Page Script

At bottom of page:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

Single Image

<a href="./?a=12345" rel="prettyPhoto" title="This is the description">
<img src="./?a=12345" alt="This is the title%" height="100" width="100" /></a>

Flash Content

<a href="./?a=12345?width=550&height=435" rel="prettyPhoto[flash]" title="This is the title">
<img src="./?a=12345" height="50" width="50" /></a>

Quicktime Content

<a href="./?a=12345?width=640&height=340" title="This is the title" rel="prettyPhoto[movies]">
<img src="./?a=502834" height="50" width="50" /></a>

You Tube Content

<a href="#" rel="prettyPhoto" title="">
<img src="./?a=502834" height="50" width="50" /><h;/a>

Iframe Content

Charles Sturt University

<a href="#?iframe=true&width=900&height=600" rel="prettyPhoto[iframes]">Link Title</a>

Inline Content (Popup)

<a href="#inline-1" rel="prettyPhoto">
<img src="./?a=502834" height="50" width="50" /></a>
<div id="inline-1" class="hide">
 <p>Popup Content</p>
</div>