jQuery Document and HTML5 Lightbox
I use Amazing Audio Player to play a background music in my HTML5 webpage which contains a flash menu. When an element from flash menu is clicked then an HTML5Lightbox pops up and plays a local mp4 video.
Everything works, only that when the Lightbox pops up and the mp4 video starts, I would need the Amazing Audio Player to pause and when the Lightbox is closed then the Amazing Audio Player to continue.
I found Amazing Audio Player API Events, but I do not know how to integrate that with HTML5 Lightbox when pops up or is closed.
Any suggestions?
Where shall I embed the jQuery(document).ready(fun
I am OK if you suggest another Lightbox or another audio player if you provide example.
Everything works, only that when the Lightbox pops up and the mp4 video starts, I would need the Amazing Audio Player to pause and when the Lightbox is closed then the Amazing Audio Player to continue.
I found Amazing Audio Player API Events, but I do not know how to integrate that with HTML5 Lightbox when pops up or is closed.
Any suggestions?
Where shall I embed the jQuery(document).ready(fun
I am OK if you suggest another Lightbox or another audio player if you provide example.
ASKER
And where do I have to place next code from here?:
jQuery(document).ready(function(){
jQuery("#amazingaudioplayer-1").bind("amazingaudioplayer.played", function(event, index){
console.log(index);
});
jQuery("#amazingaudioplayer-1").bind("amazingaudioplayer.paused", function(event, index){
console.log(index);
});
jQuery("#amazingaudioplayer-1").bind("amazingaudioplayer.stopped", function(event, index){
console.log(index);
});
jQuery("#amazingaudioplayer-1").bind("amazingaudioplayer.playprogress", function(event, data){
console.log(data);
console.log(data.current);
console.log(data.duration);
});
jQuery("#amazingaudioplayer-1").bind("amazingaudioplayer.switched", function(event, data){
console.log(data);
console.log(data.previous);
console.log(data.current);
});
});
please read my previous answer one more time.
if you don't see where, you probably need a coder to do the job for you.
Best Regards.
if you don't see where, you probably need a coder to do the job for you.
Best Regards.
@ viki2000
Where are you creating your lightbox - somewhere in your code you are binding the lightbox to an element.
Leakim's example covers what you need but to implement it you first need to find where you are creating your lightbox - that is where you add the code.
If you are confused - post your full listing and we can give you some pointers.
Where are you creating your lightbox - somewhere in your code you are binding the lightbox to an element.
Leakim's example covers what you need but to implement it you first need to find where you are creating your lightbox - that is where you add the code.
If you are confused - post your full listing and we can give you some pointers.
ASKER
OK, I prepared a working example.
Here is the live webpage:
http://viki2000.host22.com/
And here is the code used:
Here is the live webpage:
http://viki2000.host22.com/
And here is the code used:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test HTML5Lightbox</title>
<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function LightboxGroupLink(id) {
var href = document.getElementById(id).getAttribute('href');
html5Lightbox.showItem(href);
}
</script>
<style type="text/css">
</style>
<!-- Insert to your webpage before the </head> -->
<script src="audioplayerengine/jquery.js"></script>
<script src="audioplayerengine/amazingaudioplayer.js"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-1.css">
<script src="audioplayerengine/initaudioplayer-1.js"></script>
<!-- End of head section HTML codes -->
<script type="text/javascript">
var html5lightbox_options = {
oncloselightbox: function() {
jQuery("#amazingaudioplayer-1").data("object").playAudio();
},
onshowitem: function() {
jQuery("#amazingaudioplayer-1").data("object").pauseAudio();
}
};
</script>
</head>
<body>
<a id="slide1" href="https://www.youtube.com/watch?v=H2rvxOnWKfk" class="html5lightbox" data-group="slideshow" title="YouTube 1"></a>
<a id="slide2" href="https://www.youtube.com/watch?v=EETbzEJQfZg" class="html5lightbox" data-group="slideshow" title="YouTube 2"></a>
<a id="slide3" href="images/Flower3.jpg" class="html5lightbox" data-group="slideshow" title="Photo 3"></a>
<a id="slide4" href="images/Flower4.jpg" class="html5lightbox" data-group="slideshow" title="Photo 4"></a>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="200" id="FlashID" title="Flowers">
<param name="movie" value="Flowers.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flowers.swf" width="600" height="200">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-1" style="display: block; position: absolute; width: 300px; height: auto; margin: 0px auto 0px; top: 250px; left: 0px;">
<ul class="amazingaudioplayer-audios" style="display:none;">
<li data-artist="" data-title="Sound" data-album="" data-info="" data-image="" data-duration="60">
<div class="amazingaudioplayer-source" data-src="audios/Sound.mp3" data-type="audio/mpeg" />
</li>
</ul>
</div>
<!-- End of body section HTML codes -->
</body>
</html>
I don't hear anything on the linked site.
ASKER
I tested it on Firefox and Chrome and Opera with different computers and it is working.
Just try to refresh your page after the advertising of the free hosting disappears.
Or try like this:
http://www.viki2000.host22.com/
I changed only the position of the script in html5 header code, but the code is the same. It seems that the audio player is loading faster.
Do you still have problems in hearing the sound?
http://www.viki2000.xyz/
Just try to refresh your page after the advertising of the free hosting disappears.
Or try like this:
http://www.viki2000.host22.com/
I changed only the position of the script in html5 header code, but the code is the same. It seems that the audio player is loading faster.
Do you still have problems in hearing the sound?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test HTML5Lightbox</title>
<!-- Insert to your webpage before the </head> -->
<script src="audioplayerengine/jquery.js"></script>
<script src="audioplayerengine/amazingaudioplayer.js"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-1.css">
<script src="audioplayerengine/initaudioplayer-1.js"></script>
<!-- End of head section HTML codes -->
<script type="text/javascript">
var html5lightbox_options = {
oncloselightbox: function() {
jQuery("#amazingaudioplayer-1").data("object").playAudio();
},
onshowitem: function() {
jQuery("#amazingaudioplayer-1").data("object").pauseAudio();
}
};
</script>
<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function LightboxGroupLink(id) {
var href = document.getElementById(id).getAttribute('href');
html5Lightbox.showItem(href);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<a id="slide1" href="https://www.youtube.com/watch?v=H2rvxOnWKfk" class="html5lightbox" data-group="slideshow" title="YouTube 1"></a>
<a id="slide2" href="https://www.youtube.com/watch?v=EETbzEJQfZg" class="html5lightbox" data-group="slideshow" title="YouTube 2"></a>
<a id="slide3" href="images/Flower3.jpg" class="html5lightbox" data-group="slideshow" title="Photo 3"></a>
<a id="slide4" href="images/Flower4.jpg" class="html5lightbox" data-group="slideshow" title="Photo 4"></a>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="200" id="FlashID" title="Flowers">
<param name="movie" value="Flowers.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flowers.swf" width="600" height="200">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-1" style="display: block; position: absolute; width: 300px; height: auto; margin: 0px auto 0px; top: 250px; left: 0px;">
<ul class="amazingaudioplayer-audios" style="display:none;">
<li data-artist="" data-title="Sound" data-album="" data-info="" data-image="" data-duration="60">
<div class="amazingaudioplayer-source" data-src="audios/Sound.mp3" data-type="audio/mpeg" />
</li>
</ul>
</div>
<!-- End of body section HTML codes -->
</body>
</html>http://www.viki2000.xyz/
ASKER
Any suggestions why the proposed code does not pause/play the audio player when the HTML5Box Lightbox opens/closes?
Do you need more info from my side?
You may look with Firebug on Firefox to see how the code is implemented on
http://www.viki2000.xyz/
Do you need more info from my side?
You may look with Firebug on Firefox to see how the code is implemented on
http://www.viki2000.xyz/
The code is not being called.
If you paste t he pause / play code into the console window it does pause and play the audio - so the functionality is there.
The setting of the html5lightbox_options also appears to be correct according to documentation and what is in the .js file.
How are you invoking the html5lightbox from the SWF?
If you paste t he pause / play code into the console window it does pause and play the audio - so the functionality is there.
The setting of the html5lightbox_options also appears to be correct according to documentation and what is in the .js file.
How are you invoking the html5lightbox from the SWF?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@ Julian Hansen
Inside the SWF: „javascript:LightboxGroupL
I use Aleo 3d flash slideshow creator to generate the flash menu.
@ leakim971
The code is working now.
I have some questions related with proposed solution.
1) From where did you know the options of the html5box?
I looked at other Lightboxes free on internet and they have explicit the events of open and close. But the help page of html5box does not show that, or at least I could not see it.
2) If I use other Lightboxes, would be the same/similar code?
Just a simple internet search shows for example next free Lightboxes: Colorbox, Lightbox2, Lightbox++, Lightboxme, Fancybox...
Could you recommend which one is suitable to play local MP4 videos?
I was thinking at Fancybox with MediaElement after seeing this example and this example and to get rid of html5box not being totally free.
Any other suggestions?
How would modify then the proposed code?
Inside the SWF: „javascript:LightboxGroupL
I use Aleo 3d flash slideshow creator to generate the flash menu.
@ leakim971
The code is working now.
I have some questions related with proposed solution.
1) From where did you know the options of the html5box?
I looked at other Lightboxes free on internet and they have explicit the events of open and close. But the help page of html5box does not show that, or at least I could not see it.
2) If I use other Lightboxes, would be the same/similar code?
Just a simple internet search shows for example next free Lightboxes: Colorbox, Lightbox2, Lightbox++, Lightboxme, Fancybox...
Could you recommend which one is suitable to play local MP4 videos?
I was thinking at Fancybox with MediaElement after seeing this example and this example and to get rid of html5box not being totally free.
Any other suggestions?
How would modify then the proposed code?
ASKER
@ leakim971
Could you please answer at least at my 1st question above?
From where did you know the options of the html5box?
I looked at other Lightboxes free on internet and they have explicit the events of open and close. But the help page of html5box does not show that, or at least I could not see it.
Could you please answer at least at my 1st question above?
From where did you know the options of the html5box?
I looked at other Lightboxes free on internet and they have explicit the events of open and close. But the help page of html5box does not show that, or at least I could not see it.
1) by reading the code.
2) it seems SOME others are better documented, when you choose a plugin, you check documentation to see if it will allow you to do what you want. If no documentation or it seems to miss something your application require, you move to another plugin.
2) it seems SOME others are better documented, when you choose a plugin, you check documentation to see if it will allow you to do what you want. If no documentation or it seems to miss something your application require, you move to another plugin.
ASKER
Thank you for your help and final suggestions.
Where exactly did you read the code in order to find the options of the html5box? In which webpage and/or with what tools? Something like Firebug in original html5box webpage examples?
Where exactly did you read the code in order to find the options of the html5box? In which webpage and/or with what tools? Something like Firebug in original html5box webpage examples?
Open in new window
Be sure amazingaudioplayer-1 is the ID attribute of you player.