Login

Bigin · (This post was last modified: 2013-06-23, 20:38:04 by Connie.)

This tutorial is here to demonstrate the flexibility of Item Manager plugin. In this tutorial, I'll go over the basics of Item Manager installation, and work towards creating an advanced gallery component that looks and functions exactly like Fancybox from the front end. Since Item Manager is not really gallery software, but rather an all-in-one plugin with many powerful features so that installation of an additional Gallery plugin is not only not required, but also completely redundant.

This tutorial was based on the gallery setup at http://stuff-depot.ehret-studio.de/emubox/. If you'd like a demo before reading, try there.

I'll say this again and again - Item Manager is modular, and your gallery can function in any scope you like. This is only one way to do it - there are so many of ways to setup a gallery in Item Manager plugin.

REQUIREMENTS/OPTIONAL EXTRAS:

Item Manager Extended latest version
DynPages plugin to use our 'EmuBox' component directly within our GS page
jQuery library
Event dragging requires the jQuery UI modules: Draggable
Interface Images like: close icon, and a transparent background image. You can dl. there: interimg.tar.gz. Or use your own images as backgrounds
Some images to display in the gallery

CONFIGURATION:
While logged in to GS, go to Item Manager -> CATEGORIES, and create a new category called 'emubox'. After that, open the CONFIGURE menu and customize your category by adding the following custom fields to your requirements:

A Description field for our image description
An image upload field for the thumbnail which triggers the larger lightbox
An image upload field for the main image to display in the lightbox
A single field 'year' to determine the order of images on page

configure screen:
[Image: fancy_config.png]

In order to test your component immediately after you've finished, you should to find some pictures, upload them in the gallery and fill out all required fields under the 'ADD NEW' menu.

add new:
[Image: updateitem.png]

When the admin configuration is done, the next thing you need to do is to create a component. However, before we start, you'll want to go ahead and do a few things.

INTERFACE IMAGES:
First off, unpack the downloaded 'interimg.tar.gz' file (see REQUIREMENTS part above, under point 5) and upload the images to any directory on your server or you can use your own images for this purpose.

CREATING YOUR GALLERY TEMPLATES:
Next step, you'll want to have two Templates that's geared for Gallery output. Decide whether you wish to use a '.tpl' file or specified as a string within the 'EmuBox' component - more on this later. Ok, for this tutorial, we'll go the route to setup our templates as '.tpl' files.

We'll create one called 'fancy.tpl' - since this tutorial about FancyBox Emulator ;). The fancy.tpl file contains a simple HTML nodes and jQuery functions to preload our images; some interactions to show/hide the lightbox and animation effects to make the EmuBox look a little more attractive. The template file also contains data placeholders that are replaced with the appropriate data at the time the file is interpreted. Our content looks something like this:

Code:
<div id="sgallery-screen">

    <script type="text/javascript">

    (function($) {

        var cache = [];

        // Arguments are static image paths

        $.preLoadImages = function() {

            var args_len = arguments.length;

            for (var i = args_len; i--;) {

                var cacheImage = document.createElement("img");

                cacheImage.src = arguments[i];

                cache.push(cacheImage);

            }

        }

    })($);

    $.preLoadImages([[preload]]);

    </script>

    [[loop]]

    [[paginator]]

</div>

<div class="winframes hidden" id="draggable">

    <a class="closer" href="">

        <img id="imgclose" alt="Close window" src="my/images/close.png">

    </a>

    <img id="screen-img" class="bimage" alt="" src="">

</div>

<a href="" class="hidden closer" style="display: none;"><p class="reflector">&nbsp;</p></a>

<script type="text/javascript">

$(document).ready(function ($) {

    $("#screen-img").fadeOut("slow");

    $("a.linkpic").click(function () {        

        var iid = $($(this)).attr("id");

        var newimg = new Image();

        var iTitle = new Array([[titlearray]]);

        var iContent = new Array([[contentarray]]);

        var iUrl = new Array([[preload]])

        newimg.src = iUrl[iid];

        var width = newimg.width;

        $('#draggable').append('<div class="idata"><h4 class="ititle">'

        + iTitle[iid] +'</h4>'+ iContent[iid] +'</div>');

        $("a.hidden").css("display", "inline");

        $("#draggable").css("display", "block");

        $("#draggable").css("position", "absolute");    

        $("#draggable").css("width", width);

        $("#draggable").css("height", "auto");

        $("#draggable").css("left", "50%");

        $("#draggable").css("margin-left", -(width / 2));                    

        $("#screen-img").fadeOut("slow", function() {

            $("#screen-img").attr("src",  iUrl[iid]);

            $("#screen-img").fadeIn();

        });

        return false;// "cancel" the default behavior of following the link

    });

    // close button for window

    $("a.closer").click(function () {

        $("#draggable").css("display", "none");

        $("a.hidden").css("display", "none");

        $("#screen-img").fadeOut("slow");

        $(".idata").empty().remove();

        return false;

    });

    // draggable div

    $(function(){$( "#draggable" ).draggable();});

});

