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:

Display Photo with Audio Background

Click in thumbnail below to see an example of displaying a photo in FancyBox with audio background

Here's how you can do this:

  1. Create a unique webpage with an image and audio with no controls but autoplaying
    1. Create a new html page and save it in the same location as the trigger page (i.e. photo1.html in your Websites/project#/pages folder)
    2. Create an internal style for the <body> with properties of
      • margin:0; (to remove the default 10px of margin around the body content)
      • text-align:center; (to center the image on the page)
      • background-color:#000 (or whatever color you like)
    3. Create your large photo with maximum dimensions of 1000x750 px with filename for example photo1.jpg saved in your Websites/project#/images, then insert your image onto the page.

  2. Create audio into two formats .mp3 and .ogg and use the HTML5 Audio code with NO controls
    1. Create the audio as an .mp3 and use the application Audio Converter to create the .ogg version with the exact same file name such as photo1.mp3 and photo1.ogg
    2. Move the .mp3 and .ogg files into your Websites/project#/media folder
    3. Copy the code below and paste it in Code View under the code for the image on your webpage you created in step 1 above.

      <audio autoplay>
      <source src="../media/photo1.mp3" type="audio/mpeg"><!--for non-Firefox browsers-->
      <source src="../media/photo1.ogg" type="audio/ogg"><!--for Firefox browsers-->
      Your browser does not support HTML5 Audio<!--this displays if neither of the above can be played-->
      </audio>
    4. Adjust the pasted code with the right audio file name to match YOUR audio file name

  3. On the trigger page (the page which has the text or image link to click on to display the photo), create a text or thumbnail image link to activate the FancyBox display
    1. Once you have inserted the text/photo onto your trigger page, link it to the target page (i.e. photo1.html) that you created in step 1 above
    2. In DW code view, alter the <a href="photo1.html"> tag by adding an id="uniqueID" like this <a href="photo1.html" id="photo1Link">. This ID will trigger FancyBox to go into action when the link is clicked.
    3. To add a caption under the photo, in DWcode view, alter the <a href="photo1.html" id="photo1Link"> by adding title="Title of Photo" like this <a href="photo1.html" id="photo1Link" title=Title of Photo">

  4. Adjust the javascript parameters to customize the display of the webpage
    1. If you have ONE text/image link to trigger a display, copy and paste the following code in DW code view of the trigger page in the <head> of the page. 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">
      $(document).ready(function() {
      $("#photo1").fancybox({//change photo1 to the ID of the parent link in step 3 above if needed
      width : 1000,//change 1000 to the width of the photo
      height : 750,//change 750 to the height of the photo
      padding : 3,//this is the width of the white border around the photo, change this if you wish
      fitToView : false,
      autoSize : false,
      openEffect : 'fade',
      closeEffect : 'fade',
      'type' : 'iframe'
      });
      });
      </script>
    2. If you have MORE THAN ONE text/image link ON THE SAME PAGE to trigger different photos to display, copy and paste the following code in DW code view of the trigger page in the <head> of the page. 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">
      $(document).ready(function() {

      $("#photo1").fancybox({//change photo1 to the ID of the parent link in step 3 above if needed
      width : 1000,//change 1000 to the width of the photo
      height : 750,//change 750 to the height of the photo
      padding : 3,//this is the width of the white border around the photo, change this if you wish
      fitToView : false,
      autoSize : false,
      openEffect : 'fade',
      closeEffect : 'fade',
      'type' : 'iframe'
      });

      $("#photo2").fancybox({//change photo2 to the ID of the parent link in step 3 above if needed
      width : 1000,//change 1000 to the width of the photo
      height : 750,//change 750 to the height of the photo
      padding : 3,//this is the width of the white border around the photo, change this if you wish
      fitToView : false,
      autoSize : false,
      openEffect : 'fade',
      closeEffect : 'fade',
      'type' : 'iframe'
      });

      $("#photo3").fancybox({//change photo3 to the ID of the parent link in step 3 above if needed
      width : 1000,//change 1000 to the width of the photo
      height : 750,//change 750 to the height of the photo
      padding : 3,//this is the width of the white border around the photo, change this if you wish
      fitToView : false,
      autoSize : false,
      openEffect : 'fade',
      closeEffect : 'fade',
      'type' : 'iframe'
      });

      //add more blocks of similar code above for each unique photo page you want to display
      });
      </script>