1 Topic by MJK (edited by MJK 2014-08-18 21:49:40)

  • MJK
  • Member
  • Offline
  • Registered: 2012-09-20
  • Posts: 8

Topic: Part of the "config.xml" same for multiple galleris [SOLVED]

I have couple galleries made with Juicebox Pro and Flickr on here:

http://www.kareinen.fi/kuvat.php?page=kaikki

Currently I have simple php-file for each gallery that are loaded dynamically:

<!--START JUICEBOX EMBED-->
<script src="galleriat/jbcore/juicebox.js" type="text/javascript"></script>

<script>
new juicebox({
configUrl : "galleriat/elaimet.xml",
containerId : "juicebox-container",
galleryWidth: "500",
galleryHeight: "450",
backgroundColor: 'rgba(248,248,248,1)'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

What is the easiest way to make part of the config.xml (here elaimet.xml) same for every gallery?

So elaimet.xml would look like just this:

<juiceboxgallery 

    useFlickr="true"
    flickrShowTitle="false"
    flickrShowDescription="true"
    flickrImageSize="ORIGINAL"
    flickrImageCount="200"
    flickrUserId=""
    flickrSetId="721576XXXXXXXX"
    flickrSort="date-taken-desc"
    
/>

There would be one file (asetukset.xml) that loads following settings to each gallery's own config.xml-file. Is there some way to include xml-file in another xml-file?  I found some information from the internet but I couldn't get it to work with Juicebox:
http://stackoverflow.com/questions/5121 … r-xml-file

    backgroundColor="rgba(248,248,248,1)"
    buttonBarBackColor="rgba(0,0,0,.4)"
    buttonBarIconHoverColor="rgba(255,0,0,1)"
    buttonBarPosition="TOP"
    captionBackColor="rgba(248,248,248,.8)"
    captionHAlign="LEFT"
    captionPosition="BELOW_IMAGE"
    displayTime="4"
    enableAutoPlay="true"
    enableDirectLinks="true"
    frameWidth="1"
    galleryFontFace="Arial,Helvetica,sans-serif;"
    galleryHeight="450"
    galleryTitle=""
    galleryTitlePosition="NONE"
    galleryWidth="500"
    imageFrameColor="rgba(0,0,0,.4)"
    imageNavPadding="30"
    imageNavPosition="IMAGE"
    imageShadowBlur="0"
    imageShadowColor="rgba(0,0,0,0)"
    imageTransitionTime="0.2"
    imageTransitionType="CROSS_FADE"
    importCaption="IPTC"
    importTitle="IPTC"
    languageList="Näytä pistenavigointi|Piilota pistenavigointi|Suurenna kokoruutuutilaan|Sulje kokoruututila|Avaa kuva uudessa ikkunassa|Kuvat|Seuraava kuva|Edellinen kuva|Soita musiikki|Pysäytä musiikki|Näytä tiedot|Piilota tiedot|Aloita näytös|Pysäytä näytös|Näytös päällä|Näytös suljettu|Mene takaisin|Osta tämä kuva|Jaa: Facebook|Jaa: Twitter|Jaa: Google+|Jaa: Pinterest|Jaa: Tumblr|/"
    maxCaptionHeight="30"
    navButtonBackColor="rgba(0,0,0,0.4)"
    navButtonIconHoverColor="rgba(255,0,0,1)"
    showAutoPlayButton="true"
    showImageNav="false"
    showImageOverlay="ALWAYS"
    showNavButtons="true"
    showOpenButton="false"
    showPagingText="False"
    showSmallThumbsOnLoad="true"
    showThumbsButton="false"
    showThumbsOnLoad="true"
    splashButtonText="Avaa galleria"
    textColor="rgba(0,0,0,1)"
    textShadowColor="rgba(0,0,0,0)"
    thumbFrameColor="rgba(255,0,0,0.8)"
    thumbHeight="60"
    thumbHoverFrameWidth="1"
    thumbSelectedFrameWidth="2"
    thumbShadowColor="rgba(0,0,0,0)"
    thumbsVAlign="BOTTOM"
    thumbWidth="60"
    topAreaHeight="0"
    topBackColor="rgba(255,255,255,0)"
    useFullscreenExpand="true"
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Part of the "config.xml" same for multiple galleris [SOLVED]

As you are already using PHP, you could use a PHP include as follows.

(1) Change the filename of 'elaimet.xml' to 'elaimet.php' and change its contents to the following:

<?php header('Content-Type: application/xml'); ?>

<juiceboxgallery 

    useFlickr="true"
    flickrShowTitle="false"
    flickrShowDescription="true"
    flickrImageSize="ORIGINAL"
    flickrImageCount="200"
    flickrUserId=""
    flickrSetId="721576XXXXXXXX"
    flickrSort="date-taken-desc"

<?php include 'extra.php'; ?>

/>

(2) Put your common configuration options into a file named 'extra.php' (just as below):

backgroundColor="rgba(248,248,248,1)"
buttonBarBackColor="rgba(0,0,0,.4)"
buttonBarIconHoverColor="rgba(255,0,0,1)"
buttonBarPosition="TOP"
captionBackColor="rgba(248,248,248,.8)"
captionHAlign="LEFT"
captionPosition="BELOW_IMAGE"
displayTime="4"
enableAutoPlay="true"
enableDirectLinks="true"
frameWidth="1"
galleryFontFace="Arial,Helvetica,sans-serif;"
galleryHeight="450"
galleryTitle=""
galleryTitlePosition="NONE"
galleryWidth="500"
imageFrameColor="rgba(0,0,0,.4)"
imageNavPadding="30"
imageNavPosition="IMAGE"
imageShadowBlur="0"
imageShadowColor="rgba(0,0,0,0)"
imageTransitionTime="0.2"
imageTransitionType="CROSS_FADE"
importCaption="IPTC"
importTitle="IPTC"
languageList="Näytä pistenavigointi|Piilota pistenavigointi|Suurenna kokoruutuutilaan|Sulje kokoruututila|Avaa kuva uudessa ikkunassa|Kuvat|Seuraava kuva|Edellinen kuva|Soita musiikki|Pysäytä musiikki|Näytä tiedot|Piilota tiedot|Aloita näytös|Pysäytä näytös|Näytös päällä|Näytös suljettu|Mene takaisin|Osta tämä kuva|Jaa: Facebook|Jaa: Twitter|Jaa: Google+|Jaa: Pinterest|Jaa: Tumblr|/"
maxCaptionHeight="30"
navButtonBackColor="rgba(0,0,0,0.4)"
navButtonIconHoverColor="rgba(255,0,0,1)"
showAutoPlayButton="true"
showImageNav="false"
showImageOverlay="ALWAYS"
showNavButtons="true"
showOpenButton="false"
showPagingText="False"
showSmallThumbsOnLoad="true"
showThumbsButton="false"
showThumbsOnLoad="true"
splashButtonText="Avaa galleria"
textColor="rgba(0,0,0,1)"
textShadowColor="rgba(0,0,0,0)"
thumbFrameColor="rgba(255,0,0,0.8)"
thumbHeight="60"
thumbHoverFrameWidth="1"
thumbSelectedFrameWidth="2"
thumbShadowColor="rgba(0,0,0,0)"
thumbsVAlign="BOTTOM"
thumbWidth="60"
topAreaHeight="0"
topBackColor="rgba(255,255,255,0)"
useFullscreenExpand="true"

(3) Use the following embedding code (changing the file extension of the configUrl):

<!--START JUICEBOX EMBED-->
<script src="galleriat/jbcore/juicebox.js" type="text/javascript"></script>
<script>
    new juicebox({
        configUrl: "galleriat/elaimet.php",
        containerId: "juicebox-container",
        galleryWidth: "500",
        galleryHeight: "450",
        backgroundColor: "rgba(248,248,248,1)"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
  • MJK
  • Member
  • Offline
  • Registered: 2012-09-20
  • Posts: 8

Re: Part of the "config.xml" same for multiple galleris [SOLVED]

Thanks, worked perfectly!

  • Registered: 2014-08-09
  • Posts: 11

Re: Part of the "config.xml" same for multiple galleris [SOLVED]

Hey Steven,

is it also possible to include an 'extra.php' or anything else directly into the embedding code?


Regards, Hella

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

Re: Part of the "config.xml" same for multiple galleris [SOLVED]

@come_paglia

Yes. If you want to add common embedding code settings (stored in a file named 'extra.php'), then you can essentially follow the same procedure as above.

(1) Change the file extension of the page containing your gallery's embedding code from .htm or .html to .php.

(2) Use embedding code such as the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js" type="text/javascript"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        <?php include 'extra.php'; ?>
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

(3) Your 'extra.php' file might look something like this:

galleryWidth: "600",
galleryHeight: "400",
backgroundColor: "rgba(255,255,255,1)",
stagePadding: '20',
useThumbDots: "TRUE"
  • Registered: 2014-08-09
  • Posts: 11

Re: Part of the "config.xml" same for multiple galleris [SOLVED]

Thank you for your help, I'll give it a try this evening.

Regards,
Hella

7 Reply by come_paglia (edited by come_paglia 2014-09-28 19:51:25)

  • Registered: 2014-08-09
  • Posts: 11

Re: Part of the "config.xml" same for multiple galleris [SOLVED]

We have tried to embed the parameters using your example, but in a global content block in WordPress that doesn't work.

Now we've tried to use a javascript to do so. The block of parameters seems to be allright, the pathes are correct, but the error "config xml file not found"  appears nevertheless.
Link to the page: http://hella-stroh.de/weblog/dd/juicebox-test-2/ 

<!--START JUICEBOX EMBED-->

<script src="/svmanager/plugins/juicebox/jbmaster/jbcore/juicebox.js" type="text/javascript"></script>

<script src="/design/jb-presets/startseite.js" type="text/javascript"></script>

<script>
    var style = '{ baseUrl : ' + '\"http://hella-stroh.de/jbgalleries/startseite/startseite/\"' + ", containerId: \"juicebox-container\", " + juicebox_style + ' }';
    document.writeln( style ) ;
    new juicebox( style ) ;
</script>

<div id="juicebox-container"></div>

<!--END JUICEBOX EMBED-->

Do you have an idea to fix this?

Regards,  Hella

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

Re: Part of the "config.xml" same for multiple galleris [SOLVED]

As you have discovered, you won't be able to put PHP code into the body of a WordPress code and have the code run.

Your style variable is currently a string (enclosed in quotes). It needs to be an object. Remove the surrounding quotes. (Also, there is no need to escape the double quotes.) Try the following:

var style = {
    baseUrl : "http://hella-stroh.de/jbgalleries/startseite/startseite/",
    containerId: "juicebox-container"
};

With regard to the common configuration options, the juicebox_style variable in your 'startseite.js' file is also currently a string rather than an object. It is not possible to add names to the Juicebox object as a string (like the PHP example). The PHP example slots in a chunk of text (server-side) before the code is parsed by the browser (client-side). The embedding code is fully formed (by the server-side PHP) before the browser even sees it. This is not the case with your JavaScript code.

Create an object with all your common configuration options (like the style object above) and then merge the two objects before feeding it to your new juicebox line. (You can keep the common configuration options object in your external JavaScript file but it should be an object rather than a string.)

For example:

var style = {
    baseUrl : "http://hella-stroh.de/jbgalleries/startseite/startseite/",
    containerId: "juicebox-container"
};

var common = {
    autoPlayOnLoad: "TRUE",
    showThumbsOnLoad: "FALSE"
};

for (var name in common) {
    style[name] = common[name];
}

new juicebox(style);
  • Registered: 2014-08-09
  • Posts: 11

Re: Part of the "config.xml" same for multiple galleris [SOLVED]

Hey Steven,

thanks a lot for your support, it works as we wanted! :)


Regards,
Hella