Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Mootools widget to grab and display flickr feed images

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 Demo
Octocat-spinner-32 Images
Octocat-spinner-32 Source
Octocat-spinner-32 README.md
Octocat-spinner-32 package.yml
README.md

MooFlick

Basic widget to display images from the Flickr JSON feed. Grabs a defineable number of the latest images, resizes and displays on page with visual effect. Styles and rotates images to look like small polaroid previews (optional)

More's Request.JSONP used to fetch external images after page load so image loading has no effect on page load time

See included demo for detailed usage instructions

Screenshot

How to use

To use the plugin simply instantiate MooFlick and give it the id of the target container (usually a div) and your flickr id.

HTML target div

#HTML
<div id="flickr-items"></div>

Basic CSS styling, you can update this how you like

#CSS
#flickr-items   {
    width:250px;
    margin:15px auto;
    height:400px;  /* Only for demo purposes - you can remove this*/
}
#flickr-items div {
    margin:10px auto;
    line-height:110px;
}
#flickr-items div.even  {
    float:left;
    clear:left;
}
#flickr-items div.odd   {
    float:right;
    clear:right;
}

Instantiate the MooFlick class to fetch the images asynchronously

#JS
window.addEvent('domready', function(){
    var mf = new MooFlick('flickr-items','10901345@N05', {});
})

The above assumes the target area has an id of flickr-items. For working examples check out the demo!

Thats all!

Syntax

new MooFlick($('target), 'flickr_user_id', [options])

Arguments

  1. Element - (element) The DMO element where the flickr images will be placed
  2. Flickr user id - (int) The user id for which you will display the latest images

Options

  • num : (int) [default = 6] The number of images to display (min 1 max 20)
  • url : (string) [default = current] The url of the flickr API (incase they ever change!)
  • delay : (int) [default = 350] The delay between adding each image to the page (in microseconds, 0 for no delay)
  • max_rotation : (int) [default = 8] The maximum rotation, setting rotation = 20 would given 40 degress of possible rotation (-20 to 20 degrees)
  • size_reduction : (decimal) [default = 0.4] The scale down factor, set to 1 for no scaling, 0.4 = 40% of original size

Screenshots

ScreenshotScreenshotScreenshot

Known Issues

Image rotation is only visible in the browsers that support it (IE does NOT support it)

The plugin has been tested in Safari, Firefox, Chrome and IE (7 and 8).

Any feedback greatly appreciated!

Something went wrong with that request. Please try again.