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