Flickr + imageflow + highslide
In this example I retrieve the maximum 20 pictures from Flickr Webalbums from the user luisa_m_c_m_cruz's and the album Near the sea.
Imgeflow will start focussed on the retrieved 2th picture.
The maximum is 20 pictures. ( max. restricted by Flikr )
Other versions
Shortcut to
Overview License Download Installation Tips About Comments
Overview
ImageFlow is a picture gallery, which allows an intuitive image handling. The basic idea is to digitally animate the thumbing through a physical image stack. The intuitive handling is automatically caused by the metaphorical use of the well known process of thumbing through.
This solution is known as the Cover Flow technique, which has been developed by the artist Andrew Coulter Enright. Now - after it has been bought by Apple
- it is used in iTunes and the file browser of Apples OSX.
This is not the official version of ImageFlow. It is a modified version by Ceasar Feijen from cfconsultancy to make it compatible for playing youtube , dailymotion movies and the Flickr photoalbum.
Grab yourself a copy of the official ImageFlow version at http://imageflow.finnrudolph.de.
For more information about ImageFlow read Finn's Documentation and check his Newsblog.
License
You're free to use this for both commercial or personal use as long as you link back to http://www.imageflow.nl.
Imageflow with youtube is released under a Creative Commons Attribution 3.0 License.
If you want to remove the link to this site you will have to pay 29 euro for every site.
Questions, comments or remarks can be posted here.
NB. Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. This means you need the author's permission to use Highslide JS on commercial websites.
Top
Download
Download: Imageflow Flickr 1.0 .rar [215 KB]
Top
ChangeLog
Version 1.0 Flickr + imageflow + auto slideshow- Fixed the imageflow js so it can be minified (only 6.52 kb)
- Added some options like starting picture, change small to big picture. these options can be set in a seperate js
- Added an optional automatic Slideshow with play again button. On every (click or mouse) event in imageflow it will stop.
- Added an extra function to resize a picture for a better quality
- Changed the example css for an easier adaption
- Added a Highslide for the popup image
- Works in all modern browsers
- Requirements: php5, Curl or allow url fopen
Installation
Unrar and upload to your server
Open index.php and change the settings to your needs
//Set the feed url(atom)
$feedURL = "http://api.flickr.com/services/feeds/photoset.gne?set=1550911&nsid=79873540@N00&lang=en-us&format=atom";
//Set the userid
$userid = "79873540@N00";
//Reflection bgcolor
$reflection = "#012E55";
//Directory where the images will be stored and cached (needs to be chmod to 775 or 777)
$imagesdir = "./img/";
//Cache the xml feed too true or false
$cachexml = true;
//Empty cache after one hour 60*60, one day 24*60*60 or 7*24*60*60 one week)
$cacheLife = 7*24*60*60;
These are the javascript settings you can change
1. Imageflow
/* Sets the numbers of images on each side of the focussed one */
conf_focus = 4;
/* 0 = default, 1 = small to big picture Change this to see the effect */
sizeAlgo = 0; //
/* Glide to a picture on startup. For example 10 is the 11th picture
Use 0 for the starting picture */
glidetopicture = 0;
/* Autostart slideshow */
slideshowauto = true;
/* Show slideshow button */
slideshowbutton = true;
/* Slideshow time setting in seconds */
slideshowtime = 3000;
/* Output video, highslide, empty for normal link */
output = "highslide";
Top
Tips
If the results are less then 10 movies, imageflow will loose his focus because in this example I have set the starting image on 10.
Solution is to set the glidetopicture to 0
glidetopicture = 0
If you want to use some javascript to handle the slideshow you can use the following functions
One picture forwards onclick="handle(-1);"
One picture backwards onclick="handle(1);"
Stop slideshow onclick="stopslideshow();"
Play slideshow onclick="slideshow(1);"
Changing the reflections.
For the reflection options check http://reflection.corephp.co.uk
Top
Why
As a consultant I am always looking for new ways to add more high density keywords ( search engine optimalisation ) for a customer.
What I did was add a youtube channel first for that client.
Then I retrieved the channel in an attractive way including all the text content and keywords for a better SEO in the website from that client.
As a result this works very well.
Also in the youtube and dailymotion example page I retrieve all the keywords and text content in this example case from Phil Collins.
For an example look at Maxanter Music Productions (look at the html source)
About
Imageflow + Flickr + highslide is brought to you by Ceasar Feijen from cfconsultancy.
This template design is made by Roland Poot from Pixelate.
Also Check out my demo with Imageflow, highslide viewer and sound effects
Or my demo with Youtube, highslide and Jeroen wijering flash player 4.0
Top
Info and comments
If you want any information about these applications place a comment below or check back regularly.
Top
Or sent me your flickr url and $userid and I will check it out
Sorry, no pictures found !
Ive checked the photostream and it has 20 photos. Ive changed the userid to match my flickr account. And finaly, Ive checked the perm on the img directory and it is set to 777.
Any idea what setting i have wrong? I can provide you the url and userid im using if it will help. These are the only things ive changed. So if there is anything else I have to change to get it to work, let me know.