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:
- Create a unique webpage with an image and audio with no controls but autoplaying
- 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)
- 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)
- 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.
- Create audio into two formats .mp3 and .ogg and use the HTML5 Audio code with NO controls
- 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
- Move the .mp3 and .ogg files into your Websites/project#/media folder
- 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> - Adjust the pasted code with the right audio file name to match YOUR audio file name
- 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
- 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
- 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.
- 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">
- Adjust the javascript parameters to customize the display of the webpage
- 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> - 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>
- 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 -->.