FANCYBOX STARTER CODE

The code below is for how you make the connection between the html and javascript fancybox.

The KEY to the connection is rel="imageGroup" attribute which basically alerts fancybox that there exists a family of photos that needs to be displayed as a group or family. Think of rel="imageGroup" as assigning a family surname to a set of photos just like your family surname is the same for all your family members. The fancybox javascript will be called into action by clicking on spread1.jpg, the first photo, which has a thumbnail embedded on the page.

Fancybox will display a caption under the photo that is defined in the title="Caption" attribute for the anchor <a ...> html tag.

Select and copy the code below and paste it into book.html as directed in class.

<a rel="imageGroup" title="Book Title by Your Name" href="../book/cover.jpg"><img src="../book/cover_thumbnail.jpg" width="200" height="133"></a>
<a rel="imageGroup" title="Spread caption 1" href="../book/spread1.jpg"></a> <!--no image actually inserted, just the link-->
<a rel="imageGroup" title="Spread caption 2" href="../book/spread2.jpg"></a> <!--no image actually inserted, just the link-->
<a rel="imageGroup" title="Spread caption 3" href="../book/spread3.jpg"></a> <!--no image actually inserted, just the link-->
<a rel="imageGroup" title="Spread caption 4" href="../book/spread4.jpg"></a>
<a rel="imageGroup" title="Spread caption 5" href="../book/spread5.jpg"></a>
<a rel="imageGroup" title="Spread caption 6" href="../book/spread6.jpg"></a>
<a rel="imageGroup" title="Spread caption 7" href="../book/spread7.jpg"></a>
<a rel="imageGroup" title="Spread caption 8" href="../book/spread8.jpg"></a>
<a rel="imageGroup" title="Spread caption 9" href="../book/spread9.jpg"></a>
<a rel="imageGroup" title="Spread caption 10" href="../book/spread10.jpg"></a>
<a rel="imageGroup" title="Spread caption 11" href="../book/spread11.jpg"></a>
<a rel="imageGroup" title="Spread caption 12" href="../book/spread12.jpg"></a>
<a rel="imageGroup" title="Spread caption 13" href="../book/spread13.jpg"></a>