jquery. flickrGallery.jsflickrGallery is a jQuery plugin for embedding flickr photos into a webpage. Plugin considers a Gallery to be a list of Albums (similar to Flickr’s Collections). Albums are considered to be photosets. AUTHORPaul T. DEPENDECIESLICENSECopyright © 2007 Paul T. (purtuga.com) Dual licensed under the: INSTALLATIONIn the head element of your html document, after the entry for the jQuery library, include this plugin javascript file and the associated style sheet. <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flickrGallery-packed.js"></script>
<link rel="stylesheet" type="text/css" href="flickrGallery.css" media="screen" />
USAGECall the <$(ele).flickrGallery(uOpt))> method on the elements that you want to create the gallery on. $(ele).flickrGallery({...});
LAST UPDATED- $Date: 2007/07/03 20:23:38 $
- $Author: paulinho4u $
- $Revision: 1.1 $
Summary | flickrGallery is a jQuery plugin for embedding flickr photos into a webpage. | | The following methods have been design for direct usage and access. | | | | Public method used to initiate the gallery on the page. | | The methods that follow are all used internally by this plugin. | | | | Object that contains all code associated with flickrGallery plugin. | | Variable that a count of the gallery items created on the page. | | Variable that keeps track of the options for all flickr gallery areas on the page. | | | | Constructor for a gallery object. | | Shows the list of albums if they are hidden. | | Returns the next Unique Id that should be used when storing the information pertaining to a call. | | Initializes all the albums (if photosets were defined) for the gallery. | | Called when the json from flickr is returned. | | Returns html table with the error encountered with the api call to flickr. | | Inserts a loading message into different areas of the gallery container. | | Removes a loading message from the area indicated by the input param. | | Generic method that returns the url to a flickr image. | | Displays an album on the page. | | Clears the area where the images are displayed (class = .flickrGalleryImages) by removing all information about the previously viewed album. | | Displays the images on the page, after their information has been loaded from flickr. | | Builds the thumbs into the the area that holds them. | | Given a flickr photoset id, this method returns true or false indicating whether its photo information has already been loaded. | | Processes a flickr.photosets.getPhotos json object returned by the flickr api. | | Given an image number (int) or the letter p (previous) or n (next) this method display the full size image on the page. | | Shows the thumbsnails to the user. | | Hides the thumbsnails to the user. | | Turns on the slide show for a particular album. | | Stops the slide show if it is currently on. |
EXTERNAL METHOD(s)The following methods have been design for direct usage and access. Summary | | | Public method used to initiate the gallery on the page. |
$(ele).flickrGallery(uOpt)Public method used to initiate the gallery on the page. PARAMS| uOpt | {OBJECT} Options for the call. See below for a list of options along with their descriptions. |
The following options can be defined| api_key | REQUIRED. The api key generated by flickr. Please obtain your own api key. Go to the following url for more information on obtaining a key http://www.flickr.com/services/api/keys/ | | photoset_ids | REQUIRED. An array of flickr photosets. | | loading_msg | Optional. Code or text to be included inside the loading div.flickrGalleryLoading container. Default is ‘Loading ...’. This value can be set to an img html markup if wanting to include an image (ex. <img src=”load.gif”>) | | thumb_click_hide | Optional. Boolean. True or False indicating whether the thumb menu/list should be hiden as soon as a user clicks the thumbnail. Default is False (don’t hide). | | slideshow_interval | Optional. int. Interger representing the default interval, in milliseconds, that should be used between each slideshow picture. Default is 4000 (4 seconds). 1000 milliseconds = 1 second. |
RETURNnone EXAMPLE$('#gallery').flickrGallery({
api_key: 'jskdjfkj8273843vjsidjfkdsjfkjf',
user_id: 'ksjdkfjdsklf@jksjdkfjs',
photoset_ids: [
'82738478237482348237',
'26347632842837483274'
],
loading_msg: 'Loading ...',
thumb_click_hide: false,
slideshow_interval: 5000
});
INTERNAL METHODSThe methods that follow are all used internally by this plugin. The source all contains documentation. Change at your own risk. Summary | | | Object that contains all code associated with flickrGallery plugin. | | Variable that a count of the gallery items created on the page. | | Variable that keeps track of the options for all flickr gallery areas on the page. | | | | Constructor for a gallery object. | | Shows the list of albums if they are hidden. | | Returns the next Unique Id that should be used when storing the information pertaining to a call. | | Initializes all the albums (if photosets were defined) for the gallery. | | Called when the json from flickr is returned. | | Returns html table with the error encountered with the api call to flickr. | | Inserts a loading message into different areas of the gallery container. | | Removes a loading message from the area indicated by the input param. | | Generic method that returns the url to a flickr image. | | Displays an album on the page. | | Clears the area where the images are displayed (class = .flickrGalleryImages) by removing all information about the previously viewed album. | | Displays the images on the page, after their information has been loaded from flickr. | | Builds the thumbs into the the area that holds them. | | Given a flickr photoset id, this method returns true or false indicating whether its photo information has already been loaded. | | Processes a flickr.photosets.getPhotos json object returned by the flickr api. | | Given an image number (int) or the letter p (previous) or n (next) this method display the full size image on the page. | | Shows the thumbsnails to the user. | | Hides the thumbsnails to the user. | | Turns on the slide show for a particular album. | | Stops the slide show if it is currently on. |
jQuery. flickrGalleryObject that contains all code associated with flickrGallery plugin. jQuery. flickrGallery. next_uidVariable that a count of the gallery items created on the page. This value is used to store the options in the jQuery.flickrGallery.opt variable. jQuery. flickrGallery.optVariable that keeps track of the options for all flickr gallery areas on the page. Format of the variable is <uniqueId>: {options OBJECT} gallery(o)| jQuery.flickrGallery.gallery = function ( | o | ) |
|
Constructor for a gallery object. PARAMS- - Options to be set for this album
showGallery()| jQuery.flickrGallery.showGallery = function () |
Shows the list of albums if they are hidden. Extends the gallery object ( jQuery.flickrGallery.opt[idHere] ). Method is designed to be placed inside the a.href atribute for calling. PARAMSnone. RETURNS void() getNextUid()| jQuery.flickrGallery.getNextUid = function ( | pre | ) |
|
Returns the next Unique Id that should be used when storing the information pertaining to a call. PARAMS| pre | Prefix for return value... Default is g |
init()| jQuery.flickrGallery.init = function ( | uId | ) |
|
Initializes all the albums (if photosets were defined) for the gallery. This method is meant to be called when creating a new gallery area. PARAMS| uId | The id of the gallery. Value is used to find it in the jQuery.flickrGallery.opt[] object. |
buildAlbum(json)| jQuery.flickrGallery.buildAlbum = function ( | json | ) |
|
Called when the json from flickr is returned. Adds album to page. Extend the Gallery object ( jQuery.flickrGallery.opt[GalIdHere] ). This method builds the album object into the gallery. PARAMS| json | Object returned by flickr api. See below for examples on the structure of this object. |
The following are examples of the object structure returned by the flicker api. Photosets { "photoset": {
"id": "PhotoSetId",
"owner": "flickrOwnerId",
"primary": "525510301",
"secret": "b51148beba",
"server": "254",
"farm": 1,
"photos": "# of photos",
"title": {
"_content": "Title here"
},
"description": {
"_content": "Description here"
}
},
"stat": "ok"
}
getFlickrApiError(json)| jQuery.flickrGallery.getFlickrApiError = function ( | json | ) |
|
Returns html table with the error encountered with the api call to flickr. PARAMS| json | Json object returned from flickr |
insertLoadingMsg(g,w)| jQuery.flickrGallery.insertLoadingMsg = function ( | g, | | w | ) |
|
Inserts a loading message into different areas of the gallery container. The loading message is placed into the page inside of a div.flickrGalleryLoading element. PARAMS| g | string. Gallery id as stored in js object (.opt[]) | | w | string. Static value of where the loding image should be placed. Valid values are i=Image container, t=thumb container, g=gallery container |
clearLoadingMsg(g,w)| jQuery.flickrGallery.clearLoadingMsg = function ( | g, | | w | ) |
|
Removes a loading message from the area indicated by the input param. Searches for a div.flickrGalleryLoading element and deletes it (.remove) PARAMS| w | string. Static value indicating what region should have its loading message removed. see <insertLoadingMsg()> for a list of valid values. |
getImgUrl(f,m,i,h,s)| jQuery.flickrGallery.getImgUrl = function ( | f, | | m, | | i, | | h, | | s | ) |
|
Generic method that returns the url to a flickr image. PARAMS| f | STRING Server farm as return by the flickr api. | | m | STRING Server id as return by the flickr api. | | i | STRING Image id as return by the flickr api. | | h | STRING Secret as return by the flickr api. | | s | STRING Size of the image. Valid values are listed below. |
Valid Image Sizes | s | small square 75x75 | | t | thumbnail, 100 on longest side | | m | small, 240 on longest side | | (blank) | medium, 500 on longest side | | b | large, 1024 on longest side (only exists for very large original images) |
- - original image, either a jpg, gif or png, depending on source format
The remaineder of the url values are obtained from the albums key (which is a ference to the returned json from flickr. showAlbum(id)| jQuery.flickrGallery.showAlbum = function ( | id | ) |
|
Displays an album on the page. This method is meant o extend a gallery object (jQuery.flickrGallery.opt[idHere]). PARAMS| id | Album id as it is stored in the local object. |
clearImgArea()| jQuery.flickrGallery.clearImgArea = function () |
Clears the area where the images are displayed (class = .flickrGalleryImages) by removing all information about the previously viewed album. This involves clearing the navigation links, images, thumbnails, etc. This method extends the gallery object (jQuery.flickrGallery.opt[idHere]). PARAMSnone displayPics()| jQuery.flickrGallery.displayPics = function () |
Displays the images on the page, after their information has been loaded from flickr. This method extends the album object (jQuery.flickrGallery.opt[idHere].ablums[AlbumId]). PARAMSnone. buildThumbs()| jQuery.flickrGallery.buildThumbs = function () |
Builds the thumbs into the the area that holds them. This method extends the albums image object (jQuery.flickrGallery.opt[idHere].ablums[AlbumId].images) PARAMSnone. isAlbumPicInfoLoaded(f)| jQuery.flickrGallery.isAlbumPicInfoLoaded = function ( | f, | | retRef | ) |
|
Given a flickr photoset id, this method returns true or false indicating whether its photo information has already been loaded. Method is meant to extend the Gallery object (jQuery.flickrGallery.opt[idHere]). PARAMS| f | The flicker album/photoset id | | retRef | Boolean. True or false indicating whether a reference to the album object should be returned. |
RETURNS| boolean | True/False indicating if album picture information has alredy been loaded (true) or false, indicating not yet. |
buildImgList(json)| jQuery.flickrGallery.buildImgList = function ( | json | ) |
|
Processes a flickr.photosets.getPhotos json object returned by the flickr api. This method is meant o extend an album in a given gallery object (jQuery.flickrGallery.opt[idHere].ablums[AlbumId]). PARAMS| json | json object returned by flickr |
showImg(n)| jQuery.flickrGallery.showImg = function ( | n | ) |
|
Given an image number (int) or the letter p (previous) or n (next) this method display the full size image on the page. Method extends the object that holds the list of images for an album ( jQuery.flickrGallery.opt[idHere].ablums[AlbumId].images ) PARAMS| n | What image to show next. Value can be an interger defining exactly what image number to show or the letter ‘p’ for the previous image to the currently shown one or ‘n’ for the image that comes after the one currently shown. |
showThumbs()| jQuery.flickrGallery.showThumbs = function () |
Shows the thumbsnails to the user. This method extends the gallery object. (jQuery.flickrGallery.opt[idHere] PARAMSnone. hideThumbs()| jQuery.flickrGallery.hideThumbs = function () |
Hides the thumbsnails to the user. This method extends the gallery object. (jQuery.flickrGallery.opt[idHere]) PARAMSnone. slideShow()Turns on the slide show for a particular album. This method extends the album abject. (jQuery.flickrGallery.opt[idHere].ablums[AlbumId]) PARAMSnone. RETURNnothing. stopSlideshow()| jQuery.flickrGallery.stopSlideshow = function () |
Stops the slide show if it is currently on. This method extends the album object and clears the showOn attribute of the album object. (jQuery.flickrGallery.opt[idHere].ablums[AlbumId]) PARAMSnone. RETURNnothing. |