Latest Examples

"Captioned" - Photo Credit Caption on Rollover

This method will allow you to give credit for a photo or provide a description when the user hovers over the image:

Just put the image in a <div> like this:
<div title="Students sitting in a circle - photo by ___" class="captioned">
<img title="Students sitting in a circle - photo by ___" alt="Students sitting in a circle" src="/uploadedImages/Images/Approved/560x150/throughbodies_560.jpg" />
</div>

"Preview" - Class for Zoom Effect

Just add class="preview" to a large image and this will make it small, and when you roll over it you will see the full version. You can see an example of this on the Communications Site.

<div>
<img src="/uploadedImages/Images/Approved/900x320/librarycurve_900.jpg" alt="library" title="library" class="preview" />
<br />
<img title="discussion" alt="discussion" src="/uploadedImages/Images/Approved/560x150/blondediscuss_560.jpg" class="preview" />
<br />
<img title="bus stop couple" alt="bus stop couple" src="/assets/0/2147483752/2147483838/2147483860/82faa45a-25fd-40ca-b768-bbe32000c5f4.jpg" class="preview" />
<br />
<img title="blond guy staring" alt="blond guy staring " src="/uploadedImages/Images/Approved/730x320/blondguystare_730.jpg" class="preview" />
</div>

"Thumbviewer" - Preview Class for Fixed Position Zoom

We also recommend using the Horizontal Thumbviewer when you have more than 6-8 images. Just add class="thumbviewer horizontal" to the img tag to get this effect.

Put all of your images into a <div> using the "thumbviewer" class, and this will show them all lined up on the left.

Roll over each of them to see the full version. Note how each image shows their "title" underneath.

<div class="thumbviewer">
<img src="/assets/0/2147483752/2147483838/2147483862/a69514f6-5764-4d44-b5c7-1132855b7109.jpg"
alt="bikerbylib_560" title="bikerbylib_560" />
<img src="/uploadedImages/Images/Approved/560x150/blondediscuss_560.jpg"
title="blondediscuss_560" alt="blondediscuss_560" />
<img src="/assets/0/2147483752/2147483838/2147483860/82faa45a-25fd-40ca-b768-bbe32000c5f4.jpg"
title="busstopcouple_900" alt="busstopcouple_900"  />
<img src="/uploadedImages/Images/Approved/730x320/blondguystare_730.jpg"
title="blondguystare_730" alt="blondguystare_730"  />
<img src="/assets/0/2147483752/2147483838/2147483862/e3694a93-4e6e-4881-ba7c-28d52ea23051.jpg"
alt="bridgechurch_560" title="bridgechurch_560" />
<img src="/uploadedImages/Images/Approved/560x150/blondediscuss_560.jpg"
title="blondediscuss_560" alt="blondediscuss_560"  />
<img src="/assets/0/2147483752/2147483838/2147483860/82faa45a-25fd-40ca-b768-bbe32000c5f4.jpg"
title="busstopcouple_900" alt="busstopcouple_900"  />
<img src="/uploadedImages/Images/Approved/730x320/blondguystare_730.jpg"
title="blondguystare_730" alt="blondguystare_730"  />
</div>

"Draggable" - Class for Very Large Images

</div>

Click and drag, or zoom to view the mural.
You can view the full image here.