Flickrrss with Lightview integration
It’s been a while since the last time I wrote here in my blog and now I feel like writing again (maybe primarily because of the curiosity to try the latest Wordpress 2.5 release). Due to popular demand, this tutorial will show you how to integrate the famous flickrrss plugin by Dave Kellam with the lightview effect by Nick Stakenburg as demonstrated here on my Flickr stream.
1. Dowload prototype
2. Download scriptaculous (you will only need the scriptaculous.js and the effects.js files)
3. Download lightview from Nick Stackenburg’s site
4. Download the modified FlickrRSS plugin here. All credits still with Dave Kellam who originally created the plugin. I just did some tweakings. Upload this file to your wordpress’ ‘plugins’ folder.
5. Create a folder under your theme directory and name it ‘lightview’ . Under it, create a ‘js’ folder and upload all your js files in it (prototype.js, scriptaculous.js, and lightview.js). Next, create a ‘img’ folder and upload all the images from the lightview package. Lastly, a ‘css’ folder to hold the lightview.css file. (yes, i always practice folder organization and I want things to be neat on my projects =p )
6. Put this snippet on the header.php file of your template:
<script type="text/javascript" src="<?php bloginfo('template_url');?>/lightview/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/lightview/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/lightview/js/lightview.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url');?>/lightview/css/lightview.css" type="text/css" media="screen" />
7. Lastly, activate the plugin and configure the options.
8. Enjoy your flickr stream on lightview effect!
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Hi Dest1ned,
Yes I am using the latest Wordpress 2.5. I saw your site http://www.dest1ned.cn. Nice site.
Yes you need to put the snippet on your header.php file on your ’smashingtheme’ folder. Put it before the ‘</head> line.
Ok, all you need to do is upload the flickrrss plugin (flickrrss.php) file i modified on Step 4 to your ‘wp-content/plugins’ folder. Now on your ‘wp-content/themes/smashingtheme’ folder, follow steps 5 to step 8. Do let me know if you still don’t get it. =p
Well, I think I fail!
I do exactly as your instructions.– FlickrRSS under “Plugins” folder. “lightview” under my themefolder.
but I put the snippet in header.php, before the , after I refresh the pages, this only this line show,
<script type=”text/javascript” src=”
Fatal error: Function name must be a string in /home/dest1ned/domains/dest1ned.cn/public_html/wp-content/themes/smashingtheme/header.php on line 43
and other content gone. i don’t know why. did I donwload the wrong JS files? if possible, could you give me the link for download your js files?
can you try copying and pasting the snippet again to your header.php file. I made some changes and there shouldn’t be an ‘echo’ before the $bloginfo(’template_url’). Sorry my bad.
What you have to do is to remove the $ before the bloginfo, everything should work!
Nice job,
You can see it in action at http://www.turisbot.com
Just wondering if you are going to modify your php to work with the new features in flickrRSS 4.0… specifically the ability to display individual flickr sets?
Well… it’s not easier to package the full plugin instead of “download this, download that, order it like this”…
i cant make it work!!!!!!! T.T
OMG, nevermind.. i did it!!
still… I think it would be better if u do the whole package 
thanks for this awesome plugin
Just found this plugin that packages all the steps required for LightView. Works like a charm with this modification of FlickrRSS.
Great stuff!
But i’m having trouble doing it properly….
I’ve checked all the steps and i cant’t find what’s wrong…the pictures display in a blank background?
Thanks in advance….
I notice your site is throwing this error:
uncaught exception: script.aculo.us requires the Prototype JavaScript framework >= 1.6.0
Please download the latest Prototype from the site http://www.prototypejs.org/ and overwrite your current prototype.js file.
Your site says you are still using Prototype 1.6.0.
Download the latest version on:
http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js
which is a version 1.6.0.2 .
Change the appropriate path for the images in your lightview.js file.
I believe it should be pointed to the ‘img’ folder inside your lightview..
thanks for the tutorial.
too shame, i don’t have too much on the field, I can’t follow you up.
so eMac, are you using Wordpress 2.5. could you specify if you create the folder under “plugins” folder or like you say under the “themes” folder. I am quite confused, since if I do it your way, the wordpress doesn’t show lightview in the Plugins pages. and if I create lightview folder under “plugins”, I don’t see it too at the Plugins pages.
Sorry for my bad english, I hope you got me.
and one more thing, the snippet, where exactly shall I put in Header.php?
sorry again for so many stupit question.