ITT #4: Plugin Giveaway - FlickrScrollr
Build a Scrolling Flickr Gallery with jQuery and PHP
UPDATE: I've posted a new entry explaining FlickrScrollr. Please refer to that article for better implementation instructions, as well as a breakdown of how the code works.
In an effort to squeak in this week's Instant Tip Tuesday before midnight, I'm going to give away a PHP+jQuery plugin to create an animated Flickr module on your site. I call it FlickrScrollr.
View the Demo | Download the Files
What Is FlickrScrollr?
FlickrScrollr is a combination of PHP5, jQuery, and CSS. It utilizes PHP's SimpleXML extension to parse a user's Flickr RSS feed, then uses jQuery to add animation to the generated display of thumbnails, finally topping off the fun with Leandro Vieira Pinho's jQuery Lightbox plugin.
How Do I Use FlickrScrollr?
To implement FlickrScrollr on your site, simply add the following PHP to the head of the page where you want it to display:
<?php
require_once 'path/to/FlickrScrollr.inc.php';
$flickr = new FlickrScrollr('your_flickr_rss_feed_goes_here');
?>Next, wherever you want to place the module in your markup, add this line of PHP:
<?php echo $flickr ?>In the head of your document, you'll also need to link to the stylesheets for FlickrScrollr and jQuery Lightbox:
<link rel="stylesheet" href="css/jquery.lightbox-0.5.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jquery.flickrscrollr.css" type="text/css" media="screen" />Finally, right before the closing body tag, link to the JavaScript and activate the jQuery plugins!
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript" src="js/jquery.flickrscrollr.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#flickrscrollr ul li a').lightBox();
$('#flickrscrollr').FlickrScrollr();
});
</script>And that's it! The PHP will generate valid XHTML 1.0 Strict markup, and jQuery and CSS will do the rest!
Aren't You Going to Go Through the Code?
Yes. But I only have ten minutes until Wednesday at this point, and I really want to get this thing live. So I'll post an explanation thread in the very near future (this week, I promise). For now, go nuts! Add this puppy to your blog and let me know where to find it!
View the Demo | Download the Files
Want more content like this? Subscribe for FREE!
Site Sponsors
Popular Topics
Who Is This Guy?
Jason Lengstorf is a professional geek, specializing in PHP and jQuery applications, with a love for XHTML, CSS, and AJAX. If he's not glued to his keyboard, you're likely to find him in line for coffee, brewing his own beer, lifting heavy things, or pretending to know something about wine.
Get in Touch
Email:
answers@ennuidesign.com
Phone: +1 (406) 76-ENNUI (36684)
Twitter:
@jasonatennui
Facebook:
Jason Lengstorf
Comments for This Entry
I thought I had got it implemented, but I keep running into these two warnings, and am not sure how to proceed.
Warning: Invalid argument supplied for foreach() in /willandbeyond.com/FlickrScrollr/inc/FlickrScrollr.inc.php on line 29
Warning: Invalid argument supplied for foreach() in /willandbeyond.com/FlickrScrollr/inc/FlickrScrollr.inc.php on line 53
Any thoughts?
That warning would come from the RSS feed not being set.
When you set up the class, did you put in your Flickr RSS feed?
$flickr = new FlickrScrollr('http://yourfeedgoesinhere');
Yeah, that's set. I was having some trouble with that first, and would get this error:
Warning: simplexml_load_file() [function.simplexml-load-file]: I/O warning : failed to load external entity in /willandbeyond.com/FlickrScrollr/inc/FlickrScrollr.inc.php on line 27
But once I fixed that, it disappeared, however the other two warnings remain.
Ah, problem solved. So I was looking through your demo, and I noticed that your URL had '&format=rss_200' at the end.
The one Flickr gave me did not, but when I added that on, those errors disappear.
As a result, this line in the FlickrScroll.inc.php isn't activated:
$user = str_replace('&lang=en-us&format=rss_200','',$trim);
Might want to ease that line up somehow since apparently Flickr doesn't always specify that last bit in their feeds.
That seems odd, considering the $user variable never gets passed to a foreach() loop, but I fixed it nonetheless. I'll update the source and the download shortly.
Thanks for pointing that out!
And it's implemented:
http://www.willandbeyond.com/news/2009-02-26-flickr-galleries.php
I don't wish to appear ungrateful but please if you are not going to explain your code then at least comment everything in the files you give away.
I first tried running your example "as is", with my Flickr feed substituted, locally through Mamp. Although it worked I get this error message:
Notice: Undefined variable: thumbs in /Applications/MAMP/htdocs/FlickrScrollr/inc/FlickrScrollr.inc.php on line 61
So I thought I would try it on my server where all I get is
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /examples/flickr_scrollr/inc/FlickrScrollr.inc.php on line 4
I have changed nothing except the Flickr feed. My knowledge of PHP is rudimentry at best but as I haven't changed anything I don't see how it can be my fault and I can't work out how to fix it.
@Mike:
My apologies for the rushed release of this plugin. I'm going to post a walkthrough today on how and why the code works.
In regards to the errors you're seeing, I've corrected the one that will cause the "Undefined variable" notice in MAMP; if you don't want to re-download the source, you can add this line just after the first curly brace in the display() function:
$thumbs = NULL;
With the syntax error you're running into on your server, I think your server is using PHP 4, which doesn't support SimpleXML or some of the OOP syntax I've used for the class. Check with your host or run php_info() or php_version() to figure out if you're using PHP 4.
Sorry it gave you trouble! I'll post the full explanation in a bit. Let me know if you're running PHP5 and still seeing errors!
@Jason:
Thanks for a speedy reply. Sorry, I didn't mean to whinge but I was getting very frustrated and with an uncommented file and no explanation (which I see you have now added) I didn't know which way to turn.
So, the MAMP fix was simple and worked a treat.
You were right about PHP4. Seems my server has PHP5 but defaults to PHP4 so I fixed that with .htaccess and then found that the server blocks external file access by default. Eventually worked out how to fix that with a php.ini file and now it all works fine. Phew! Nothing is ever simple!
Now I can actually start to change it to look the way I want.
Thanks for the plug-in and thanks again for the help.
I left a comment on my site explaining how to have it display medium thumbnails instead of small ones; I'll paste it here as well.
In FlickrScrollr.inc.php:
On line 36, after you define $imgSRC, add in the following line:
$thumbSRC = str_replace('_s', '_m', $thumbSRC);
Flickr stores different thumbnail sizes and appends different letters (s, m, l) to the end of the filename.
After that, go into jquery.flickrscrollr.js, and replace all instances of 76 with 241. Here is also where you'll adjust the number of pics to be displayed (line 9), depending on your resoultion/desired box size.
Then it's just a matter of playing with the CSS to account for the new image sizes. Let me know if you need any help with that, and I can post the changes I made.
Enjoy!
You can see my take on it here. Thanks again and thanks to Will for his help.
Ok, I followed all directions exactly with my own added flickr rss feed added. Uploaded everything and nothing at all shows up on my web page. I then checked my server and it is only 4.4.9 uggghhhh! My questions are this: How hard is it to make a htaccess file to make this work for me?
And also even with my server only being 4.4.9, shouldn't I of at least seen something in my div where I added the php? There is nothing at all there.
@Anthony:
As far as creating a .htaccess file to make it all work, I don't know if that's going to help out. It all depends on your server; sometimes you can set the server to handle files as PHP5 by using something like:
AddType application/x-httpd-php5 .php
But again, check if your server supports PHP5 at all before you start playing with .htaccess files. They might have a much simpler solution (GoDaddy, for instance, only requires that you change a couple settings in your account control panel).
Without PHP5, though, this class won't work at all, as it's completely dependent on SimpleXML.
If you figure out the PHP thing and still have trouble, post a link and/or errors and I'll have a look for you.
Ok, thanks so much for the reply! I am checking with the host to see if I can switch to a linux server w/ php5
I added the AddType command within a .httaccess file and now I get the same error that Mike was getting up there.
Jason, I really hate to keep bugging you. I know you have better things to do than walk me through this, but I'm really determined to get this to work. Well I do not have a server running php5 but I was told this by them:
"By default Apache uses PHP 4 for .php extension. If you don't want to rename all your
scripts to .php5 you can do the following:
Create a .htaccess file and place the following line AddType x-mapp-php5 .php in it."
Well I did just that and now nothing happens again. Not even an error. I made the .htaccess file in addition to the one that is on my server by default. I think the two are conflicting? Here is what it says:
"# BEGIN s9y
#DirectoryIndex /index.php
php_value session.use_trans_sid 0
php_value register_globals off
php_value session.use_trans_sid 0
php_value register_globals off
deny from all
deny from all
deny from all
deny from all
deny from all
# END s9y
AddHandler x-mapp-php5 .php
Action x-mapp-php5 /system-bin/php5exe
"
The AddHandler command is already in the file and I also see deny from all .inc.php files?
Ok, again I'm sorry to post all this, but I'm desperate.
uggh, for some reason, all the items that are listed with the deny from all's didn't post to that last comment.
Here are all the items that are being denied? I know VERY LITTLE php.
These were all listed with "deny from all"
I'm Lost!
hahahah wow I am really sorry jason. I emailed you the full code because it isn't letting me post it all here.
But I fully understand if you don't have time to check it out.
Post a Comment
Want to show your face? Get a gravatar!