Fancy box gallery

Posted by: Jo on October 15, 2011 |  Updated: January 1, 2012 05:31 PM

How to use the new image properties and fancybox jquery plugin with articles

This simple tutorial  provides a simple example of how to use jquery and the xarigami 'images' dynamic data property to make the existing picture pubtype a little bit fancier and easier to use as a gallery.

You do not need to install Uploads or any other modules other than Articles and Categories module. In fact, if you have Uploads or Images installed the picture pubtype will use different code in the summary template used (see below). Make sure you do not have Uploads hooked.

The tutorial demonstrates how to:

  1. setup the summary and body fields of the 'picture' pubtype to automatically resize for thumbnail and upload your pictures
  2. add some simple jquery using the 'fancybox' plugin to provide full size popups of the pictures

The picture pubtype

The current Picture pubtype is an example of a gallery publication type that is installed by default with the Articles module. We are going to make it easier to use and fancier.

First, let's get to know what it currently provides - a simple gallery where pictures are input with:

  • A title field for the name of the picture
  • A 'summary' field for the url of a thumbnail
  • A 'body' field for the url of the main picture
  • A notes field for some description

The summary view of the gallery will show the list of thumbnails and uses the Cluetip jquery plugin to provider hover over descriptions (from the notes field) of each picture. On clicking on the picture thumbnail, the main picture is loaded in the page. If Uploads module is hooked, the pictures will all be resized on display.

Setting up the summary and body fields

We are going to change the summary and body fields so that:

  • The summary field becomes an image upload field that automatically resizes the image to a given thumbnail size on uploading
  • The body field becomes an image upload field that will display either at full size as uploaded, or a set size that you can set to standardize the displays for all uploaded pictures.

To adjust the summary and body field we will edit the pubtype fields:

  1. As administrator go to Articles - Manage Publication Types - Click on Edit next to the Picture pubtype.
  2. Image propery definitionFirst we will edit the Summary field -  Edit Validation Link (the wrench icon) for Summary. This takes you to the configuration settings for the Summary dynamic data field which is set as an 'Image' type by default.
    1. In the image above you can see we are editing the Image property type
    2. Change the Image source to File upload
    3. Set the Base directory - this is where the files will be uploaded to. Make sure this directory is writable by your web server
    4. IMage property display optionsAs this is the Thumbnail for our gallery, we want to make sure it is a smaller size. We can set a standard width or resize here for the images that are uploaded.
    5. Next. still in the same configuration screen, we are going to set some of the display options for the thumbnail image. See the field set titled Display options as shown below
    6. Check the 'Image on Input' box to display a small image on upload so you can tell what image you have chosen.
    7. Set the output display either by width or height - this is used for display of the thumbnail.
    8. When finished, click on the Update button to save your settings and return to the Edit Pubtype screen.
  3. Now we will edit the Body field in the same way: Click on the Wrench icon and Body Validation edit link to get to the configuration page for this field.
    1. The main option to set here is the Image source - set it to File upload
    2. You can set the other options as you see fit.
    3. When complete, click on Update to save your changes and return to the Edit Publication page.
  4. Click on the Modify Publication button to save your changes and return to the main Articles administration Manage Pubtype screen.
  5. You are now ready to test the input for your gallery publication type.

Adding the fancybox jquery plugin code

If you have added a few pictures to your gallery you might see something like the following when you browse to the main user view page. It may have tooltips from the exiting Cluetip  jquery pluging. If you click on a thumbnail you will be taken to the main display page with the full size image.

Image view

We can now look at making the display a little more fancy. Let's start by getting our templates ready.

  1. First, copy the user-view-picture.xd and user-summary-picture.xd template from the articles module templates directory to the equivalent directory in your theme at themes/[yourtheme]/modules/articles. Make sure you rename then with a .xt extension instead of the .xd extension. Now you have made 'override templates' and can easily edit them while leaving the original articles module templates in place.
  2. We will add the tag to load the 'fancybox' plugin for our picture view page. Edit your user-view-picture.xt template and add the following tag at the top of the page - this tag will ensure the fancy box plugin and its css is loaded into the page when required (fancy box is shipped with xarigami and lives in the scripts/jquery/plugins directory):

    <xar:base-include-javascript libname="jquery" libfile="jquery.min" 
    plugin="fancybox" pluginfile="jquery.fancybox.pack"  
  3. We now have fancy box loaded, but we want to tell it when and how to work, and on what pictures by adding a snippet of code as well. Add the following directly after the above tag:
    <xar:set name="fancy">"
            'transitionIn'  :   'elastic',
            'transitionOut' :   'elastic',
            'speedIn'       :   600,
            'speedOut'      :   200,
            'overlayShow'   :   false
    <xar:base-include-javascript type="code" code="$fancy" position="body"/>

    Here the xar:set tag puts in place the jquery code that tells fancybox which picture to do it's thing with and how to load it. The final tag (xar:base-include-javascript) loads that snippet of code at the correct place and time so it works.
    The most important thing to note here is the selector class - in our case we have it as 'a.fancypop' - a class called 'fancypop' added to an 'a href' tag.

  4. Now finally we want to edit the summary template, that loads each individual picture 'article' and add the class and other information that triggers the fancybox plugin to work.
    User summary picture
    So open up and edit your user-summary-pictures.xt template and note the following changes:
    1. Comment out the existing code that is used (when Uploads module is not loaded around line 34. Adjust the code as follows:
      <li class="gallery-picture">
             <!--<a href="#$link#" class="fancypop galleryzoom#$aid#" title="#$title#"  rel="div.imgnotes">
             <xar:set name="maincat">current($categories)</xar:set>
             <a href="var/uploads/#$body_value#" class="fancypop galleryzoom#$aid#" title="#$title#"  rel="#$maincat['cname']#">
              <p class="imgtitle">#$title#</p>
    2. In the href value, add the path to your large image. This will be the Base Path that you set in your Image Property configuration, plus the VALUE of the body field. You can get this value (the name of the actual image file) for Article specific fields by adding '_value' to the name of the field. In this case it is #$body_value#. Overall the href value for our example is "var/uploads/#$body_value#".
    3. Most importantly - add the selector that we set in the jquery snipped we setup in point 3 above. In this example it is added before the existing class name.
    4. This example also adds a value for rel attribute - you can use this with fancy box later to group pictures in galleries. For now we have removed the original div.imgnotes.
  5.  Finally save your template, clear your template cache (ieither from the command prompt or at Base - Perfomance and Debug - Flush Cache (All)
  6. Now, when you go to User View for your picture pubtype, and click on a thumbnail you should get a fancy box popup. You can configure the options and adjust the template to fancy it up a bit more to your liking.

Related project :

xarigami articles

« prev     next»

useful? share it.