Topic: Juicebox and Slide Show Pro Director

First, I am excited about Juicebox. I have been a user of sv builder in the past. My problem is that my wife has a family blog, done in wordpress and she will have 100 - 300 images per post of family events. We have tried using the wp gallery and it is just too cumbersome. I have also tried the next gallery and did not care for it either.

I do like ssp director for managing the images, but I don't like the output being in flash.

So my hope is that I can use Juicebox for the previewing engine and tie that to the ssp director image database.

Any thoughts would be appreciated.

Thanks
Terry

Re: Juicebox and Slide Show Pro Director

I am not familiar with Slide Show Pro Director so perhaps someone else can help you out there.

However, an alternative method of embedding a Juicebox gallery in a WordPress post would be to:
(1) Create your Juicebox gallery with the method of your choice: http://www.juicebox.net/support/creation/
(2) Upload your entire gallery folder (not just the contents) to your web server
(3) Embed the gallery in a post by using one of the two methods described here: http://www.juicebox.net/support/embeddi … ery-folder

Re: Juicebox and Slide Show Pro Director

Or use the WP-Juicebox Plugin for WordPress: http://www.juicebox.net/support/wp-juicebox/

Re: Juicebox and Slide Show Pro Director

Hi Terry,
I was checking whether it is possible to display albums from slideshowpro director in Juicebox. Basically, it is only necessary to translate the xml generated by slideshowpro director in the format used by Juicebox.
I wrote a quick php script that does this which you can find below.

<?php 
$baseURL = $_GET['baseURL'];
$parameters = array(
    'album' => $_GET['album'],
    'w' => $_GET['w'],
    'h' => $_GET['h'],
    's' => $_GET['s'],
    'q' => $_GET['q'],
    'sh' => $_GET['sh'],
    'tw' => $_GET['tw'],
    'th' => $_GET['th'],
    'ts' => $_GET['ts'],
    'tlw' => $_GET['tlw'],
    'tlh' => $_GET['tlh'],
    'tq' => $_GET['tq'],
    'tsh' => $_GET['tsh'],
    'pw' => $_GET['pw'],
    'ph' => $_GET['ph'],
    'aps' => $_GET['aps'] );


header('Content-type: application/xml');
$doc = new DOMDocument('1.0', 'iso-8859-1');
$sourceURL = $baseURL . "/images.php?" . http_build_query($parameters);
$doc->load( $sourceURL ); 

$images = array();

$xmlimages = $doc->getElementsByTagName( "img" );
foreach( $xmlimages as $xmlimage ) 
{ 
$images[] = array( 'id' => $xmlimage->getAttribute('id'),
                   'src' => $xmlimage->getAttribute('src'),
                   'file' => $xmlimage->getAttribute('file'),
                   'tn' => $xmlimage->getAttribute('tn'),
                   'tnsm' => $xmlimage->getAttribute('tnsm'),
                   'dims' => $xmlimage->getAttribute('dims'),
                   'fp' => $xmlimage->getAttribute('fp'),
                   'target' => $xmlimage->getAttribute('target'), 
                   'tags' => $xmlimage->getAttribute('tags'));
} 

$dom = new DOMDocument('1.0', 'UTF-8');
$dom->formatOutput = true;
 
$r = $dom->createElement( "juiceboxgallery" );
$dom->appendChild( $r );
 
foreach( $images as $image )
{
 $b = $dom->createElement( "image" );
 
 $title = $dom->createElement( "title" );
 $title->appendChild(  $dom->createTextNode( $image['tag'] ) );
 $b->appendChild( $title );

 $b->setAttribute( "imageURL", $baseURL . "/p.php?a=" . $image['src'] );
 $b->setAttribute( "thumbURL", $baseURL . "/p.php?a=" . $image['tn']  );
 $b->setAttribute( "linkURL", $baseURL . "/p.php?a=" . $image['src'] );
 $b->setAttribute( "linkTarget", $image['target'] );

 
 $r->appendChild( $b );
 }
 
 echo $dom->saveXML();
 $dom->save("config.xml")
?> 

put this script as config.php (needs php5) into the same folder as your Juicebox html file.
In the html file change the configURL add the URL encoded URL of your ssp_director installation in the last option

        <script src="jbcore/juicebox.js"></script>
        <script>
            new juicebox({
                containerId : 'juicebox-container',
                configUrl : 'config.php?album=7&w=800&h=600&s=0&q=80&sh=1&tw=100&th=100&ts=0&tlw=50&tlh=50&tq=60&tsh=1&pw=54&ph=40&aps=0&baseURL=http%3A%2F%2Fdomain.name%2Fssp_director' 
            });

        </script>

