1
fliteBox Lightbox for Flickr
fliteBox is a lightbox for Flickr Photosets, dynamically built with JavaScript making calls to a PHP script.
Demo
Features
- Image Properties
- Author names, titles and descriptions entered in Flickr about your image will all carry over into fliteBox.
- Community Guidelines
- By linking back to Flickr fliteBox honors their Community Guidelines.
Download
Setup
- Apply for an API Key
- A key is required to access Flickr’s API. You may apply for one here: http://www.flickr.com/services/api/keys/apply/
- Grab a Photoset ID
- Photosets contain an ID located in their url. You will need this ID to call that particular set of photos. http://www.flickr.com/photos/largestartist/sets/72157606111408736/
Activate
Navigate to and then open the flite.js file located in the js folder. Enter your API Key between the quotes to assign the value to the apiKey variable.
var apiKey = "API Key provided by Flickr";
Install
Include this in the header of the document.
<script type="text/javascript" src="js/flite.js"></script>
Place the following where you want the gallery to appear. Also replace the value of the title attribute with the ID of your Photoset.
<div class="flite" title="72157606111408736"></div>
Customization
- CSS
- The following markup is created by JavaScript and appended to any DIV element with the class of “flite.” The href, src, title and alt attributes are all populated with the appropriate information from Flickr. You may use the markup below as a guide to modify or replace the included style sheet.
<ul> <li><a href="#"><img src="" title="" alt="" /></a></li> <li><a href="#"><img src="" title="" alt="" /></a></li> <li><a href="#"><img src="" title="" alt="" /></a></li> </ul>
- Gallery Image Sizes
- With the variable size you may choose which type of images are used to create the gallery.
- Language Type
- This is currently in place for future development. fliteBox is destined to be hot swappable with all scripting languages.
var size = 0; //0 = square, 1 = Thumbnail, 2 = Small, 3 = Medium, 4 = Large var langType = "php";
License
fliteBox by Jose Cuadra is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license may be available at http://dolfo.org/#contact.
Updates
- 06/29/2009
- Beta Released.
Troubleshooting
- Not working?
- The most common issue is that there is a conflicting onLoad script elsewhere on your page. You will need to open flite.js and delete the last line in the document. (window.onload = intFlite;) Then place intFlite(); inside of your window.onload event function.
Awesome! Flickr light box Application. I just used it on my first launched site for my personal portfolio.
I def Recommend it, makes life easier!
Thanks Jose aka webGURU =0)