1 Topic by antonputtemans (edited by antonputtemans 2014-03-29 15:31:51)

  • Registered: 2014-03-29
  • Posts: 5

Topic: Open a juicebox in a new page from a Wordpress link?

Hello,

Very glad I found Juicebox! :-)
I am ready to get the Pro version, but first wanted to ask a few questions.

I am building a Wordpress website and I am looking for a better way to display my images than with using WP Jetpacks Carousel. http://jetpack.me/support/carousel/
What I DO like about JP Carousel is that it displays a cool moisaik of images and than clicking on one of those thumbnails takes you to an overlay screen with the same functionality than Juicebox. Only Juicebox looks so much more performant, cleaner and sexier. But most of all Mobile support is a MUST these days (just looking at your Analytics will make you realize)

So basically I am looking for such a concept, thumbnails in a post that take you to a (quasi) fullscreen photoviewer app.
I don't want to embed a Juicebox but just pass the thumbnail image ID and than maybe on another page instead of an overlay the image experience.
Is that possible to do with Juicebox? I have been looking at the JS API and the `showImage()` and `toggleExpand()` look interesting.

What I would like to avoid is having to load the juicebox.js core file on my page with the thumbnails. Is it possible to pass the image id as a parameter maybe? Than init the Juicebox on the new page with the image ID. Some kind of close button to go back to the WP page. I think I saw some sort of Home icon before?

An iFrame option came in my mind, maybe loaded into an overlay, but there seem to be some issues loading Juicebox into an iFrame. There seems to be some flickering during animations, at least here with my Chrome brower.

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

Re: Open a juicebox in a new page from a Wordpress link?

What you are looking to achieve could probably be achieved quite easily without the need to pass any image ids as parameters or use iframes (although it would need to be set up manually and could not be done with the existing WP-Juicebox plugin which is designed to embed Juicebox galleries directly into WordPress pages or posts).

You could create your galleries using JuiceboxBuilder-Pro (on your computer).
Upload the complete gallery folders (not just the contents) to your web server. It does not matter where you upload them to as long as you know where they are.
Just insert image links in your WordPress pages or posts to point to each gallery's 'index.html' file.

For example, if you uploaded a complete gallery folder named 'gallery1' to the root directory of your web server, then you could use an image link such as the following.

<a href="/gallery1/index.html"><img src="/images/thumbnail.jpg" width="80" height="60" alt="thumbnail" /></a>

(You would need to provide a suitable thumbnail image to use as a link.)
When the user clicks on a link, the browser would be redirected to the gallery's 'index.html' page which would display the gallery on a page of its own.
Your gallery could incorporate a Back Button to allow the user to return to the original WordPress page or post containing the link.

... there seem to be some issues loading Juicebox into an iFrame. There seems to be some flickering during animations, at least here with my Chrome brower.

This is a known issue which has already been addressed and will be fixed in the next version of Juicebox. However, just fior the record, there are other limitations of using an iframe which are documented in the 'Using an iframe' support section here.

I hope this helps.

  • Registered: 2014-03-29
  • Posts: 5

Re: Open a juicebox in a new page from a Wordpress link?

I Steven and thank you for the quick reply!

Ok I have been giving this some thought and have also been reading the excellent documentation.
Your idea of having a JB outside the Wordpress environment is not bad at second though.
I said second because of course this defeats the purpose of using Wordpress as a CMS, after all I would like my client to be able to manage his content and also images from WP.

But looking at the PRO options I could write a PHP page that spits out the XML file using `configUrl: 'config.php'
Config.php would have to access the WP database and write the nodes of a certain gallery, created by the client in the backend.
I still have to do some research on how to do that but it's a good idea.
So basically in a WP page or post I link my thumbnails to for example:

<a href="/photos/?id=6"><img src="wp-content/uploads/image5.jpg" /></a>

That way a page with a 100% Juicebox with all the photos I want to show is accessible from mysite.com/photos/ and a specific ID could be passed with PHP's GET. I could pass this with a technique I used before like this:

<?php
    // capture image ID with GET, check if it's an integer
    $img_id = isset($_GET['id']) ? (int) $_GET['id'] : null;
    if (!$img_id) {
          // if the ID is not set or not an integer, use the first image ID
          $img_id = 0;
          // NOTE: JB will automatically default to 0 when the ID is out of range, example ID 1000
    }
?>
<!DOCTYPE html>
<html lang="en">
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            var img_id = <?php echo json_encode($img_id); ?>;
            new juicebox({
                containerId: 'juicebox-container',
                firstImageIndex: img_id
            });
        </script>
        <div id="juicebox-container"></div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>

When a GET variable is provided (clicking on a thumbnail in a post or page) I could show a home / back button.

What do you think, would that work?

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

Re: Open a juicebox in a new page from a Wordpress link?

Yes. You could effectively upload a single instance of a Juicebox gallery somewhere and feed it a unique dynamically-generated XML file using PHP and passing a gallery id depending on the link that has been clicked.
This is essentially what WP-Juicebox does. The PHP file which dynamically generates the gallery's XML file in the plugin is named 'config.php. The 'gallery_id' attribute in the Juicebox shortcode is passed to the 'config.php' file as a query string parameter.

You would just need to create (and link to) a PHP gallery page (essentially an HTML page containing a 100% x 100% gallery), $_GET the 'gallery_id' query string parameter from the link and pass this along to the PHP page you use as your configUrl.

The PHP page you use as your configUrl would need to construct an XML file with the correct format and would possibly need to take into consideration thumbnails and captions as well as the main images.

  • Registered: 2014-03-29
  • Posts: 5

Re: Open a juicebox in a new page from a Wordpress link?

Thanks so much for the info.
I just tried 

http://localhost/WPtest/wp-content/plugins/wp-juicebox/config.php?gallery_id=1

And it outputs the XML perfectly.

So you are saying I could feed this file with the `configUrl` option??

            new juicebox({
                configUrl: 'http://localhost/WPtest/wp-content/plugins/wp-juicebox/config.php?gallery_id=1 '
            })
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Open a juicebox in a new page from a Wordpress link?

You could not use the WP-Juicebox 'config.php' file for your own needs out of context (the file will work only within the confines of the plugin) but the concept of passing a parameter to a PHP page via a query string in the configURL is fine.
Using the actual 'config.php' file from WP-Juicebox would not work because when WP-Juicebox sets the configUrl to 'config.php?gallery_id=1' (for example), the 'config.php' page parses a static XML file (depending on the value of the 'gallery_id') to determine factors such as where the images should come from (Media Library, Flickr, NextGEN, Picasa) and what WordPress page or post the gallery is embedded into. Your own galleries will not have these static XML files with such variables. They are generated by WP-Juicebox only for galleries created by the plugin.

You would need to construct your own PHP file to fetch images from your own source and build your own XML file accordingly.