The parameters determine the album number and the sizes of images and thumbnails. The script still needs some polishing, but worked for me. I will add more in case I find time ;)

UrsusMaritimus

Re: Juicebox and Slide Show Pro Director

@UrsusMaritimus

Thank you for sharing! Hopefully others will be able to benefit from it.

6 (edited by nbreslow 2012-07-23 19:05:09)

Re: Juicebox and Slide Show Pro Director

Hi,

First - great script and thanks for sharing it with everyone.  I am a Slideshow Pro Director/Player user who is also looking to use Director to manage content and Juicebox to display it.  I ran into an issue and have a question or two so hopefully someone can help...

1) I followed the instructions to a T and have had partial success.  The config.php script runs successfully and the config.xml based on my SSP Director content is created.  However it does not pass the newly generated config.xml through to Juicebox - the slideshow never appears and I am left with the spinner.  I know the config.xml generated from SSP Director is created properly because I can re-set the configURL to 'config.xml' and the SSP Director content loads fine.  I am no coder but it seems like there might be something missing at the end of the config.php script posted that will echo the newly created config.xml path so it loads?  Any thoughts?

2)  I wanted to make one tweak to the SSP configURL posted here and was hoping someone could help.  I am hoping to structure my setup as follows:

-Index page that contains a series of links to albums.  The links pass the album variable via php through the url.  Example link:

http://www.mydomainname.com/portfolio.viewer.php?album=11

-Viewer page that contains one Juicebox instance.  The embed code takes the album variable from the url.  Example:

configUrl : 'config.php?album=(GET ALBUM NUMBER FROM URL)&w=800&h=600&s=0&q=80&sh=1&tw=100&th=100&ts=0&tlw=50&tlh=50&tq=60&tsh=1&pw=54&ph=40&aps=0&baseURL=http%3A%2F%2Fdomain.name%2Fssp_director'

I am wondering what I would have to change in the configUrl (where I wrote (GET ALBUM NUMBER FROM URL)) to make this happen?  Something like: $ _GET["album"]?  Would I wrap it in brackets or parenthesis?  Not sure.

3) I was hoping that the original author of the script could post a link or explain what the variables in his configUrl mean in regards to what is being requested from SSP Director.  I understand the basic ones like w (width) and h (height), but some of the others (pw and ph?) are a bit of a mystery.  Also, are captions supported in the script?  If not, could they be?

Great stuff and I hope to hear back - looking forward to getting this up and running.  Thanks in advance,

-Nick

PS: You can see my current setup using SSP Director and SSP Flash Player here: http://www.nicholasbreslow.com/photography.html.  It is basically the same setup as what I am going for in #2 above except I will be using Juicebox on the viewer page.

Re: Juicebox and Slide Show Pro Director

@nbreslow

1) Please post the URL to your non-functioning gallery so that I can take a look.
I might be able to figure out why you see only the spinner.

2) Try:

configUrl : 'config.php?album=<?php echo $_GET["album"]; ?>&w=800&h=600&s=0&q=80&sh=1&tw=100&th=100&ts=0&tlw=50&tlh=50&tq=60&tsh=1&pw=54&ph=40&aps=0&baseURL=http%3A%2F%2Fdomain.name%2Fssp_director'

You will also need to rename your 'index.html' page to 'index.php'.

3) I am not familiar with SlideShowPro so you may need to either wait for UrsusMaritimus to reply or do some further research within SlideShowPro's own support pages to try to figure out what all the parameters are.

You can introduce captions into the script by adding the following code before the line: $r->appendChild( $b );

$caption = $dom->createElement('caption');
$cdata = $dom->createCDATASection('caption_goes_here');
$caption->appendChild($cdata);
$b->appendChild($caption);

... replacing 'caption_goes_here' with the code for your caption, whether it be plain text, the image's filename or some other parameter pulled in from SlideShowPro.

8 (edited by nbreslow 2012-07-24 04:10:37)

Re: Juicebox and Slide Show Pro Director

Thanks so much for the help - I appreciate it very much!

1) I set up the gallery two ways...

The gallery is located here as a PHP file:

http://nicholasbreslow.com/test/portfol … p?album=11

And the gallery is located here as an HTML file:

