Combining mcDropdown and Galleria with jQuery

Overview:
Rapport is updating their portfolio and our junior web developer came across some nice jQuery plugins he wanted use. Problem was, he had some difficulty integrating the two so I got involved. We decided the best approach for various reasons,  including SEO, was to use the Galleria Flickr plug-in.

How it works:
On Flickr, if you separate photos into sets a unique id is generated. We use this id on each link for the “rel” property on mcDropdown. When a person selects a link, the id is used as a datasource for the Galleria, and it calls the photo set corresponding to the id. You can see the demo here.

How to do it:
In order to follow this quick tutorial, you’ll need the two jQuery scripts.

Galleria - http://galleria.aino.se/
mcDropdown – http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm

You’ll also need to grab the final script here.

And organize your Flickr photos into sets. The set ID is what we’ll call to load the Galleria.

Here’s the what we want to do in order to integrate properly.

  1. We need to create the div and initialize the Galleria. This is important because we can’t change the datasource on the Galleria if it’s not initialized.
  2. Create an initialization method to create a reference to mcDrowndrop
  3. Create a select handler for mcDropdown. This will update the Galleria’s data source.
  4. Initialize the mcDropdown.
  5. Set the dropdown to the correct item, if an id has been passed in the url hash.

So to begin we follow Galleria’s Classic Demo 3 code.

<div class="content">
        <h1>A classic Galleria gallery using Flickr images</h1>
        <div id="galleria"></div>
        <p id="nav">
            <a id="g_prev" href="#">Previous</a>
            <a id="g_next" href="#">Next</a>
            <a id="g_play" href="#">Play</a>
            <a id="g_pause" href="#">Pause</a>
            <a id="g_fullscreen" href="#">Fullscreen</a>
        </p>
        <p>This example is a classic gallery that fetches images from a Flickr user stream using the Flickr plugin.
            We also added external links to navigate, pause, play and enter fullscreen mode.</p>
        <p>View source for comments and code.</p>
    </div>

Immediately following the div, we add the Galleria script. We could add this to the document.ready method, but for simplicity sake we’ll follow the Galleria’s demo. I’ve also changed the method from getUser to getSet because this is how we’re organizing the images on Flickr.

// Load theme
    Galleria.loadTheme('../src/themes/classic/galleria.classic.js');

    // intiialize flickr plugin
    var api_key = 'fddd7bc223fe37295faace93a4f2d8fc'; // get your API key at Flickr
    var flickr = new Galleria.Flickr(api_key);

    // inject a user's photostream photoset into galleria
    flickr.getSet(cId, function(data) {
        $('#galleria').galleria({
            data_source: data, // add the flickr data
            show_imagenav: false, // remove the prev/next arrows
            extend: function() {
                var gallery = this; // save the scope
                $('#nav a').click(function(e) {
                    e.preventDefault(); // prevent default actions on the links
                })
                // attach gallery methods to links:
                $('#g_prev').click(function() {
                    gallery.prev();
                });
                $('#g_next').click(function() {
                    gallery.next();
                });
                $('#g_play').click(function() {
                    gallery.play();
                });
                $('#g_pause').click(function() {
                    gallery.pause();
                });
                $('#g_fullscreen').click(function() {
                    gallery.enterFullscreen();
                });
            }
        });
    });

Next, we’ll add the div to create the mcDropdown. The mcDropdown will replace the div contents once it’s initialized. We can add this div where ever we want on the page.

<div id="category">
        <ul id="categorymenu" class="mcdropdown_menu">
        <li rel="1">CLIENTS
         <ul>
             <li rel="72157625024010134">3XR</li>
             <li rel="72157625024342846">Adobe Systems Inc.</li>
             <li rel="72157625024323950">Atlas Polar</li>
             <li rel="72157624899742755">C4P Animal Rescue</li>
         </ul>
       </li>
    </ul>
  </div>

Ok, so now we have everything in place on a single page. The next step is to create the variables and handlers for page. Here’s the global variables we use:

// dropdown reference and dropdown value
var dd, val;

 // read the window hash if present
var hash = window.location.hash;

// set the client id to the url hash or set a default if it doesn't exist
var cId = (hash) ? hash.substring(11) : '72157625024010134';

Now when the document is ready we’ll initialize the mcDropdown and set our handlers.

$(document).ready(function (){
	// create the option object to pass to mcDropdown
	// this is where the callbacks are set
	var options = new Object();
	options.select = select_handler;
	options.init = init;

	// initialize the div for mcDropdown
	$("#category").mcDropdown("#categorymenu", options);

	/**
	* Creates a reference to the dropdown and
        * sets it's value to the cId passed in the url
	**/
	function init() {
		dd = $("#category").mcDropdown();
		//set the dropdown to the selected if the hash exists
		if(cId) dd.setValue(cId);
	}

	/**
	* Called whenever someone changes a selection
	* on mcDropwdown
	**/
	function select_handler() {
		// get the new value
		val = dd.getValue();

		// change the gallery images
		flickr.getSet(val[0], update_gallery);

		// update the url variables
		window.location.hash ='#client_id='+val[0];
	}

	/**
	* Updates the gallery with the new Flickr set id
	**/
	function update_gallery(data) {
		// update gallery data
		$('#galleria').galleria({
			data_source: data
		});
	}
});


Conclusion

So there we have it. mcDropdown and Galleria talking to each other. Whenever someone selects an item from the mcDropdown it triggers the select_handler. The select_handler sets an new datasource using the photo set id if the ‘ref’ property and then we update the url to reflect the change.

Hopefully this will help some other people integrating two jquery scripts.

This entry was posted in tutorials and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>