After receiving some great comments about the cute Flickr thumbnails and the associated popup effect in the About section, I thought I could share some tips on how a similar effect can be replicated inside a fresh Wordpress installation. Well, that’s not difficult to achieve, at all, but before start let me show you what we’re talking about (and don’t forget to click the thumbs, or you’ll miss half of the fun).
The Recipe…
First of all, you need to download the latest version of Fancybox, the jQuery lightbox-like plugin, and the pngFix plugin for IE6. Finally, download the Advanced FlickrRSS plugin for Wordpress I posted yesterday.
Ok, so now what we’re basically going to do is put these tools in a large bowl, add 2 cups of ninja CSS and mix them until they’re combined well.
Gorgeous CSS Decorated Galleries? Yuhm!
To build our terrific Flickr gallery we’ll make use of this wonderful tutorial by the Web Designer Wall about CSS Decorative Galleries: hot stuff, isn’t it? :)
It basically builds up a simple HTML structure like this one:
1 2 3 4 5 6 7 | <div class="flickr_gallery"> <div class="flickr_thumb"> <span> </span> <img alt="image" src="image.jpg" title="My Flickr Image" /> </div> <!-- other images here... --> </div> |
Where the empty <span/> tag is the one that does the trick: if you set position: relative to the .flickr_thumb, you are able put the <span/> box over the <img/> using the position: absolute property. Then you just need to give to the <span/> a PNG background image representing some kind of pretty frame. The Flickr image will appear underneath the transparent parts of the frame image.
That’s the basic concept, obviously. Web Designer Wall offers far more detailed instructions about the various effects that can be obtained with this simple but effective CSS tecnique and dozens of different demo galleries to learn/copy from.
For our Flickr gallery, this is the HTML code we’ll use:
1 2 3 4 5 6 7 8 9 | <div class="flickr_gallery"> <div class="flickr_thumb"> <span> </span> <a href="#" style="background-image: url(image_thumb.jpg)" ></a> </div> <!-- other images here... --> </div> <br class="clear"/> |
You might notice that I did not put the Flickr photo inside an <img/> tag like in the previous example, but I used it as a CSS background. This is a simple trick to remember when you need to trim a photo at a desidered size without making any editing. You can then decide which part of the image will be cut out with the background-position CSS property.
The reason why I used an <a/> tag instead of a default <div/> will be clear later.
Here’s the complete CSS stylesheet related to the above code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | body { font-family: Georgia,sans-serif; font-size: 14px; color: #333; text-align: center; padding: 20px; } .flickr_gallery { margin: 40px auto 5px; width: 415px; } .flickr_thumb { background: transparent url(imgs/polaroid.jpg) no-repeat scroll 50% 0; display: inline; float: left; height: 125px; margin: 15px 10px; text-align: center; width: 116px; position: relative; } .flickr_thumb a { display: block; height: 100px; position: relative; width: 100px; margin: 8px; background-position: 50% 50%; } .flickr_thumb span { background: transparent url(imgs/tape.png) no-repeat scroll 50% 0; height: 25px; left: 20px; position: absolute; top: -10px; width: 77px; z-index: 10; } .clear { clear: both; } |
May I introduce you FancyBox?
We now want to add that awesome FancyBox zooming effect to our gallery. To do that, add a link to the jQuery library, the FancyBox plugin and the pngFix plugin just before the closing tag of your <body> Wordpress template (you’ll probably find it on footer.php). Then, just after, add the code needed to setup Fancybox:
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript" src="js/jquery-1.2.3.js"></script> <script type="text/javascript" src="js/jquery.pngFix.js"></script> <script type="text/javascript" src="js/jquery.fancybox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flickr_gallery .flickr_thumb a").fancybox(); }); </script> </body> </html> |
We just have to add a couple of attributes more to our HTML thumbnails (rel to group the different images inside a single Fancybox gallery and title to add a caption to the photos) and the work is done:
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="flickr_gallery"> <div class="flickr_thumb"> <span> </span> <a href="image_big.jpg" title="My Flickr Image Title" rel="FlickrGallery" style="background-image: url(image_thumb.jpg)" ></a> </div> <!-- other images here... --> </div> <br class="clear"/> |
Please remember also to add a link to the Fancybox stylesheet into the <head> of your template, or the final result will be quite weird!
Let’s get dynamic: FlickrRSS!
Since we want a dynamic Flickr gallery, we now need to install the modified WP plugin FlickrRSS I posted yesterday. Once done, just go to the FlickrRSS Settings page, choose the photos to show, then fill the HTML Builder Form with the following values:
- Before List:
<div class="flickr_gallery">- Item HTML:
<div class="flickr_thumb"> <span></span> <a href="%image_medium%" title="%title%" rel="FlickrGallery" style="background-image: url(%image_square%)"></a> </div>
- After List:
</div><br class="clear"/>Great! Now, you just have to add the FlickrRSS widget on your sidebar, or, if you prefer, add the following PHP code where you want your gallery to appear:
<?php get_FlickrRSS(); ?>
Working Demo
We’re done. Your damn cute Flickr gallery should be ready for primetime. I prepared a working example page of the gallery we built together, just in case you need it. If you have any questions/suggestions, please let me know!
Wow now THAt was interesting
Jiff http://www.anonymize.kr.tc
very impressive
HTML documents are simple ASCII text files. This means that a simple text editor such as “Simpletext” for Macintosh or “Notepad” for Windows could be used to create HTML documents.
I think that last bit of code is missing an ‘r’, as in FlickrRSS, not FlickRSS.
hello, cant make it work, and someone help me please?
Can’t i make multiple gallery pages by using Flickr RSS?
What’s this? do I need to create my own HTML files for this? or I’ll just integrate it on wordpress..
please reply. thank you!
[...] Create Fancybox Flickr galleries inside Wordpress with FlickrRSS … [...]
I did the demo, but I don’t think I am correct. Can someone still give me a few more tutorials regarding this? :(
What I mean is, I did the .html demo codes. But I guess I am out of what this tutorial wants to give us.
I like to publish a post like what Stefano have above. but I didn’t got what the tutorial says
please help me.:(
[...] - Make the WordPress FancyBox plugin work http://www.stefanoverna.com/log/fancybox-flickrss-wordpress. This works with FlickrRSS plugin as [...]
Brilliant idea - which I have troubles to put into action. I’ve managed to include the CSS and js files correctly and my Flickr pics (start page, bottom) do look like your polaroids, however the Fancybox trick does not work. I’d be grateful if you could give me a hint how to get going (source code?); I feel the “code needed to setup Fancybox” bit does not work for reasons remote from my understanding. Thanks again, your help is dearly appreciated!
Спасибо. Просто спасибо, за красивые мысли вслух. В цитатник.
[...] - bookmarked by 3 members originally found by sogoo on 2009-02-03 WP+Fancybox+FlickrRSS? Wohaa! http://www.stefanoverna.com/log/fancybox-flickrss-wordpress - bookmarked by 6 members originally [...]
Спасибо крупное за предоставленную сообщение. Существо рад разместить ее у себя на дневнике. Если Вы не против, то я так и совершу.Если существуем какие-то проблеммы со копирайтом, постучитесь на мой дневник,я целое исправлю. Так же сложил Ваш должность на соцзакладки. Вообщем если что обращайтесь, - ввек выслушаю и постичь. Со, почитанием, Firestarter.
hey, thanks for what looks like a fantastic mix of plugins, however i’d appreciate some more insight as to what exactly we must do. i have downloaded all three plugins listed: where do i upload them to? (the advanced flickrRSS must obviously go in the plugins directory of wordpress, but what about the others…) where do i insert the html code you put there?
i notice im not the only one having problems with installation…
большое спасибо!Взяла себе тоже-пригодится.
Грузовики Социальный блог Авто саллон Лучший софт
Добрый день,админ!!! Сильно понравилась информация. полистал страници, то скажу, что сочиняете очень интелектуально и выбираете актуальные категории информации. Большое Спасибо!!!
бесплатные порно фильмы порно эротика wow квесты недвижимость в москве
Что то у Вас дизайн косит, сижу под ИЕ
[...] the rest here: Create Fancybox Flickr galleries inside Wordpress with FlickrRSS | Stefano Verna Tags: fancybox - flickr - jquery - slideshow Comments0 Leave a Reply Click here to [...]
[...] reading here: Create Fancybox Flickr galleries inside Wordpress with FlickrRSS | Stefano Verna Tags: fancybox - flickr - jquery - slideshow Comments0 Leave a Reply Click here to [...]
Буду знать, благодарю за помощь в этом вопросе.