http://nicholasbreslow.com/test/portfol … l?album=11

Also, the index page is located here:

http://nicholasbreslow.com/test/portfolio.html

(Note: Only the first image 'square' is hyper-linked and it is set to go to the HTML version)

2) I tried what you suggested but got the following error:  Parse error: syntax error, unexpected T_STRING, expecting T_VARIABLE or '$' in /vservers/nicholasbres/htdocs/test/portfolio.viewer.php on line 94 

I think there is an extra space in your code:

config.php?album=<?php echo $ _GET["album"]; ?>

I changed it to (removed space between $ and _) and got:

config.php?album=<?php echo $_GET["album"]; ?>

It seemed to work, at least I am back to getting the spinner and not the error code.

Regarding the document type - I was able to keep my previous index page as html while passing the variable before (see http://www.nicholasbreslow.com/photography.html).  Anyway I tried http://nicholasbreslow.com/test/portfolio.php and that didn't work either.  Maybe I need a certain doctype?

3) Will test that out and report back.

Thanks again, look forward to getting this sorted. :)

-Nick

PS - I am actually a Pro license owner.  I just posted in this forum as a follow up to the Director post.  Hope that is OK.

Re: Juicebox and Slide Show Pro Director

1) I think the problem may be caused by the encoded characters in the baseUrl defined in your query string. Try using only unencoded characters.

2) There should be no space in $_GET["album"]. That was simply a typo on my part. Sorry. I have now edited my original post to reflect the correction.

Regarding the document type - I was able to keep my previous index page as html while passing the variable before (see http://www.nicholasbreslow.com/photography.html).  Anyway I tried http://nicholasbreslow.com/test/portfolio.php and that didn't work either.  Maybe I need a certain doctype?

It should not make any difference whether your page is HTML or PHP, though of course it will need to be PHP if there is any PHP code within it.

PS - I am actually a Pro license owner.  I just posted in this forum as a follow up to the Director post.  Hope that is OK.

That's OK. Thank you for pointing it out.

10 (edited by nbreslow 2012-07-24 16:46:29)

Re: Juicebox and Slide Show Pro Director

TOTAL INSANITY!  The problem was due to a problem in the original code posted by UrsusMaritimus.  The line:

 $title->appendChild(  $dom->createTextNode( $image['tag'] ) );

should be:

 $title->appendChild(  $dom->createTextNode( $image['tags'] ) );

The missing 's' on tags was throwing it off.  It works fine with encoded characters BTW.  If you go to my site here: http://nicholasbreslow.com/test/portfolio.html you can see it working.  Only the first two image/links are set up so far but they show different galleries being loaded.  Works really well - SWEET!

I am going to get to work on the captions next and will post back.  I think that some stuff fromt he original script is matched up wrong.  A little hard to tell but I think I have it sorted.

Thanks for your help!  Will be back to ask some more or at least let you know it is all setup properly.

-N

Re: Juicebox and Slide Show Pro Director

OK, here is what I have so far - basically the same as what was posted before but this add support for captions and titles..plus some comments that might help.  I plan on working on this some more, but for now here you go:

<?php 
$baseURL = $_GET['baseURL'];
$parameters = array(
    'album' => $_GET['album'],
    'w' => $_GET['w'],
    'h' => $_GET['h'],
    's' => $_GET['s'],
    'q' => $_GET['q'],
    'sh' => $_GET['sh'],
    'tw' => $_GET['tw'],
    'th' => $_GET['th'],
    'ts' => $_GET['ts'],
    'tlw' => $_GET['tlw'],
    'tlh' => $_GET['tlh'],
    'tq' => $_GET['tq'],
    'tsh' => $_GET['tsh'],
    'pw' => $_GET['pw'],
    'ph' => $_GET['ph'],
    'aps' => $_GET['aps'] );


header('Content-type: application/xml');
$doc = new DOMDocument('1.0', 'iso-8859-1');
$sourceURL = $baseURL . "/images.php?" . http_build_query($parameters);
$doc->load( $sourceURL ); 

$images = array();

$xmlimages = $doc->getElementsByTagName( "img" );
foreach( $xmlimages as $xmlimage ) 
{ 
$images[] = array( 'id' => $xmlimage->getAttribute('id'),           //Image catalog id
                   'src' => $xmlimage->getAttribute('src'),         //Image url
                   'file' => $xmlimage->getAttribute('file'),       //Image file name
                   'tn' => $xmlimage->getAttribute('tn'),           //Thumbnail, hover
                   'tnsm' => $xmlimage->getAttribute('tnsm'),       //Thumbnail, navigation
                   'dims' => $xmlimage->getAttribute('dims'),       //Image dimensions, original
                   'fp' => $xmlimage->getAttribute('fp'),           //Image focal point
                   'target' => $xmlimage->getAttribute('target'),
                   'link' => $xmlimage->getAttribute('link'),
                   'tags' => $xmlimage->getAttribute('tags'),       //Image tags
                   'caption' => $xmlimage->getAttribute('caption'), //Image caption
                   'title' => $xmlimage->getAttribute('title'));    //Image title
}

$dom = new DOMDocument('1.0', 'UTF-8');
$dom->formatOutput = true;
 
$r = $dom->createElement( "juiceboxgallery" );
$dom->appendChild( $r );
 
foreach( $images as $image )
{
 $b = $dom->createElement( "image" );
 
 $title = $dom->createElement( "title" );
 $title->appendChild(  $dom->createTextNode( $image['title'] ) );
 $b->appendChild( $title );

 $caption = $dom->createElement( "caption" );
 $caption->appendChild(  $dom->createTextNode( $image['caption'] ) );
 $b->appendChild( $caption );

 $b->setAttribute( "imageURL", $baseURL . "/p.php?a=" . $image['src'] );
 $b->setAttribute( "thumbURL", $baseURL . "/p.php?a=" . $image['tn']  );
 $b->setAttribute( "linkURL", $baseURL . "/p.php?a=" . $image['src'] );
 $b->setAttribute( "linkTarget", $image['target'] );

 
 $r->appendChild( $b );

 }
 
 echo $dom->saveXML();
 $dom->save("config.xml")
?> 

-N

Re: Juicebox and Slide Show Pro Director

I cant tell you how happy I am to have found this thread.  I actually bought JuiceBox Pro a couple of months ago to replace SlideShow Pro but couldn't bring myself to loose of director.  Now I've got Director working with Juice Box :)  Thanks people!

