1 Topic by rabid (edited by rabid 2017-12-16 09:47:35)

  • Registered: 2017-12-12
  • Posts: 10

Topic: Multiple Galleries - Audio duplicated as they are opened

Hi,
I have a multiple folder gallery using JAlbum.
I have chosen an audio file to play and wish this to also start on loading the gallery.
The problem is that when I click on different folders in the tree it is apparent that another instance of the MP3 is loaded and with time you can hear several MP3s playing simultaneously but a tiny bit out of sync.
Due to the quiet nature of the start of the MP3 this doesn't really become apparent until a few minutes when the beat finally kicks in. It can also be confirmed by the fact that when you click the audo off floating button the music still plays because it is only shutting down one copy of the MP3.
On the old simpleviewer gallery this didn't happen.
Many thanks
A

http://www.kinzamusic.co.uk/kinzagaller … 20Gallery/

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple Galleries - Audio duplicated as they are opened

The SimpleViewer skin for jAlbum used a third-party audio player embedded in the main album page so the audio track did not change when new galleries were selected.
The Juicebox skin does not feature a third-party audio player and, as you have discovered, adding an audio track to each individual Juicebox gallery will result in the audio tracks overlapping each other when new galleries are selected.

Unfortunately, there is no Juicebox-Pro API method to specifically stop audio from playing. There is just a toggleAudio() method and no way to easily track the status of the audio (to determine whether it is playing or not). The only way I've found to stop audio from one gallery before loading another relies on the Button Bar being visible in the galleries (to check if the Audio Button has the '.jb-status-playing' class) and invloves iterating over all '.jb-bb-btn-audio' elements to stop those that are playing.

Try opening your album's 'index.html' file and the following code immediately after the function loadContent(galleryPath, galleryCount) { line:

if (jb) {
    $('.jb-bb-btn-audio').each(function() {
        if ($(this).hasClass('jb-status-playing')) {
            jb.toggleAudio();
        }
    });
}

(You can add this code to the skin's template 'index.htt' file if you like and the code will automatically be included in the album's 'index.html' file each time you edit or create a new project.)

I hope this helps.

  • Registered: 2017-12-12
  • Posts: 10

Re: Multiple Galleries - Audio duplicated as they are opened

Thanks.
That's a bummer as my site really is a music site.
I'll try the work around you have suggested. Failing that I'll have to try another skin I guess.
When I open my gallery structure I notice that there is index.html...index2.html up to index6.html. Is it just the index.html that I need to change?

Thanks again.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple Galleries - Audio duplicated as they are opened

I'll try the work around you have suggested.

The workaround should work fine. I tested it myself before posting it. Hopefully it will be a suitable solution for you.

When I open my gallery structure I notice that there is index.html...index2.html up to index6.html. Is it just the index.html that I need to change?