</script>

Please replace the path before 'close.png' with the actual path of the image you have uploaded.

Code:
<img id="imgclose" alt="Close window" src="my/images/close.png">

The second template file we need, 'fancy.loop.tpl', used to produce a simple loop that iterates through each item in a collection. The content looks something like this:

Code:
<p class="i-singlewrapp">

    <a id="[[count]]" class="linkpic" title="click" href="[[image]]">

    <img class="galimg" src="[[thumb]]" alt=""><span class="i-singlehidden">

    <span class="fancytext">FancyBox Emulator</span><br />

    <span>[[title]]</span></span></a>  

</p

Remember, you can move any of these template pieces around, change their parameters, and adjust their placing. This is solely a base structure!

OK, let's upload both Templates to the '/plugins/imanager/tpl/frontend/' directory on your server.

CREATING COMPONENT:
Now that we've got our Template all setup, but what has been missing until now is a way of generating the interface between our templates and the logic. To accomplish this purpose, we are going to create our 'EmuBox' component with the following content:

Code:
<?php

// create controller instance

$manager = new ImController();

// setup category

ImCategory::setCategory('emubox');

// limiting items per page

ImModel::setPref('itemsperpage', 8);

// setup sort by field if needed

ImModel::setPref('sortby', 'year');

/* run action: generates item register calculated out of all the mentioned parameters.

   For this tutorial's purpose, we'll need to get all the custom fields data */

$manager->runModelMethod('gen_register', array('description', 'thumbnail', 'mainimage', 'year'));

/* This method returns an array which contains multiple item data depending on the settings made. */

$items = $manager->getModelValue('items_ordered_struct');

// getting the path of image folder

$path = ImModel::getProp('paths', 'siteurl').ITEMUPLOADDIR;

// register your templates

if(!$manager->tplRegister(array('fancy' => GSPLUGINPATH.'imanager/tpl/frontend/fancy.tpl', 'fancyloop' =>  GSPLUGINPATH.'imanager/tpl/frontend/fancy.loop.tpl')))

{

    return;

}

// output buffer

$loop = '';

/* An array contained static image paths. The preloader is supplied with this array of image paths which it will then attempt to storing the images in the cache */

$preload = array();

// An array contained image titles

$titlearray = array();

// An array contained image description

$contentarray = array();

// item index

$i=0;

// page data array based on the settings made

$pagedata = $manager->getModelValue('pagedata');

foreach($pagedata['itemkeys'] as $key) {

    if(!empty($items[$key]['thumbnail']) && !empty($items[$key]['mainimage'])) {

        $loop .= $manager->paint('fancyloop', array('thumb' => $items[$key]['thumbnail'], 

                        'image' => $items[$key]['mainimage'], 

                        'title' => !empty($items[$key]['title']) ? $items[$key]['title'] : '',

                        'count' => $i));

        $preload[] = !empty($items[$key]['mainimage']) ? '\''.$items[$key]['mainimage'].'\'' : '\'&nbsp;\'';

        $titlearray[] = !empty($items[$key]['title']) ? '\''.html_entity_decode($items[$key]['title'], ENT_QUOTES, 'UTF-8').'\'' : '"&nbsp;"';

        $contentarray[] = !empty($items[$key]['description']) ? '\''.html_entity_decode($items[$key]['description'], ENT_QUOTES, 'UTF-8').'\'' : '\'&nbsp;\'';

        $i++;

    }

}

// join array elements with a string

$preload = implode(',', $preload);

$titlearray = implode(',', $titlearray);

$contentarray = implode(',', $contentarray);

// and the final output

echo $manager->paint('fancy', array('loop' => $loop, 'preload' => $preload, 'titlearray' => $titlearray, 'contentarray' => $contentarray, 'paginator' => $manager->paginator(ImModel::getTplKit('paginator'), true, array(), true)));

?>

Include that component in your website template, better, embed them directly within your GS page wherever you want to display your gallery by using DynPages plugin.

So we've got a full EmuBox setup!
Again, there's far more customization and things you could add to your gallery. This tutorial is meant as a starting point, but feel free to customize and add things to your liking.

Login
Username:
Password:	Lost Password?
	Remember me