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(function()?
I am OK if you suggest another Lightbox or another audio player if you provide example.
LVL 21
viki2000Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Add the following in the head section of your page :
<script type="text/javascript">
    var html5lightbox_options = {
        oncloselightbox: function() {
              jQuery("#amazingaudioplayer-1").data("object").playAudio();
        },
        onshowitem: function() {
              jQuery("#amazingaudioplayer-1").data("object").pauseAudio();
        }
    };
</script>

Open in new window


Be sure amazingaudioplayer-1 is the ID attribute of you player.
0
viki2000Author Commented:
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);
  });
});

Open in new window

0
leakim971PluritechnicianCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
@ 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.
0
viki2000Author Commented:
OK, I prepared a working example.
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>

Open in new window

0
Julian HansenCommented:
I don't hear anything on the linked site.
0
viki2000Author Commented:
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?
<!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>

Open in new window

Here is the 2nd domain used for testing:
http://www.viki2000.xyz/
0
viki2000Author Commented:
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/
0
Julian HansenCommented:
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?
0
leakim971PluritechnicianCommented:
Thanks for the test page.
Replace the current code by the following :
 
   var  html5lightbox_onclose = function() {
    	jQuery("#amazingaudioplayer-1").data("object").playAudio();
    };
    var html5lightbox_onshow = function() {
    	jQuery("#amazingaudioplayer-1").data("object").pauseAudio();
    };
    var html5lightbox_options = {
        oncloselightbox: "html5lightbox_onclose",
        onshowitem: "html5lightbox_onshow"
    };

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
viki2000Author Commented:
@ Julian Hansen
Inside the SWF: „javascript:LightboxGroupLink('slide1')“
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?
0
viki2000Author Commented:
@ 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.
0
leakim971PluritechnicianCommented:
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.
0
viki2000Author Commented:
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?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.