youtube + imageflow + auto slideshow

In this example I retrieve 25 movies from youtube with the keywords Leonard Cohen.
The movies are sorted with the option relevance and the images will be cached for one hour.
Imgeflow will start focussed on the retrieved 3th movie and with autostart slideshow.
The maximum result is set to 75 movies.

Other versions

• imageflow + dailymotion version
• imageflow + flickr version
• imageflow + picasa version

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 picasa 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.
Top

Download

Download: Imageflow youtube 1.1 .rar [26 KB]
Top

ChangeLog

• Now uses the GDATA api v2 with safesearch and removed the highquality hack
• 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 youtube player which can be dragged in your browser
• Colors to the youtube player can easily be changed
• Retrieve maximum 500 movies with next and previous arrows
  
• Works in all modern browsers
• The search will take a little bit more time. Once retrieved the images and optional the youtube feed will be cached.
• Requirements: php5, Curl or allow url fopen

Installation

Unrar and upload to your server
Open index.php and change the settings to your needs
//Default keywords
$videocode = "Leonard Cohen";
//Sorting - can be relevance (default), published, viewCount, rating
$sorteren = "relevance";
//Maximum results (cannot not be higher then 50)
$maximaal = 25;
//Background for video player and div layer
$background = "#FFFFFF";
//Reflection bgcolor
$reflection = "#012E55";
//safeSearch parameter none , moderate, strict
$safeSearch = "&safeSearch=strict";
//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 = false;
//Previous and next button
$prevnext = true;
//Empty cache after one hour 60*60, one day 24*60*60 or 7*24*60*60 one week
$cacheLife = 60*60;
//Maximum video's to retrieve (default 500)
$maxvideo = 500;

The following javascript settings can be changed.
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 = 10;
/* Autostart slideshow */
slideshowauto = true;
/* Show slideshow button */
slideshowbutton = true;
/* Slideshow time setting in seconds */
slideshowtime = 3000;

2. Youtube player
//Settings for the widht and height of the youtube player
videowidht = '425';
videoheight = '350';
//Settings for the positsion of the youtube player
videotop = '-350px';
videoleft = '-30px';
/* Output video, highslide, empty for normal link */
output = "video";

The searchform can be removed easily ( just needed it for the demo )
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 this example page I retrieve all the keywords and text content in this example case from the musician Leonard Cohen.
For an example look at Maxanter Music Productions (look at the html source)

About

Imageflow + youtube 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.

Comments on youtube page 9 of 9

Click here to add a comment

Your Name:


Email Address: (required, non-public)


Image verification:



Message:

 

ceasar

Posted 68 days ago

I don't know what you mean.
The title appears beneath the thumbs as you can see in this demo so I don't know why you need the captions

Juliet

Posted 68 days ago

Does this application have a captions option for pictures?

Lord-Miky

Posted 87 days ago

Great work but how can this be embedded into another web pageor another index.php page?

ceasar

Posted 139 days ago

Sure,
Just copy and paste this source and fill in the youtube url by hand

Chris

Posted 139 days ago

Is it possible to create a custom list of videos based upon the YouTube video id. I want to gather specific videos from mulitple YouTube accounts.

ceasar

Posted 158 days ago

from what I see the temp dir to your images is /img/ (reflect.php?img=./img/yuIYywYSzic.jpg)
S o I think or you haven't set the $imagesdir = "./img/"; to $imagesdir = "./image/";
or there maybe a problem with the subdir.
Try to set the config $cachexml = false;
to true then if the path is wrong you will get an error message since the xml file will be stored in the same img dir

<987654321>