• Registered: 2012-12-04
  • Posts: 3

Topic: To open Juicebox gallery in a lightbox

Hi,

I'm using the Juicebox galleries lite version and I find it very powerful and practical at the same time, perfect for my needs.

Before purchasing the pro-version, I have two questions:

- is it possible to open the juicebox gallery clicking on a link or button, to a lighbox in the same page?

  Eg., here there's the beta version of my portfolio, picnicspot.it/portfolio  , and I would like the gallery to open in a lightbox after clicking on the button "Open Gallery".

- does it work in a multi-language environment, eg. with qTranslate plugin for Wordpress? I need this feature especially to translate titles and captions.

Thank you very much for your attention,

Lorenzo

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

Re: To open Juicebox gallery in a lightbox

is it possible to open the juicebox gallery clicking on a link or button, to a lighbox in the same page?

Juicebox-Pro does not feature any built-in lightbox functionality but it is possible to display a Juicebox gallery in a lightbox such as Shadowbox.
(1) Create a Juicebox gallery with the method of your choice (such as JuiceboxBuilder-Pro).
(2) Upload the complete gallery folder (not just the contents) to your web server.
(3) Include the required Shadowbox files and code on your web page:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

(4) Create a link on your web page to point to your Juicebox gallery's 'index.html' page, setting the 'rel' attribute to 'shadowbox', such as the following:

<a href="http://www.example.com/gallery/index.html" rel="shadowbox">Open Gallery</a>

does it work in a multi-language environment, eg. with qTranslate plugin for Wordpress? I need this feature especially to translate titles and captions.

As far as I am aware, no. Juicebox-Pro will display the titles and captions exactly as they are in the gallery's XML file.
However, WP-Juicebox and qTranslate are both free so you can try it for yourself to check before purchasing Juicebox-Pro.
WP-Juicebox can be downloaded from this web page.

  • Registered: 2012-12-04
  • Posts: 3

Re: To open Juicebox gallery in a lightbox

Dear Steven,

    thank you very much for your quick reply, I appreciate it very much.

The lightbox works perfectly now, with qTranslate I tried in several ways using the language tags but I still haven't succeed finding a proper solution.

Thank you very much for your help!

  • Registered: 2012-12-04
  • Posts: 3

Re: To open Juicebox gallery in a lightbox

Dear Steven,

I'm sorry but I have encountered a new problem I hope you can help me to solve.

As I said the solution you wrote me works perfectly, as you can see in this page: http://www.picnicspot.it/portfolio/crossroads/ clicking on “View gallery.

Here it works, but from the main page of the portfolio http://www.picnicspot.it/portfolio/, if you click in the Crossroads gallery, and then again on the button “View gallery” – which is the same button, same code, as in the portfolio post page here above – the browser opens a new tab but not a lightbox.

I guess this is happening because the link for that portfolio gallery is loaded via AJAX. It is maybe because a Javascript lightbox function like this will only run on initial page load, but at that point the gallery link doesn’t exist. It loads onto the page later via AJAX. I think that some modifications are needed in order that Juicebox can work after this initial page load, but I don't know which code to add, nor where.

If it would work all my problems would be solved, and I could stick directly to Juicebox pro to manage all my galleries.

If you can help suggesting me a solution it would be mostly appreciated,

thank you very much for your attention and sorry for this further question...

my best regards

Lorenzo

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

Re: To open Juicebox gallery in a lightbox

This happens because the link is generated dynamically and the user never leaves the http://www.picnicspot.it/portfolio/ page.
When selecting 'Crossroads' from the http://www.picnicspot.it/portfolio/ page, the user's browser is not redirected to the http://www.picnicspot.it/portfolio/crossroads/ page where the gallery opens via Shadowbox.

You could perhaps find out where, in your WordPress theme's code, the links are being generated and add the required rel="shadowbox" attribute to them.

Also, please see the Advanced section of the Shadowbox Usage support page. Take a look at the Shadowbox.setup section at the bottom of the web page.

You can also use Shadowbox.setup to manually set up link elements for use with Shadowbox. This can be useful, for example, if you have a page that is updated via Ajax with links being created and destroyed dynamically.

6 Reply by AR22 (edited by AR22 2014-02-20 13:17:26)

  • AR22
  • Member
  • Offline
  • Registered: 2014-02-20
  • Posts: 1

Re: To open Juicebox gallery in a lightbox

I'm trying to load the gallery in a shadowbox 3.0.3, but it isn't working properly :( It is only darkening the background but juicebox isn't loading at all. Does anybody can give me a hint?

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Shadowbox</title>
        <meta charset="utf-8" />
        
        <link rel="stylesheet" type="text/css" href="shadowbox.css">
        <script type="text/javascript" src="shadowbox.js"></script>
        <script type="text/javascript">
        Shadowbox.init();
        </script>
        
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <a href="web/index.html" rel="shadowbox"><img src="grey-thumb.jpg" alt="Grey Mustang" class="border"></a>
    </body>
</html>

here is my effort

http://www.file-upload.net/download-863 … 3.zip.html

edit//

Is there a way to put the contend in a shadowbox without the limitation of an iframe, which hides the 'Expand Gallery' button?

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

Re: To open Juicebox gallery in a lightbox

@AR22

Your code is fine.
It looks like the problem is that your version of Shadowbox will open images only (not web pages).
When downloading Shadowbox, make sure you select the checkbox for 'External sites and pages'.

Is there a way to put the contend in a shadowbox without the limitation of an iframe, which hides the 'Expand Gallery' button?

No. A Juicebox gallery must be embedded into a web page and when this web page is loaded into any other container (whether it is an iframe or Shadowbox), the Expand Button will automatically be disabled. This cannot be changed.
(It is not possible to 'embed' a Juicebox gallery directly into a Shadowbox modal window like you can embed a Juicebox gallery into a web page.)