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.

Posted in tutorials | Tagged , | Leave a comment

Easily Getting your last Tweet through PHP5

Overview:
Have you ever wanted to get your last tweet easily through PHP?
After a little research I think I’ve come up with a very quick and simple way.

How it works:
Using PHP’s DOMDocument method we can quickly parse the rss feed. From there we grab the “description” node from the first item and BOOM we have our last Tweet.

How to do it:
Get your rss feed from Twitter. Parse the feed using the DOMDocument class in PHP.

How it’s done:
Simple insert the following code into your php document and replace the user id with your Twitter id.

$user_rss = 'http://twitter.com/statuses/user_timeline/(your_user_id).rss';
$dom_doc = new DOMDocument();
$dom_doc->load($user_rss);

// grab all 'item' nodes
$node_list = $dom_doc->getElementsByTagName('item');

// grab the first description in the first item node
$desc = $node_list->item(0)->$item->getElementsByTagName('description')->item(0)->nodeValue;

// print the string after the colon
echo substr($desc,strpos($desc, ":")+1);

Limitations:
This will NOT work in PHP4. DOMDocument is limited to PHP5.

Posted in tutorials | Leave a comment

JCI – A distributable presentation with a twist


JCI required a distributable slideshow presentation that required localization. The slideshow had a narrator to read a script during each slide.

What I did:

  • Wrote all AS3 classes
Challenge Create a presentation that can be re-used for each language and synced to narration.
Solution Wrote a Flash app that pulls in assets from an external directory and syncs them.
Delivered An application that could be re-used by simply replacing the assets.
Results The client was very happy they could use the presentation anywhere and easily.
Posted in Flash projects, New projects | Tagged , | Leave a comment

Fia Interiors – Stunning design

A client who wanted a new website that reflected her style. She also wanted to ensure that when the time was right a database could be added to drive the content on the site.

What I did:

  • Coded the entire site using the CodeIgniter MVC framework
Challenge To create a website that could meets current and future needs.
Solution Using the CodeIgniter framework, I built the site using the MVC approach.
Delivered A stunning site that’s has everything she needs to build upon in here future requirements.
Results The client is extremely happy with the site.
Posted in New projects, PHP projects | Leave a comment

Pimp my what?! – Forklift of course

PimpMyLift- AS3 project

Built in 2008 this site got attention from all over the Marketing and Forklift industries. It’s ouroise was to draw attention to one of the smaller Forklift companies.

What I did:

  • Wrote all AS3 classes
Challenge Create a website that would interest Forklift operators and industrial companies.
Solution Create an interactive site with contests
Delivered A website with many options to customize a Masterlift forklift and submit it for contests and draws.
Results A extremely well received site that was featured in Marketing Magazine.
Posted in Flash projects | Tagged , | Leave a comment

Aveda – Teaching the Points of Difference

Aveda CD

Aveda wanted a CD they could deliver to all their education professionals that explained what made there service different.

What I did:

  • Wrote all AS3 classes
Challenge Create a video rich CD distributable teaching tool
Solution Using Flash’s ability to export projectors from both PC and Mac, I created an interactive teaching tool.
Delivered A beautiful and well written AS3 app.
Results Aveda loved the piece and all the education professionals gave positive feedback.
Posted in Flash projects, New projects | Tagged , | Leave a comment

CLS-Lexitech – a translation company website where content is KING

CLS-Lexitech wanted a multilingual website where the translations for each language was critical. We couldn’t use any automated means of translation.

What I did:

  • Coded the entire site using the CodeIgniter MVC framework
  • Liaison with the IT department during the multiple translation iterations
Challenge To create a multilingual website where translators could change copy.
Solution Using the CodeIgniter framework, I created several different language files that translators could modify.
Delivered A fast loading site that calls the language files on-demand.
Results The client is extremely happy with the site, and the parent company is looking to remove the Drupal auto translation and implement a similar solution.
Posted in New projects, PHP projects | Tagged , | Leave a comment

Collega (Aveda) – Custom charting at it’s best

Collega wanted a way to chart their progress month-to-month using custom artwork and an easy way to do it.

What I did:

  • Built most of the AS3 classes
  • Used an open-source PHP script to enable jpg creation
  • Created the MySQL database
Challenge To create a web app that was easy to use.
Solution Built on AS3 and database driven charting solution.
Delivered A web app that generates a jpg from a commercial script you can save or print.
Results This charting solution was used by all departments with all different levels of technical levels.
Posted in Flash projects | Tagged , , | Leave a comment

OIAA – A site that does… EVERYTHING

OIAA Website - PHP, Drupal, CiviCRM site

The OIAA site is a PHP, Drupal and CiviCRM site. It’s used to manage all the members contacts as well as process new memberships and renewals. It also handles event registration and event payments through the Beanstream API.

What I did:

  • Built the Beanstream module within the CiviCRM framework
  • Wrote Drupal modules to meet the Clients requirements
  • Built custom reports for members and chapters
  • Configured the OIAA server for schedules tasks and email
  • Stylized it meet the OIAA design
Challenge To create a completely modern website that centralizes all the membership data.
Solution Relying heavily on the Open source community, I selected Drupal and CiviCRM. I wrote modules and plug-ins to meet the OIAA requirements
Delivered A completely re-designed and modern website.
Results A website that integrates Contact Management, Content Management and processes membership/event payments.

Website

Sample PHP Source code

Posted in New projects, PHP projects | Tagged , , | 1 Comment

Forked Up – Pilot TV show website (with CHOCLAIR!)

Forked Up - AS3 project

The Forked Up site was a very video heavy site. The client didn’t want to use a media server
to deliver the content, so I relied on the Video component’s ability to progressively download the video.

What I did:

  • Wrote all AS3 classes
  • Wrote all PHP classes
  • MySQL database schema
Challenge To create a video rich website in pure AS3 within 2 months that didn’t rely on a streaming server.
Solution Drawing on many of my pre-built classes in PHP and AS3 as well as using Flash’s components I set out to deliver a cutting edge highly interactive website. It required over 300 classes in it’s final iteration.
Delivered I was able to deliver a database driven website with many features.
Results A heavy traffic website that didn’t crash under load.
**UPDATE** – The pilot failed to get picked up so the site is unmaintained. The database is not active and therefore sections are non-functional.
Website - www.forkedup.com
Sample AS3 Source code
Sample PHP Source code
Posted in Flash projects, New projects | Tagged | Leave a comment