Useful Stuff About:
Using FancyBox to display a SINGLE IMAGE
Click on the image to see an example of displaying a SINGLE IMAGE in a FancyBox presentation that will display a caption under the photo that is defined in the title="Caption" attribute for the anchor <a ...> html tag.
Here's how to do this:
- 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> - Create a thumbnail and a large version (max dimensions of width = 1500 px and height = 1000 px) of your image.
- Move the thumbnail and large version into your Websites/project#/images folder
- Insert the thumbnail into your page. Then link the thumbnail to the large version of the photo. Then in DW code view, alter the <a href="../images/photoFileName.jpg"> by adding class="singleImage" to get this <a href="../images/photoFileName.jpg" class="singleImage">
- To add a caption under the photo display, alter the <a href="../images/photoFileName.jpg" class="singleImage"> by adding title="Caption of image" to get this <a href="../images/photoFileName.jpg" class="singleImage" title="Caption of image" >
The KEY to the connection is class="singleImage" attribute which basically alerts fancybox that there exists a SINGLE photo that needs to be displayed.