1 Topic by eud (edited by eud 2024-04-15 16:37:53)

  • eud
  • Member
  • Offline
  • Registered: 2024-04-14
  • Posts: 2

Topic: Redirection Issues on Different Platforms Juicebox Pro 1.5.1 [SOLVED]

Hello,

I am encountering an issue with Juicebox that manifests differently depending on the platform used. The default index page generated works perfectly. However, when I create a custom HTML page by incorporating the provided embed code for Juicebox to display my titles and tabs, I face a problem.

On this custom page, when I click on "view gallery," I encounter a redirection issue on iOS devices, while everything works as expected on Android. Instead of following the expected redirection to index.html#expanded, iOS attempts to load full.html from the jbcore directory, resulting in a 404 error. This file indeed exists on the server, but it seems that the path is not interpreted in the same way by iOS.

Analysis of the Problem:

URL Handling by iOS/Safari: It appears that Safari on iOS processes URL paths differently compared to Chrome on Android. This might include stricter rules for resolving relative paths or anchors, which could explain why iOS fails to redirect correctly to the expected page.
Request for Assistance:

I would like to understand why this behavior differs between platforms and how I could adjust my configuration or code to ensure a consistent user experience across all devices. Your help in resolving this issue would be greatly appreciated, especially considering my commitment as a pro license holder.
Thank you in advance for your help and time.

I've sent a ZIP file containing my web page. Please review it to help troubleshoot the redirection issue on iOS.

website for test https://pellicule.000webhostapp.com/

video test youtube : https://www.youtube.com/watch?v=ddJDI09cj8k

Thanks,
Best regards,
eud

Post's attachments

websitetestgalleryexampleerrorjuicebox.zip 255.82 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.
  • Registered: 2012-04-24
  • Posts: 5,906

Re: Redirection Issues on Different Platforms Juicebox Pro 1.5.1 [SOLVED]

Looking at the embedding code on your webpage, I see a couple of problems.

(1) You have two <div id="juicebox-container"> containers. Each and every id should be unique. There should be no duplicates.

(2) The embedding code is inside one of the <div id="juicebox-container"> containers. This is most likely what is causing the error 404. Make sure that your embedding code is outside your <div id="juicebox-container"> container. (Just renaming the id for the first <div id="juicebox-container"> container should be enough to resolve your problem).

Try changing the Juicebox code on your web page from:

      <div id="juicebox-container">
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
        new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(34,34,34,1)"
        });
        </script>
        <div id="juicebox-container">
        <!-- Image gallery content for non-javascript devices -->
        <noscript>
        <h1>Pellicule</h1>
        <p></p>
        <p><img src="images/pexels-gabriel-frank-16248641.jpg" title="pexels-gabriel-frank-16248641" alt="" /><br>pexels-gabriel-frank-16248641 </p>
        <p><img src="images/pexels-marvin-nast-21038400.jpg" title="pexels-marvin-nast-21038400" alt="" /><br>pexels-marvin-nast-21038400 </p>
        </noscript>
        </div>
        <!--END JUICEBOX EMBED--></div>

... to:

<div id="jb-container">
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(34,34,34,1)"
        });
    </script>
    <div id="juicebox-container">
        <!-- Image gallery content for non-javascript devices -->
        <noscript>
            <h1>Pellicule</h1>
            <p></p>
            <p><img src="images/pexels-gabriel-frank-16248641.jpg" title="pexels-gabriel-frank-16248641" alt="" /><br>pexels-gabriel-frank-16248641 </p>
            <p><img src="images/pexels-marvin-nast-21038400.jpg" title="pexels-marvin-nast-21038400" alt="" /><br>pexels-marvin-nast-21038400 </p>
        </noscript>
    </div>
    <!--END JUICEBOX EMBED-->
</div>

All I've done is rename the first instance of <div id="juicebox-container"> to <div id="jb-container">. This ensures that each id is unique and it prevents the embedding code from being inside a container with an id of 'juicebox-container' (which is the name of the Juicebox container as specific by the containerId in the embedding code).

I hope this helps.

  • eud
  • Member
  • Offline
  • Registered: 2024-04-14
  • Posts: 2

Re: Redirection Issues on Different Platforms Juicebox Pro 1.5.1 [SOLVED]

thank you very much this solved my problem :)

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

Re: Redirection Issues on Different Platforms Juicebox Pro 1.5.1 [SOLVED]

I'm glad it worked.
Thank you for letting me know.