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-4650 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

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:

  1. 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>
  2. Create a thumbnail and a large version (max dimensions of width = 1500 px and height = 1000 px) of your image.
  3. Move the thumbnail and large version into your Websites/project#/images folder
  4. 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">
  5. 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.