Overview

HTTPS SSH
JBMFLICKR - JQUERY PLUGIN

DESCRIPTION

Jbmflickr is a jQuery plugin that retrieves images from flickr and displays them in a lightbox-style gallery or slideshow or in a google map. 
Features: 
- quick installation
- search images by keyword, tag or googlemap location
- custom options for gallery, slideshow or map


HOW TO USE IT

For all instructions please see http://www.seven-m.com/jbmflickr


INSTALLATION

1) Download the zip file, unzip it and insert the content into a folder (e.g. 'jbmflickr') anywhere on your website.
2) Link the script 'jbmflickr.js' in the head section of your html file.
3) Define html elements <div class="jbmflickr"></div> or <div class="jbmflickrmap"></div> for a google map.



DEMO

http://www.seven-m.com/demos/jbmflickr


OPTIONS

Element attributes serve as plugin options, e.g. jbmflickr-userid="xxxxxx".
See examples and all available options below...



EXAMPLES
 
DISPLAY IMAGES

<div class="jbmflickr" 
    jbmflickr-userid="xxxxxxxx" 
    jbmflickr-initial_load="1" 
    jbmflickr-thumbnail_size="q" 
    jbmflickr-per_page="8" 
    jbmflickr-per_row="8" 
></div>
 

  
SEARCH BY KEYWORD OR TAG

<input type="text" class="jbmflickr-search-field" size="50" placeholder="Enter search text and hit enter"/>
 
 

USE TAG-CLOUD

<div class="jbmflickr-tag-cloud">
    <span>tags: </span>
    <a href="#animal">animal</a>
    <a href="#nature">nature</a>
    <a href="#celebration">celebration</a>
    <a href="#playing">playing</a>
</div>

Images will be displayed in the element with class "jbmflickr".
  
 

DISPLAY GEO TAGGED IMAGES IN GOOGLE MAP 

<div class="jbmflickrmap" style="height:400px; width: 100%;" 
    jbmflickrmap-userid="xxxxxx" 
    jbmflickrmap-zoom="2" 
></div>
 
 

SEARCH BY A GOOGLE LOCATION

<input type="text" class="jbmflickrmap-location" placeholder="Enter a location (country, city), e.g. 'Netherlands'" rel="myMap" />
The map zooms to the location entered in the field. If 'rel' attribute is defined, only the map with such 'id' will get zoomed.
 
 



PLUGIN OPTIONS

jbmflickr-userid
(string | required)
This is the flickr user ID. Attention: this is not the username but an ID. If you don't know what your ID is, check it via www.idgettr.com.

jbmflickr-initial_load	
(boolean | "1")
If "1" then plugin loads images upon the page loads. if "0" then plugin will not load anything.

jbmflickr-thumbnail_size 
(string | "m")	
Defines size of the images. Possible values are based on flickr specifications:
s small square 75x75
q large square 150x150
t thumbnail, 100 on longest side
m small, 240 on longest side
n small, 320 on longest side
- medium, 500 on longest side
z medium 640, 640 on longest side
...see http://www.flickr.com/services/api/misc.urls.html

jbmflickr-per_page	
(integer | "8")	
Defines number of images per page.

jbmflickr-per_row	
(integer | "8")	
Defines number of images per row. 

jbmflickr-link_images	
(boolean | "1")	
If "1" then image thumbnails will act as links to large images.   

jbmflickr-lightbox 
(boolean | "1")	
If "1" then lightbox will be used to enlarge image when a thumbnail is clicked.

jbmflickr-lightbox_theme 
(string | "default")
Name of the custom theme. You can create your own 'default.css' file and insert it into the folder "libs/lightbox/css/your_theme"
 

FOR IMAGES IN GOOGLE MAP 

jbmflickrmap-userid
(string | required)
This is the flickr user ID. Attention: this is not the username but an ID. If you don't know what your ID is, check it via www.idgettr.com.

jbmflickrmap-zoom
(integer | "5")	
Initial zoom. Values between 0 - 15.

jbmflickrmap-limit
(integer | "200")
Max. number of retrieved images.
 


CUSTOM STYLES 

You can change the look of the elements by overwriting the css declarations in your custom css file. 


 
NOT TO DO

Do NOT rename the 'jbmflickr.js' file neither change its location in reference to its parent directory. This would break proper determination of the base path, which is necessary for the inclusion of other scripts. 

 
 
CREDITS

The jbmflickr plugin wouldn't be possible without: 
- lightbox2 made by Lokesh Dhakar... http://lokeshdhakar.com/projects/lightbox2/
- jcycle2 made by Mike Alsup... http://jquery.malsup.com/cycle2/ 
- geoxml3 by Sterling Udell, Larry Ross… https://code.google.com/p/geoxml3/
- Marker Clusterer by Luke Mahe… https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerclusterer/