I'm trying to include audio in a fancybox such that when you click an image and it pops-out audio will play as well. However, I don't want to download an external audio player but rather use the one that is currently included on the web page. Basically I simply want to change the audio that is currently playing by loading another MP3.
Here is the code for the audio player that is on the web page:
<div id="audioPlayerContainer" title="Audio Player">
<object type="application/x-shockwave-flash" data="../flash/player_mp3_maxi.swf" width="140" height="20">
<param name="wmode" value="transparent">
<param name="movie" value="../flash/player_mp3_maxi.swf">
<param name="FlashVars" value="configxml=../flash/config.xml&mp3=../audio/intro/intro_08_background_07.mp3">
<p>Flash Audio Player</p>
</object>
</div>
How would I be able to change the audio that is played once the following link is clicked?
<li style="float:left"><img alt="Raj Sharma" src="../images/intro_characters_Raj.png" /></li>
This link has a fancybox script attached to it which is shown below:
<script type="text/javascript">
$(document).ready(function(){
$("#clientPic li a").fancybox();
});
</script>
Here is a working example based on your code snippet, kindly check if this will suit your needs.
HTML:
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<ul style="text-align: center; margin-top: 20px;">
<li><a class="fancybox" href="#inline1" title="Now Playing: Sample 1">Launch Sample 1</a></li>
<li><a class="fancybox" href="#inline2" title="Now Playing: Sample 2">Launch Sample 2</a></li>
<li><a class="fancybox" href="#inline3" title="Now Playing: Sample 3">Launch Sample 3</a></li>
</ul>
<div id="inline1" style="width: auto; display: none;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
<param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
<param name="quality" value="best" />
<embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
<p>Sample 1</p>
</object>
</div>
<div id="inline2" style="width: auto; display: none;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
<param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
<param name="quality" value="best" />
<embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
<p>Sample 2</p>
</div>
<div id="inline3" style="width: auto; display: none;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
<param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
<param name="quality" value="best" />
<embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
<p>Sample 3</p>
</object>
</div>
JS:
$(document).ready(function() {
$('.fancybox').fancybox();
});
So basically there are 3 hidden divs, each with the corresponding players and .mp3. The corresponding div is loaded inside fancybox (See values in href).
Check also this link to see the code in action: http://jsfiddle.net/hNLdk/ Good luck.
Related
I'm trying to create a system in Javascript that allows a user to click on an SVG embedded at 15% x and y size in a left div pane taking up half the page width, and make it appear 100% size in a pane on the right.
The right panel is there, because when I type into that div I see the letters come up. But for some reason the svg won't appear.
Code:
$(document).ready(function() {
if ($("object").parent().attr("class") == "body") {
$("object").attr("width", "15%");
$("object").attr("height", "15%");
} else {
$("object").attr("width", "100%");
$("object").attr("height", "100%");
}
$("#avatar_options object").click(function {
var theObject = $(this);
$("#avatar").html(theObject);
});
});
#avatar_options,
#avatar {
width: 50%;
height: 700px;
position: relative;
float: left;
}
#attr {
position: absolute;
right: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="avatar_options" class="body">
<!-- heels -->
<object id="svg/body_female_heels_african_skin.svg" width="15%" height="15%" data="svg/body_female_heels_african_skin.svg" type="image/svg+xml" alt="dark skin number 1"></object>
<object id="svg/body_female_heels_asian_skin.svg" width="15%" height="15%" data="svg/body_female_heels_asian_skin.svg" type="image/svg+xml" alt="medium skin number 1"></object>
<object id="svg/body_female_heels_blue_skin.svg" width="15%" height="15%" data="svg/body_female_heels_blue_skin.svg" type="image/svg+xml" alt="blue skin"></object>
<object id="svg/body_female_heels_bright_red_skin.svg" width="15%" height="15%" data="svg/body_female_heels_bright_red_skin.svg" type="image/svg+xml" alt="bright red skin"></object>
<object id="svg/body_female_heels_caucasian_light_skin.svg" width="15%" height="15%" data="svg/body_female_heels_caucasian_light_skin.svg" type="image/svg+xml" alt="light skin 1"></object>
<object id="svg/body_female_heels_caucasian_skin.svg" width="15%" height="15%" data="svg/body_female_heels_caucasian_skin.svg" type="image/svg+xml" alt="light skin 2"></object>
<object id="svg/body_female_heels_green_skin.svg" width="15%" height="15%" data="svg/body_female_heels_green_skin.svg" type="image/svg+xml" alt="green skin"></object>
<object id="svg/body_female_heels_indian_skin.svg" width="15%" height="15%" data="svg/body_female_heels_indian_skin.svg" type="image/svg+xml" alt="skin regular red"></object>
<object id="svg/body_female_heels_purple_skin.svg" width="15%" height="15%" data="svg/body_female_heels_purple_skin.svg" type="image/svg+xml" alt="skin purple"></object>
<object id="svg/body_female_heels_tan_skin.svg" width="15%" height="15%" data="svg/body_female_heels_tan_skin.svg" type="image/svg+xml" alt="tan skin"></object>
<object id="svg/body_female_heels_yellow_skin.svg" width="15%" height="15%" data="svg/body_female_heels_yellow_skin.svg" type="image/svg+xml" alt="yellow skin"></object>
<!-- no heels -->
<object id="svg/body_female_noheels_african_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_african_skin.svg" type="image/svg+xml" alt="dark skin number 1"></object>
<object id="svg/body_female_noheels_asian_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_asian_skin.svg" type="image/svg+xml" alt="medium skin number 1"></object>
<object id="svg/body_female_noheels_blue_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_blue_skin.svg" type="image/svg+xml" alt="blue skin"></object>
<object id="svg/body_female_noheels_bright_red_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_bright_red_skin.svg" type="image/svg+xml" alt="bright red skin"></object>
<object id="svg/body_female_noheels_caucasian_light_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_caucasian_light_skin.svg" type="image/svg+xml" alt="light skin 1"></object>
<object id="svg/body_female_noheels_caucasian_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_caucasian_skin.svg" type="image/svg+xml" alt="light skin 2"></object>
<!-- <object id="svg/body_female_noheels_green_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_green_skin.svg" type="image/svg+xml" alt="green skin"></object> -->
<object id="svg/body_female_noheels_indian_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_indian_skin.svg" type="image/svg+xml" alt="skin regular red"></object>
<object id="svg/body_female_noheels_purple_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_purple_skin.svg" type="image/svg+xml" alt="skin purple"></object>
<object id="svg/body_female_noheels_tan_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_tan_skin.svg" type="image/svg+xml" alt="tan skin"></object>
<object id="svg/body_female_noheels_yellow_skin.svg" width="15%" height="15%" data="svg/body_female_noheels_yellow_skin.svg" type="image/svg+xml" alt="yellow skin"></object>
<!-- man body -->
<object id="svg/body_male_african_skin.svg" width="15%" height="15%" data="svg/body_male_african_skin.svg" type="image/svg+xml" alt="dark skin number 1"></object>
<object id="svg/body_male_asian_skin.svg" width="15%" height="15%" data="svg/body_male_asian_skin.svg" type="image/svg+xml" alt="medium skin number 1"></object>
<object id="svg/body_male_blue_skin.svg" width="15%" height="15%" data="svg/body_male_blue_skin.svg" type="image/svg+xml" alt="blue skin"></object>
<object id="svg/body_male_bright_red_skin.svg" width="15%" height="15%" data="svg/body_male_bright_red_skin.svg" type="image/svg+xml" alt="bright red skin"></object>
<object id="svg/body_male_caucasian_light_skin.svg" width="15%" height="15%" data="svg/body_male_caucasian_light_skin.svg" type="image/svg+xml" alt="light skin 1"></object>
<object id="svg/body_male_caucasian_skin.svg" width="15%" height="15%" data="svg/body_male_caucasian_skin.svg" type="image/svg+xml" alt="light skin 2"></object>
<object id="svg/body_male_green_skin.svg" width="15%" height="15%" data="svg/body_male_green_skin.svg" type="image/svg+xml" alt="green skin"></object>
<object id="svg/body_male_indian_skin.svg" width="15%" height="15%" data="svg/body_male_indian_skin.svg" type="image/svg+xml" alt="skin regular red"></object>
<object id="svg/body_male_purple_skin.svg" width="15%" height="15%" data="svg/body_male_purple_skin.svg" type="image/svg+xml" alt="skin purple"></object>
<object id="svg/body_male_tan_skin.svg" width="15%" height="15%" data="svg/body_male_tan_skin.svg" type="image/svg+xml" alt="tan skin"></object>
<object id="svg/body_male_yellow_skin.svg" width="15%" height="15%" data="svg/body_male_yellow_skin.svg" type="image/svg+xml" alt="yellow skin"></object>
</div>
<div id="avatar">
<object id="svg/body_female_noheels_tan_skin.svg_2" width="100%" height="100%" data="svg/body_female_noheels_tan_skin.svg" type="image/svg+xml" alt="tan skin"></object>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$("#avatar_options").on('click', 'span', function() {
$("#avatar").html($("#avatar span").add($(this)));
});
$("#avatar").on('click', 'span', function() {
$("#avatar_options").html($("#avatar_options span").add($(this)));
});
});
#avatar_options,
#avatar {
width: 50%;
height: 700px;
position: relative;
float: left;
}
#attr {
position: absolute;
right: 0;
top: 0;
}
#avatar_options span{
width: 15%;
}
#avatar span {
width: 100%;
}
span {
display: inline-block;
cursor: pointer;
margin-right: 10px;
margin-bottom: 10px;
color: white;
font-size: 20px;
}
.red {
background: red;
}
.blue {
background: blue;
}
.pink {
background: pink;
}
.orange {
background: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="avatar_options" class="body">
<span class="blue"><i class="fa fa-eye"></i></span>
<span class="pink"><i class="fa fa-eye"></i></span>
<span class="orange"><i class="fa fa-eye"></i></span>
<span class="red"><i class="fa fa-eye"></i></span>
</div>
<div id="avatar"></div>
Can't really duplicate your code because I don't have the svg's, but I have attempted to simulate it using spans and font icons. Hope this helps.
Below is my HTML:
<div id="mover">
<img src="images/building3.jpg" width="330" height="150" />
<img src="images/building5.jpg" width="330" height="150" />
<img src="images/building1.jpg" width="330" height="150" />
<img src="images/building4.jpg" width="330" height="150" />
</div>
Using:
document.getelementById("mover");
only gives me this div, how can I get all the images from this div using JavaScript?
Let me know if this works out for you:
<html>
<body>
<div id="mover">
<img src="images/building3.jpg" width="330" height="150" />
<img src="images/building5.jpg" width="330" height="150" />
<img src="images/building1.jpg" width="330" height="150" />
<img src="images/building4.jpg" width="330" height="150" />
</div>
<script>
var imgs = document.getElementById("mover").getElementsByTagName("img");
for (i in imgs) {
if (parseInt(i) > -1) { // check if it is an integer
alert(document.getElementById("mover").getElementsByTagName("img")[i].src);
}
}
</script>
</body>
</html>
I have embedded a flash based video in my HTML and showing it in a modal popup. When I close the popup, I want to programatically stop the playing video. How can I do this? I want to do this with JavaScript or jQuery.
<video controls="controls" loop="loop" poster="#Url.Content("~/Content/videos/Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k.jpg")" width="640" height="360" onclick="if(/Android/.test(navigator.userAgent))this.play();">
<source src="" type="video/mp4" />
<source src="" type="video/webm" />
<source src="" type="video/ogg" />
<object type="application/x-shockwave-flash" data="#Url.Content("~/Content/videos/flashfox.swf")" width="640" height="360" style="position:relative;">
<param name="movie" value="#Url.Content("~/Content/videos/flashfox.swf")" />
<param name="allowFullScreen" value="true" />
<param name="flashVars" value="autoplay=true&controls=true&loop=true&src=" />
<embed src="#Url.Content("~/Content/videos/flashfox.swf")" width="640" height="360" style="position:relative;" flashVars="autoplay=true&controls=true&loop=true&poster=#Url.Content("~/Content/videos/Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k.jpg")&src=#Url.Content("~/Content/videos/Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k.mp4")" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
<img alt="Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k" src="#Url.Content("~/Content/videos/Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k.jpg")" style="position:absolute;left:0;" width="640" height="360" title="Video playback is not supported by your browser" />
</object>
</video>
Working on switching from Flash to a flash player/html5 video player hybrid solution. Using video.js player. I am looking to hide the player and show a div block with javascript upon video finishing. Would anyone know how to trigger this? I have a SWF container and a video container. Anyone have any suggestions?
www.friedmanllp.com/home3.php
Following code:
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="example_video_1" class="video-js" width="545" height="380" controls="controls" preload="auto" poster="http://www.friedmanllp.com/video/video.jpg">
<source src="http://www.friedmanllp.com/video/intro.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="545" height="380" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://www.friedmanllp.com/video/video.jpg", {"url": "http://www.friedmanllp.com/video/intro.mp4","autoPlay":true,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://www.friedmanllp.com/video/video.jpg" width="545" height="380" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
</div>
<div style="display:none; width:545px; height:380px; overflow:hidden;">
<div class="practices_link" style="float:left; margin-bottom:1px; width:95px; height:17px; cursor:pointer;"><img class="practices_on" style="margin-bottom:1px; width:95px; height:17px;" src="images/alt/practices_on.jpg" /><img class="practices_off" style="display:none; margin-bottom:1px; width:95px; height:17px;" src="images/alt/practices_off.jpg" /></div><div style="float:left; margin-bottom:1px; width:355px; height:17px;"><img src="images/alt/blank_alt.gif" style="width:355px; height:17px;"></div><div class="services_link" style="float:left; margin-bottom:1px; width:95px; height:17px;"><img class="services_off" style="margin-bottom:1px; width:95px; height:17px; cursor:pointer;" src="images/alt/services_off.jpg" /><img class="services_on" style="display:none; margin-bottom:1px; width:95px; height:17px; cursor:pointer;" src="images/alt/services_on.jpg" /></div>
<div id="slider">
<div id="practices" style="float:left; top:0; left:0; position:relative;">
<img style="margin-bottom:1px;" src="images/alt/1.jpg" />
<img style="margin-bottom:1px;" src="images/alt/2.jpg" />
<img style="margin-bottom:1px;" src="images/alt/3.jpg" />
<img style="margin-bottom:1px;" src="images/alt/4.jpg" />
<img style="margin-bottom:1px;" src="images/alt/5.jpg" />
<img style="margin-bottom:1px;" src="images/alt/6.jpg" />
</div>
<div id="services" style="float:left; top:-360px; left:545px; position:relative;">
<img style="margin-bottom:1px;" src="images/alt/7.jpg" />
<img style="margin-bottom:1px;" src="images/alt/8.jpg" />
<img style="margin-bottom:1px;" src="images/alt/9.jpg" />
<img style="margin-bottom:1px;" src="images/alt/10.jpg" />
<img style="margin-bottom:1px;" src="images/alt/11.jpg" />
<img style="margin-bottom:1px;" src="images/alt/12.jpg" />
</div>
</div>
</div>
I am looking to hide the player and show a div block with javascript upon video finishing.
Look in the docs of your video player whether it has an event for it; if it doesn't, change players.
JPlayer has events, for example.
I am trying to automatically show images based on what month it is with javascript. I am also using the jquery cycle plugin for the slide show. I originally just had the images within the HTML and everything was copacetic. Now when loading the images source with javascript there is a long pause before the first picture loads up and also after one picture fades out and another fades in. When I originally got the slide show working I had to fuss around with the settings to keep it from having similar long pauses. I'm wondering if the javascript is interfering with the cycle plugin settings (or something else) and if there is a better way to do this (jquery or if my js is just screwy). The clients server doesn't have PHP on it so that's not an option.
Thanks in advance!
Be well!
This calls the function in the further below external js file from the .html file:
<div class="slideshow">
<script type="text/javascript">
retrievePictures();
</script>
</div>
External js file:
function retrievePictures(){
var currentMonth = new Date();
if(currentMonth >= 11 || currentMonth <=4){
//winter
var html = '<img src="images/slider/shuksanWinter.jpg" width="600" height="400" alt="Mt Shuksan in winter" /> <br /><img src="images/slider/breakfastEveryone.jpg" alt="Breakfast" width="600" height="400" /> <br /><img src="images/slider/snowCamp.jpg" width="600" height="400" alt="Snow Camp" /> <br /><img src="images/slider/treesShoer.jpg" width="600" height="400" alt="Snow Shoers in Trees" /> <br /><img src="images/slider/bellRingingSliderLessNoise.jpg" alt="Ringing the bell for breakfast" width="600" height="400" /> <br /><img src="images/slider/poles.jpg" width="600" height="400" alt="Snow Shoeing Poles" /> <br /><img src="images/slider/games.jpg" alt="Game shelves" width="600" height="400" /> <br /><img src="images/slider/tableAbove.jpg" alt="Table setting" width="600" height="400" /> <br /><img src="images/slider/personSlider.jpg" alt="Meal preparation conversation" width="600" height="400" /> <br /><img src="images/slider/kitchenEmpty.jpg" alt="Empty kitchen" width="600" height="400" /> <br />';
document.write(html);
}
else{
//summer
var html = '<img src="images/slider/breakfastEveryone.jpg" alt="Breakfast" width="600" height="400" /> <br /><img src="images/slider/backYardViewPanorama2Slider.jpg" alt="The backyard view" width="600" height="400" /> <br /><img src="images/slider/bellRingingSliderLessNoise.jpg" alt="Ringing the bell for breakfast" width="600" height="400" /> <br /><img src="images/slider/boardWalkSlider.jpg" alt="Picture Lake boardwalk" width="600" height="400" /> <br /><img src="images/slider/bootWallSlider.jpg" alt="Downstairs bootwall" width="600" height="400" /> <br /><img src="images/slider/breakfastCommenceSliderLessNoise.jpg" alt="Dinning room" width="600" height="400" /> <br /><img src="images/slider/breakfastTalk.jpg" alt="Dinning room talk" width="600" height="400" /> <br /><img src="images/slider/bunksDoorways.jpg" alt="Sleeping room doorways" width="600" height="400" /> <br /><img src="images/slider/couple.jpg" alt="Mountaineers!" width="600" height="400" /> <br /><img src="images/slider/dewyGrassSlider.jpg" alt="Morning grass" width="600" height="400" /> <br /><img src="images/slider/dinningViewZoomHighPassVivid.jpg" alt="View from the dinning room" width="600" height="400" /> <br /> <img src="images/slider/games.jpg" alt="Game shelves" width="600" height="400" /> <br /><img src="images/slider/kitchenEmpty.jpg" alt="Empty kitchen" width="600" height="400" /> <br /><img src="images/slider/lodgeLightsMediumHighPassVividLessNoise.jpg" alt="Morning lights at the lodge" width="600" height="400" /> <br /><img src="images/slider/pancakeMakersLessNoise.jpg" alt="Pancake makers" width="600" height="400" /> <br /><img src="images/slider/personSlider.jpg" alt="Meal preparation conversation" width="600" height="400" /> <br /><img src="images/slider/pancakePourLessNoise.jpg" alt="Pouring batter" width="600" height="400" /> <br /><img src="images/slider/pictureLakeSlider.jpg" alt="Picture Lake" width="600" height="400" /> <br /><img src="images/slider/saltSyrupBowlsBrighterLessNoise.jpg" alt="Meal shelves" width="600" height="400" /> <br /><img src="images/slider/wetLandsLessNoise.jpg" alt="Picture Lake" width="600" height="400" /> <br /><img src="images/slider/tableAbove.jpg" alt="Table setting" width="600" height="400" /> <br /><img src="images/slider/windowSillouetteSliderMoreWindowLessNoise.jpg" alt="A view while eating" width="600" height="400" /> <br />';
document.write(html);
}
}
First of all you should change:
var currentMonth = new Date();
To
var currentMonth = new Date().getMonth();