That's strange. When creating an album with the Juicebox skin, there should be only one 'index.html' file (in the root output directory). The skin should not generate additional index pages (like 'index2.html', 'index3.html', etc.). Such files are usually generated by skins that do not display all images on a single page and split the images over a number of different pages. I'm wondering if maybe your additional index pages are remnants of having made an album with a different skin before switching to Juicebox (and are actually redundant and do not play a part in the Juicebox album). Otherwise, I'm really not sure what settings would cause the Juicebox skin to generate more than one index page.
In any case, it is the 'index.html' file in the root output directory that you should add the code to (or the skin's template 'index.htt' file if you want the code to automatically be included in all albums made by the skin).

  • Registered: 2017-12-12
  • Posts: 10

Re: Multiple Galleries - Audio duplicated as they are opened

Thanks
I finally got around to looking at this again.
The html files appear quite different. Perhaps this is a new thing in the latest JAlbum?
you can see below the start of the first couple of index files (1-3, there are 6 in total). quite different.
in the main index.html you can see that I have added the code you suggested above, yet it doesnt seem to have worked. Have i entered it correctly?
Thanks

index.html
<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="description" content="" />
            <meta property="og:description" content="" />
            <meta property="og:image" content="" />
            <meta property="og:title" content="Kinza Gallery" />
            <meta property="og:type" content="website" />
            <meta property="og:url" content="" />
            <script src="res/juicebox/jbcore/juicebox.js" type="text/javascript" charset="utf-8"></script>
                <link rel="stylesheet" type="text/css" href="res/jstree/dist/themes/default/style.min.css" />   
                <script src="res/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
                <script src="res/jstree/dist/jstree.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"><!--//--><![CDATA[//><!--
                var jb;
               
                    function doLayout() {
                        var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
                        var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width(), 10);
                        var menuWidth = parseInt($('#menu').outerWidth(true), 10);
                        var galleryWidth = windowWidth - menuWidth;
                        $('#gallery').height(windowHeight);
                        $('#gallery').width(galleryWidth);
                        $('#menu').height(windowHeight);
                    }
                    function loadContent(galleryPath, galleryCount) {
if (jb) {
    $('.jb-bb-btn-audio').each(function() {
        if ($(this).hasClass('jb-status-playing')) {
            jb.toggleAudio();
        }
    });
}
                        if (parseInt(galleryCount, 10) > 0) {
                            jb = new juicebox({
                                backgroundColor: "rgba(34,34,34,1.0)",
                               
                                    baseUrl: galleryPath,
                                configUrl: "config.xml",
                                containerId: "juicebox-container",
                                debugMode: "false",
                                galleryHeight: "100%",
                                galleryWidth: "100%",
                                themeUrl: "res/juicebox/jbcore/classic/theme.css"
                            });
                        } else {
                            $('#juicebox-container').html('<div id="text"><h1>Kinza Gallery</h1><br /><h2></h2><br /><h3>(This folder contains no images.)</h3></div>');
                        }
                    }
                        function openAll() {
                            $('#tree').jstree(true).open_all(null, 200);
                        }
                        function closeAll() {
                            $('#tree').jstree(true).close_all(null, 200);....................................
index2.html
<!doctype html>
<!--[if lt IE 8]><html lang="en" class="no-js ie7 oldie"><![endif]-->
<!--[if IE 8]><html lang="en" class="no-js ie8 oldie"><![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <!--[if lt IE 11]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <title>Kinza Gallery</title>
    <meta name="keywords" content="">
    <link rel="stylesheet" href="res/common.css?v=3.3">
    <link rel="shortcut icon" href="res/favicon.ico">
    <link rel="icon" href="res/favicon-32x32.png">
    <!--[if IE]><link rel="shortcut icon" href="res/favicon.ico"><![endif]-->
    <meta name="msapplication-TileImage" content="res/favicon-32x32.png">
    <meta name="robots" content="index,follow">
    <script src="res/modernizr-2.6.2.min.js"></script>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">
<link rel="alternate" href="album.rss" type="application/rss+xml"/>
</head>
<body id="index">
    <!--[if lt IE 8]><p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> to better experience this site.</p><![endif]-->

   
    <div id="main">
       
       
        <div id="navigation">
            <div class="top-nav">
                <ul><li><a href="Childrens Ward On The Asylum/index.html">Childrens Ward On The Asylum</a></li><li><a href="Battersea Power Station/index.html">Battersea Power Station</a></li><li><a href="Defunct MOD Jet Engine Research Facility/index.html">Defunct MOD Jet Engine Research Facility</a></li><li><a href="Animal Research Facility/index.html">Animal Research Facility</a></li><li><a href="Blue Orbs/index.html">Blue Orbs</a></li><li><a href="WP Mental Hospital/..........................

index3.html
<!doctype html>
<!--[if lt IE 8]><html lang="en" class="no-js ie7 oldie"><![endif]-->
<!--[if IE 8]><html lang="en" class="no-js ie8 oldie"><![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <!--[if lt IE 11]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <title>Kinza Gallery</title>
    <meta name="keywords" content="">
    <link rel="stylesheet" href="res/common.css?v=3.3">
    <link rel="shortcut icon" href="res/favicon.ico">
    <link rel="icon" href="res/favicon-32x32.png">
    <!--[if IE]><link rel="shortcut icon" href="res/favicon.ico"><![endif]-->
    <meta name="msapplication-TileImage" content="res/favicon-32x32.png">
    <meta name="robots" content="index,follow">
    <script src="res/modernizr-2.6.2.min.js"></script>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">
<link rel="alternate" href="album.rss" type="application/rss+xml"/>
</head>
<body id="index">
    <!--[if lt IE 8]><p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> to better experience this site.</p><![endif]-->

   
    <div id="main">
       
       
        <div id="navigation">
            <div class="top-nav">
                <ul><li><a href="Childrens Ward On The Asylum/index.html">Childrens Ward On The Asylum</a></li><li><a href="Battersea Power Station/index.html">Battersea Power Station</a></li><li><a href="Defunct MOD Jet Engine Research Facility/index.html">Defunct MOD Jet Engine Research Facility</a></li><li><a href="Animal Research Facility/index.html">Animal Research Facility</a></li><li><a href="Blue Orbs/index.html">Blue Orbs</a>................

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple Galleries - Audio duplicated as they are opened

As I suspected (and noted in my post above), index.html is generated by the Juicebox skin but index2.html onwards have been created by a different skin (but I do not know which one).
It looks like you may have created an album with a certain (unknown) skin, then switched to the Juicebox skin and remade your album (without changing your output directory). The Juicebox skin generated a new index.html file (overwriting the original index.html file from having made the album with the original skin) and stopped there (as the Juicebox skin does not need any more HTML pages). The additional index2.html, index3.html, etc. files are redundant remnants from the use of the original skin and can safely be deleted (or just ignored). They do not play a part in the Juicebox album.
If you make a fresh album with the Juicebox skin (and use a new empty folder as your output directory), you'll see that index2.html, index3.html, etc. files are not generated.

As I noted above, just open your album's 'index.html' file and place the following code immediately after the function loadContent(galleryPath, galleryCount) { line:

if (jb) {
    $('.jb-bb-btn-audio').each(function() {
        if ($(this).hasClass('jb-status-playing')) {
            jb.toggleAudio();
        }
    });
}

This should hopefully work fine.

  • Registered: 2017-12-12
  • Posts: 10

Re: Multiple Galleries - Audio duplicated as they are opened

Thanks Steven
I have added the code as you suggest but the problem persists. Can you check my code here and tell me if it looks right?
Thanks

index.html
<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="description" content="" />
            <meta property="og:description" content="" />
            <meta property="og:image" content="" />
            <meta property="og:title" content="Kinza Gallery" />
            <meta property="og:type" content="website" />
            <meta property="og:url" content="" />
            <script src="res/juicebox/jbcore/juicebox.js" type="text/javascript" charset="utf-8"></script>
                <link rel="stylesheet" type="text/css" href="res/jstree/dist/themes/default/style.min.css" />   
                <script src="res/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
                <script src="res/jstree/dist/jstree.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript"><!--//--><![CDATA[//><!--
                var jb;
               
                    function doLayout() {
                        var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
                        var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width(), 10);
                        var menuWidth = parseInt($('#menu').outerWidth(true), 10);
                        var galleryWidth = windowWidth - menuWidth;
                        $('#gallery').height(windowHeight);
                        $('#gallery').width(galleryWidth);
                        $('#menu').height(windowHeight);
                    }
                    function loadContent(galleryPath, galleryCount) {
if (jb) {
    $('.jb-bb-btn-audio').each(function() {
        if ($(this).hasClass('jb-status-playing')) {
            jb.toggleAudio();
        }
    });
}
                        if (parseInt(galleryCount, 10) > 0) {
                            jb = new juicebox({
                                backgroundColor: "rgba(34,34,34,1.0)",
                               
                                    baseUrl: galleryPath,
                                configUrl: "config.xml",
                                containerId: "juicebox-container",
                                debugMode: "false",
                                galleryHeight: "100%",
                                galleryWidth: "100%",
                                themeUrl: "res/juicebox/jbcore/classic/theme.css"
                            });
                        } else {
                            $('#juicebox-container').html('<div id="text"><h1>Kinza Gallery</h1><br /><h2></h2><br /><h3>(This folder contains no images.)</h3></div>');
                        }
                    }
                        function openAll() {
                            $('#tree').jstree(true).open_all(null, 200);
                        }
                        function closeAll() {
                            $('#tree').jstree(true).close_all(null, 200);....................................

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple Galleries - Audio duplicated as they are opened

It looks like you have placed the code in the correct place in your 'index.html' file so it should work fine.

I have just double-checked my suggestion and it seems to work OK for me.
I created a multi-gallery album with jAlbum 15.1.3 and the Juicebox skin v1.5.1, giving each gallery an audioUrlMp3 and setting playAudioOnLoad to TRUE.

Without any modifications, the audio tracks play over each other when new galleries are selected from the side menu (as expected).
After adding the code:

if (jb) {
    $('.jb-bb-btn-audio').each(function() {
        if ($(this).hasClass('jb-status-playing')) {
            jb.toggleAudio();
        }
    });
}

... at the very beginning of the loadContent(galleryPath, galleryCount) function, the audio track from the current gallery stops before the audio from the newly selected gallery starts (again, as expected).

Try clearing your browser's cache to be sure that your browser is using your updated 'index.html' file.
I have just viewed the album page you posted in your original post above and it seems to work OK. I can clearly hear the audio from one gallery stop before the audio from a new gallery starts.
Please remember that the audio tracks are linked to individual galleries and there is no easy way to have a single audio track play (and continue to play) whilst switching between different galleries. (You'd need to manually embed a third-party audio player into your 'index.html' file to do this.)

  • Registered: 2017-12-12
  • Posts: 10

Re: Multiple Galleries - Audio duplicated as they are opened

Oh ok, I get you. I misunderstood. So this means the track will restart each time the gallery is changed.
Ok, so you think there might be a way of adding a third party audio player into the index.html file in order to achieve what I am after? I'll research that. Thanks again

  • Registered: 2017-12-12
  • Posts: 10

Re: Multiple Galleries - Audio duplicated as they are opened

Ok, in case anyone is looking at this thread for similar challenges....
add this to the end of your index.html page and it will just autoplay your chosen track, and keep playing with each gallery change...

<audio>
<audio controls autoplay>
<source src='Audio-file.mp3' type='audio/mp3'>
Your browser does not support the audio tag.
</audio>

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Multiple Galleries - Audio duplicated as they are opened

That should certainly work (as the browser never moves away from the 'index.html' page whilst switching between different galleries).
My suggestion should still come in useful for anyone who assigns a different audio track for each individual gallery within an album (via Juicebox's own audio functionality) but adding a single audio track to the album's 'index.html' page (using an HTML 5 <audio> tag) is a great solution for a continuous audio track which does not change when different galleries are selected.
Thanks for sharing!