JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film
Freestyle Logo

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Using FancyBox to display a SET of images

Click on the image to see an example of displaying a SET of images in a FancyBox presentation. You can use the return or keyboard arrow keys or scroll the mouse wheel vertically or horizontally to navigate to the next image. Fancybox will display a caption under the photo that is defined in the title="Caption" attribute for the anchor <a ...> html tag.

Copy and paste this code in the head of your HTML. If you are using a DW Template paste it after <!-- InstanceBeginEditable name="head" --> and before <!-- InstanceEndEditable -->.


<!-- Needed by FancyBox -->
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/minified.js"></script><!--ONLY ONE of these on the page-->
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/mousewheel.js"></script>
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/fancybox/fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancybox.pack.js?v=2.1.3"></script>
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/fancybox/fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancyboxCustom.js"></script>

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 image/1.jpg, the first photo, which is embedded on the page. Select and copy the code below and paste it into your html page. Adjust it as needed for your purpose - ESPECIALLY THE CAPTIONS.


<a rel="imageGroup" title="Caption 1" href="../images/1.jpg"><img src="../images/1.jpg"></a>
<a rel="imageGroup" title="Caption 2" href="../images/2.jpg"></a> <!--no image actually inserted, just the link-->
<a rel="imageGroup" title="Caption 3" href="../images/3.jpg"></a> <!--no image actually inserted, just the link-->
<a rel="imageGroup" title="Caption 4" href="../images/4.jpg"></a>
<a rel="imageGroup" title="Caption 5" href="../images/5.jpg"></a>
<a rel="imageGroup" title="Caption 6" href="../images/6.jpg"></a>
<a rel="imageGroup" title="Caption 7" href="../images/7.jpg"></a>
<a rel="imageGroup" title="Caption 8" href="../images/8.jpg"></a>
<a rel="imageGroup" title="Caption 9" href="../images/9.jpg"></a>
<a rel="imageGroup" title="Caption 10" href="../images/10.jpg"></a>