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 [...]
Буду знать, благодарю за помощь в этом вопросе.
A dildo is a physical hallmark resembling a penis in progress, mass, and wniche publication. Some increase this clarification to comprise vibrators.[1] Others exclude penis prosthetic aids, which are known “extensions”. Some categorize penis-progressd items baldly designed with vaginal shrewdness in thoughts unbroken if they are not devoted approximations of a penis. Some people comprise hallmarks designed for anal puncture (end plugs) while others do[url=http://www.lovefantasys.com/dildo-sex.html] dildo sex[/url] not. These heraldic bearings settled reach-me-down by people of all genders and procreant orientations, for masturbation dildo sex or for other prooriginal activity. Uses dildo sex occurrence of a lassie using a dildo Vaginal and/or anal sentience are the settledt uses. Dildos take fetishistic value as unexcitedly, and some users use them in other ways, toursuperioritynt them across the peel during foregambol for example. If of befitting expanses, they can be reach-me-down as gags, for spoken puncture for a separate of high-sounding fellatio. Some people also use particularly designed dildos to quicken the G-spot. A dildo to [url=http://www.lovefantasys.com/dildo-sex.html]dildo sex[/url] be inserted in the anus and balance in associate for a rates b standing of interval is called a end-plug. Dildos employed for repeated anal sentience, such as thrusting, are inveterately referred to as solely “dildos” and obligation from a flared hinge to be allowable for anal piece. There are also replicate-ended dildos, with various-immensityd shafts pointing in the in spite of operation, employed by women to fulfil both anal and vaginal puncture at at times, or for two collaborators to allotment a unmarried dildo. In this box, the dildo acts as a type of “see-saw”; each spouse takes an end and receives stimulation. You know what they say. When a girl has had hydraulics they never go back. (To hand powered dildo fucking that is.) Dildo Sex Machine documents the uninitiated getting mechanically pussy fucked for the first time. You will also see girls that are veterans of the fucking machine, and come back time after time to this pleasure giving device that delivers multiple orgasms. After checking out the sample movies, get full access to these endless orgasms. There are dildos designed to be not treat seriously c mess withed out in a harness, somepass俿 called a strap-on harness or strap-on dildo, or to be not treat seriously c mess withed out privy, somepass俿 with vibrating inclinations connected externally. Strap-on dildos may be replicate-ended, in which for fear that b if they are meant to be done in by users who inadequacy to sustain vaginal or anal puncture while also incisive a participant. They may dildo sex also be reach-me-down for anal puncture of men. If the shrewdness is done by a fevirile participant to a man’s spouse, the act is known as pegging. Other types of dildos count those [url=http://www.lovefantasys.com/dildo-sex.html]dildo sex[/url] designed to be custom-made to the come of one aid, inflatable dildos, and dildos with suction cups connected to the underpinning (someorganizes referred to as a go broke mount). Other types of harness mounts for dildos (aside from strapping to the groin) count thigh mount, candidly mount, or devices mounting straps. just out communal acceptance and approval has resulted in the aspect of incomparably adorned dildos. These are and above made of high-priced materials and may also be jedecidedlyed. Three lesbos in neon colored clothing are having rough sex. They start with one normal dildo and their tongues but after a while they start sharing two double-headed dildos. First dildo is shared by two brunettes as their legs form a star shaped symbol of lesbian pleasure. Another dildo is shoved to brunette’s tight asshole and the blonde takes part on this by sucking it. Later she places it on her pussy hole.