Ive got it to work but I have several problems.
1. If you check http://zeerux.com/galleri/ you can see the following problems that has something to do with the config.php file:
1.1 The title of the gallery is visible and the buttons float both over image and beside it. The galleryfile got the buttons over the image and caption from the image under the image.
1.2. It seems like something overwrites my settings?
2. If I upload a image, it lands as thumb nr2? I want new images to get as first image.
this is my config.php:
<?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 galleryTitle="The Neighbourhood Gallery">';
for ($i=0; $i<sizeof($gallery); $i++)
{
echo '<image imageURL="images/'.$gallery[$i].'" thumbURL="images/'.$gallery[$i].'" linkURL="" linkTarget="">';
echo '<title></title>';
echo '<caption></caption>';
echo '</image>';
}
echo '</juiceboxgallery>';
?>
this is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Neighbourhood Gallery</title>
<meta charset="utf-8" />
<meta name="description" content="" />
<!-- START OPEN GRAPH TAGS-->
<meta property="og:title" content="The Neighbourhood 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({
configUrl : 'config.php',
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(18,18,18,1)'
});
</script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>The Neighbourhood Gallery</h1>
<p></p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->
</body>
</html>
and this is my config.xml
<?xml version="1.0" encoding="UTF-8"?>
<juiceboxgallery
useFlickr="false"
maxThumbColumns="7"
captionPosition="BELOW_IMAGE"
buttonBarPosition="OVERLAY_IMAGE"
galleryTitlePosition="NONE"
backgroundColor="rgba(18,18,18,1)"
topBackColor="rgba(0,0,0,0.5)"
thumbFrameColor="rgba(204,204,204,1)"
thumbHoverFrameWidth="3"
thumbSelectedFrameWidth="5"
topAreaHeight="5"
stagePadding="10"
showOpenButton="true"
showExpandButton="false"
showThumbsButton="true"
showImageOverlay="ALWAYS"
showOverlayOnLoad="true"
showImageNumber="false"
maxCaptionHeight="50"
captionHAlign="CENTER"
showSplashPage="NEVER"
showInfoButton="false"
screenMode="LARGE"
showSmallPagingText="false"
showSmallThumbsButton="false"
showSmallThumbsOnLoad="false"
backButtonUseIcon="true"
showImageNav="ALWAYS"
captionBackColor="rgba(0,0,0,0.4)"
useLargeImages="false"
resizeOnImport="true"
maxImageWidth="2048"
maxImageHeight="1536"
showNavButtons="false"
flickrShowTitle="false"
showAutoPlayButton="false"
useFullscreenExpand="false"
useThumbDots="false"
expandInNewPage="TRUE"
showThumbsOnLoad="true"
galleryTitle="The Neighbourhood Gallery"
enableDirectLinks="false"
imageNavPosition="IMAGE"
thumbNavPosition="CENTER"
buttonBarHAlign="RIGHT"/>