• Registered: 2017-06-30
  • Posts: 1

Topic: Need help with my gallery

When i try to watch the gallery by url everything works fine. (www.mywebsite.cc/gallery.html)
But when i will open it IN my website by button. And run with ajax," ajax.run('gallery/index.html , 'content')" i'll get a blanc page. No errors or something.

Who knows the problem.

Im from the netherlands, explain in dutch is much easyer for me ;)

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

Re: Need help with my gallery

If you need to display your gallery on demand (when a button is clicked), then I would recommend one of the following.


(1) To display the gallery on a page of its own, use a regular HTML link (an <a> tag) to open the gallery's 'index.html' page. You can incorporate a Back Button in your gallery to allow users to return to the original web page.

or...

(2) To display the gallery within your web page alongside other content, wrap the gallery's embedding code inside a JavaScript function and call the function when required.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' page.
Load the 'index.html' page in your browser and you'll see that the gallery is displayed when the 'Load Gallery' button is clicked.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <title>Test</title>
    </head>
    <body>
        <div id="link">
            <input id="load" type="button" value="Load Gallery" />
        </div>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            function loadGallery() {
                new juicebox({
                    containerId: "juicebox-container",
                    galleryHeight: "400",
                    galleryWidth: "600"
                });
            }
            $(document).ready(function() {
                $('#load').click(function() {
                    loadGallery();
                });
            });
        </script>
        <div id="juicebox-container"></div>
    </body>
</html>