1 (edited by roatan 2019-06-22 22:46:42)

Topic: Last image goes to an html [SOLVED]

Hi

Can Juicebox

In the last image in a slide show.
Open a html without user clicking? I do not know what you would call this an automatic forward or something like that.

You were very good in solving the last question I had. But this is different.

Thank you
Bob Millsaps

Re: Last image goes to an html [SOLVED]

This is not something that Juicebox was designed to do but it should be possible with help from the Juicebox-Pro API.

You'll need to edit your gallery's embedding code, though.
There are no configuration options which you can set to make this happen.

If you want to redirect the user to a custom web page when the last image in the gallery has been reached, then try something like this:

<script type="text/javascript">
    var jb = new juicebox({
        backgroundColor: "rgba(0,0,0,1)",
        containerId: "juicebox-container",
        galleryHeight: "100%",
        galleryWidth: "100%"
    });
    jb.onInitComplete = function() {
        var imageCount = jb.getImageCount();
        jb.onImageChange = function(e) {
            if (e.id === imageCount) {
                window.location.href = 'http://www.example.com';
            }
        };
    };
</script>

If you want to introduce a delay (so that the last image can be seen for a set amount of time before the redirection happens), then try the following, changing the delay time of 5s (500ms) to whatever you like:

<script type="text/javascript">
    var jb = new juicebox({
        backgroundColor: "rgba(0,0,0,1)",
        containerId: "juicebox-container",
        galleryHeight: "100%",
        galleryWidth: "100%"
    });
    jb.onInitComplete = function() {
        var imageCount = jb.getImageCount();
        jb.onImageChange = function(e) {
            if (e.id === imageCount) {
                window.setTimeout(function() {
                    window.location.href = 'http://www.example.com';
                }, 5000);
            }
        };
    };
</script>

If you want the redirection to happen only when the last image has been reached via AutoPlay (and not by user navigation), then try the following, which also includes the delay:

<script type="text/javascript">
    var jb = new juicebox({
        backgroundColor: "rgba(0,0,0,1)",
        containerId: "juicebox-container",
        galleryHeight: "100%",
        galleryWidth: "100%"
    });
    jb.onInitComplete = function() {
        var imageCount = jb.getImageCount();
        jb.onImageChange = function(e) {
            if (e.id === imageCount && $('.jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) {
                window.setTimeout(function() {
                    window.location.href = 'http://www.example.com';
                }, 5000);
            }
        };
    };
</script>

I hope this helps and points you in the right direction.

3 (edited by roatan 2019-06-23 18:26:20)

Re: Last image goes to an html [SOLVED]

Hi

When u say:
You'll need to edit your gallery's embedding code, though.

I need a little help on what this means.

Is it the config.xml page or which page do you refer to?

And where in the page do you embed it?

Remember I use Adobe Dreamweaver, Lightroom then Juicebox.

Thank you
bob

Re: Last image goes to an html [SOLVED]

If you are not manually embedding your gallery into an existing web page alongside other content, then you are likely using the 'index.html' web page which is generated by JuiceboxBuilder-Pro (or the Juicebox Plugin for Lightroom).
The gallery's embedding code can be found inside this 'index.html' file (and you can open the 'index.html' file in a plain text editor to view and/or modify the gallery's embedding code).

As an example, open your https://www.roatan.photos/video-slideshows/flowers/blooming/index.html file in a plain text editor and scroll down to line 24 and you'll find the following <script> ... </script> section:

<script>
    new juicebox({
        backgroundColor: "rgba(0,0,0,1)",
        containerId: "juicebox-container",
        galleryHeight: "100%",
        galleryWidth: "100%"
    });
</script>

It is this section of code that you should replace with one of the suggested code samples from my post above.
I've added your custom background color and gallery dimensions to the code samples above so you can just do a quick copy and paste without too many modifications. Just change the URL that you want to open when the last image has been reached in the following line of code:

window.location.href = 'http://www.example.com'; line.

So basically, just replace the code between the <script src="jbcore/juicebox.js"></script> tag and the opening <div id="juicebox-container"> tag in the gallery's 'index.html' file with one of the code samples above.

Re: Last image goes to an html [SOLVED]

Hi

It worked perfectly!

Thanks a bunch
Bob

Re: Last image goes to an html [SOLVED]

That's great!
I'm glad you've got it working.