• Registered: 2014-06-09
  • Posts: 4

Topic: How to load pictures dynamically ? [SOLVED]

I purchased the pro product. I am having a hard time figuring out how to
load pictures to the gallery dynamically . I am new to XML .

I would really appreciate it if there is a way to load pictures on my website dynamically
without needing to modify the XML every time I add a picture.

THANks.

  • Registered: 2014-06-09
  • Posts: 4

Re: How to load pictures dynamically ? [SOLVED]

OK I've been searching on how to do that. but no luck.

this is the gallery page

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="minimal-ui" />
    <meta name="description" content="" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="Juicebox Gallery" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222',
        configUrl:'config.php'
    });
    </script>
    <div id="juicebox-container">
            <!-- Image gallery content for non-javascript devices -->
            <noscript>
                <h1></h1>
                <p></p>
                <p><img src="images/Diamfin Site Mockup 2.jpg" title="Diamfin Site Mockup 2" alt="" /><br>Diamfin Site Mockup 2 </p>
                <p><img src="images/photo.jpg" title="photo" alt="" /><br>photo </p>
                <p><img src="images/time_screenshot2.jpg" title="time_screenshot2" alt="" /><br>time_screenshot2 </p>
            </noscript>
        </div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

this is the config.php

<?php
header("Content-Type: application/xhtml xml; charset=UTF-8");
function GetDirArray($folder)
{
    $handle=opendir($folder);
    while ($file=readdir($handle))
    {
        if ($file!="." && $file!="..")
        {
            $ret[count($ret)]=$file;
        }
    }
    closedir($handle);
    sort($ret);
    return $ret;
}
$gallery=GetDirArray('images');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<juiceboxgallery 

    resizeOnImport="false"
    useThumbDots="false"
    useFullscreenExpand="false"
    imageFrameColor="rgba(255,255,255,1)"
    changeImageOnHover="true"
    showAutoPlayButton="false"
    showInfoButton="false"
    showImageNumber="true"
    shareFacebook="true"
    shareTwitter="true"
    shareGPlus="true"
    showSmallBackButton="true"
    backButtonPosition="OVERLAY"
    backButtonUseIcon="true"
    backButtonHAlign="LEFT"

>';
for ($i=0; $i<sizeof($gallery); $i++)
{
    echo '<image imageURL="images/'.$gallery[$i].'.jpg"';
    echo 'thumbURL="thumbs/'.$gallery[$i].'.jpg"';
    echo 'linkURL="images/'.$gallery[$i].'"';
    echo 'linkTarget="_blank"';
    echo 'sourcePath="images/'.$gallery[$i].'">';
    echo '<title><![CDATA['.$gallery[$i].']]></title>';
    echo '<caption><![CDATA[]]></caption>';
  echo '</image>';
 
}
echo '</juiceboxgallery>';
?>

what am I doing wrong?

I get config xml not found Error.

3 Reply by mohd919_3 (edited by mohd919_3 2014-06-09 18:30:22)

  • Registered: 2014-06-09
  • Posts: 4

Re: How to load pictures dynamically ? [SOLVED]

SOLVED

It turned out there is a problem with the header.

instead of using this

header("Content-Type: application/xhtml xml; charset=UTF-8");

I used this.


header('Content-Type: application/xml; charset=utf-8');

Now everything is working just fine. It took soooo long to figure out this.

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

Re: How to load pictures dynamically ? [SOLVED]

Here are a few tips to get things working:

(1) In your 'config.php' file, change the content type to application/xml. (I have already changed this in the post where you found the code.)
(2) The $gallery[$i] entries already contain file extensions so adding .jpg to them breaks the filenames.
(3) There are no spaces between the attributes in your <juiceboxgallery> tag which causes XML parsing errors.
(4) The sourcePath entries are required only for editing galleries in JuiceboxBuilder-Pro which may need to know where the original images are stored on your hard drive if reprocessing the images is required (for example to remove a watermark or resize the images). They can safely be removed.

Try the following:

<?php
header("Content-type: application/xml");
function GetDirArray($folder)
{
    $handle=opendir($folder);
    while ($file=readdir($handle))
    {
        if ($file!="." && $file!="..")
        {
            $ret[count($ret)]=$file;
        }
    }
    closedir($handle);
    sort($ret);
    return $ret;
}
$gallery=GetDirArray('images');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<juiceboxgallery 

    resizeOnImport="false"
    useThumbDots="false"
    useFullscreenExpand="false"
    imageFrameColor="rgba(255,255,255,1)"
    changeImageOnHover="true"
    showAutoPlayButton="false"
    showInfoButton="false"
    showImageNumber="true"
    shareFacebook="true"
    shareTwitter="true"
    shareGPlus="true"
    showSmallBackButton="true"
    backButtonPosition="OVERLAY"
    backButtonUseIcon="true"
    backButtonHAlign="LEFT"

>';
for ($i=0; $i<sizeof($gallery); $i++)
{
    echo '<image imageURL="images/'.$gallery[$i].'" ';
    echo 'thumbURL="thumbs/'.$gallery[$i].'" ';
    echo 'linkURL="images/'.$gallery[$i].'" ';
    echo 'linkTarget="_blank">';
    echo '<title><![CDATA['.$gallery[$i].']]></title>';
    echo '<caption><![CDATA[]]></caption>';
  echo '</image>';
 
}
echo '</juiceboxgallery>';
?>
  • Registered: 2014-06-09
  • Posts: 4

Re: How to load pictures dynamically ? [SOLVED]

Thanks Steven. Now I am working on populating the gallery from the database.
everything makes sense now.