I'm not much of a programmer and this stuff is going way over my head but I wanted to ask if there was an easy way of adding all the custom settings?  This stuff  -

    maxImageWidth="4000"
    maxImageHeight="2000"
    imageQuality="80"
    thumbWidth="85"
    thumbHeight="85"
    thumbQuality="90"
    galleryTitleHAlign="CENTER"
    galleryTitlePosition="NONE"
    imageScaleMode="FILL"
    changeImageOnHover="false"
    useThumbDots="false" etc, etc, etc, etc,

I'm guessing that I should be able to have them included in the config.php file or in a separate text file and have a call in config.php, something like - include("settings.txt").  I don't need to change the settings per gallery, one hard coded settings file is perfect.

I've tried reading around the topic but I can't get the syntax to work.  I'd appreciate any help / pointers / advice..!

Thanks again

Will

Re: Juicebox and Slide Show Pro Director

You can add configuration options in your gallery's embedding code by following the instructions here.
Alternatively, you can add configuration options in the 'config.php' file (from this post above) by adding lines of code such as the following immediately after the $r = $dom->createElement( "juiceboxgallery" ); line:

$r->setAttribute('imageScaleMode', 'FILL');

Re: Juicebox and Slide Show Pro Director

Thanks for the fast reply Steven, that all worked perfect!  Thanks :)

Re: Juicebox and Slide Show Pro Director

Hi All

How do I find out what all the variables are in this -

configUrl : 'config.php?album=(GET ALBUM NUMBER FROM URL)&w=800&h=600&s=0&q=80&sh=1&tw=100&th=100&ts=0&tlw=50&tlh=50&tq=60&tsh=1&pw=54&ph=40&aps=0&baseURL=http%3A%2F%2Fdomain.name%2Fssp_director'


w
h
q
th
tlw

Some are obvious but other are more tricky..  I know they have   something to do with SlideshoPro Directors API but I cant find any other info.

Re: Juicebox and Slide Show Pro Director

I found the following definitions on this SlideShowPro forum web page.

w = Slideshow Image Width
h = Slideshow Image Height
s = Slideshow Image Sharpening
q = Slideshow Image Quality

tlw = Thumbnail Link width
tlh = Thumbnail Link height
tlq = Thumbnail Link Quality
tls = Thumbnail Link Sharpening

tw = Hover Thumbnail Preview width
th = Hover Thumbnail Preview height

The full SlideshowPro Director API can be found here.