tutorial_34_example_1.html

<!-- depends on jQuery which must have been loaded before these lines -->
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js"></script>

<script>
  jQuery(document).ready(function($) {
    $('a[rel*=facebox]').facebox({
          loadingImage : '/facebox/loading.gif',
          closeImage   : '/facebox/closelabel.png'
    });
  })
</script>

<p>Click on the thumbnail to view to full image</p>
<br>

<p>
<a href="/assets/slideshow_1.png" rel="facebox"><img src="/assets/slideshow_1.png" alt="Slideshow Image 1" width="100px"/></a>
  Heidelberg Saturday Market
<p>

<p>
<a href="/assets/slideshow_2.png" rel="facebox"><img src="/assets/slideshow_2.png" alt="Slideshow Image 2" width="100px" /></a>
  Heidelberg Altstadt and River
</p>

<p>
<a href="/assets/slideshow_3.png" rel="facebox"><img src="/assets/slideshow_3.png" alt="Slideshow Image 3" width="100px" /></a>
  Bronze mice by the Old Bridge in Heidelberg
</p>

<p>
<a href="/assets/slideshow_4.png" rel="facebox"><img src="/assets/slideshow_4.png" alt="Slideshow Image 4" width="100px" /></a>
  Houses in Bad Wimpfen
</p>