Creating a flat design photo gallery using Juicebox

Creating a flat design photo gallery using Juicebox

Today we will create another photo gallery using Juicebox. This is one of the numerous galleries, however, it has its own features and advantages. Here is an incomplete list of the main core features: universal playback and responsive layout (proven performance on any device), intuitive navigation (image navigation via mouse, touch and keyboard), lightweight, fast to load and easy to embed into any website. Moreover, it supports Fullscreen API, so the gallery can be switched to the fullscreen mode easily. Let’s look at the entire process of creating a gallery from scratch.

Live Demo

HTML markup

As usual, in the beginning of every project, we need to define the html. Juicebox offers us a very easy way to create the gallery:

    <!-- add styles -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <!-- add juicebox container -->
    <div id="juicebox-container" class="juicebox-container"></div>
    <!-- add juicebox and initialize it -->
    <script src="js/juicebox.js"></script>

It could not be more simple. Immediately after this code we can initialize the gallery with the following code:

    <script>
        new juicebox({
            containerId : 'juicebox-container',
            galleryWidth: '100%',
            galleryHeight: '900',
            backgroundColor: 'rgba(255,255,255,1)',
            themeUrl:'themes/theme.css',
            configUrl:'photos.php',
        });
    </script>

Like many other gallery – most of the options we can specify directly in the gallery options. We indicated that the container of our gallery is ‘juicebox-container’, the width is 100%, height is 900px. We also indicated the background color and the main theme url. And, the last parameter is address to the config file. It can be a static XML file with a list of images for the gallery, however, this gallery allows us to use a php file, thus our images could be gathered dynamically. Full list of options you can find in the end of our tutorial.

PHP

This is very convenient when, let’s say you have some ready-made website (or script) with members. And you just want to integrate this gallery with your script. Of course, we can not use static in this case, since we need to use different images (of galleries from various users of your site). Thus we can write a script like this:

photos.php

$photos = '';
for ($i = 1; $i <= 6; $i++) {
    $photos .= <<<EOL
<image imageURL="images/pic{$i}.jpg" thumbURL="thumbs/{$i}.jpg" linkURL="images/{$i}.jpg" linkTarget="_blank" sourcePath="images/{$i}.jpg">
    <title><![CDATA[Image {$i}]]></title>
    <caption><![CDATA[]]></caption>
</image>
EOL;
}
header('Content-Type: text/xml; charset=UTF-8');
echo <<<EOF
<?xml version="1.0" encoding="UTF-8"?>
<juiceboxgallery backgroundColor="rgba(255,255,255,1)"
    captionPosition="BELOW_IMAGE"
    galleryWidth="1024" galleryHeight="900"
    buttonBarPosition="TOP"
    imageNavPosition="IMAGE" imageNavPadding="60"
    imageTransitionType="CROSS_FADE" imageTransitionTime="0.3"
    showImageOverlay="AUTO"
    galleryTitle="Demo album photos" galleryTitlePosition="TOP"
    textColor="rgba(255,255,255,1)"
    galleryFontFace="sans-serif"
    textShadowColor="rgba(0,0,0,0)"
    buttonBarBackColor="rgba(0,0,0,.4)"
    navButtonBackColor="rgba(0,0,0,0.4)" navButtonIconColor="rgba(255,255,255,1)"
    maxCaptionHeight="25"
    captionBackColor="rgba(0,0,0,0)"
    importTitle="NONE"
    topBackColor="rgba(255,0,0,0)"
    topAreaHeight="54"
    showOpenButton="false"
    imageShadowColor="rgba(0,0,0,0)" thumbShadowColor="rgba(0,0,0,0)"
    shareTwitter="false" shareFacebook="false" shareTumblr="false"
    imageShadowBlur="0"
    enableAutoPlay="false" showAutoPlayButton="false"
    maxImageWidth="1280" maxImageHeight="200"
    useFullscreenExpand="true">
  {$photos}
</juiceboxgallery>
EOF;

As you can see, besides of used images, we may specify extra params for the gallery. I should note that this gallery is supplied in different versions: a free one (that we use in our demonstration) and paid (with additional advanced settings).

Images

As is seen from our php code, all the images are located in the ‘images’ folder, all thumbnails are in the ‘thumbs’ folder.

CSS styles

One interesting feature of this gallery is the support of various themes. It means that you may prepare different themes, and switch between them. We use the default one theme that is supplied with the gallery. However, to make it in flat design, we overrided several styles:

.juicebox-container {
    margin: 0 auto 100px;
    width: 100%;
    max-width: 1024px;
    height: 900px;
}
.jb-bb-bar {
    margin-right: 0px !important;
    border-radius: 0px !important;
}
.jb-panel-top {
    padding: 0 !important;
}
.jb-area-large-mode-title {
    font-size: 1.5em !important;
    color: #000000 !important;
}

Live Demo

[sociallocker]

download the sources

[/sociallocker]

List of options

Options supported in free lite version:

Additional embed options

Conclusion

On this, our lesson came to an end – we have just finished creating our new photo gallery. I hope that you enjoyed the lesson. See you in the next lesson.