twitted 10 days ago Ora trovatemi voi una moglie che per regalo di laurea ti compra un arduino+ethernet su sparkfun... :)

WP+Fancybox+FlickrRSS? Wohaa!

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!

Friday September 5th, 2008

25 Responses to “WP+Fancybox+FlickrRSS? Wohaa!”

  1. Wow now THAt was interesting

    Jiff http://www.anonymize.kr.tc

    Jim beam on Saturday September 6th, 2008 at 7:50 am
  2. very impressive

    ashvin on Saturday September 6th, 2008 at 9:04 pm
  3. 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.

    html code for centering text on Thursday September 25th, 2008 at 12:08 pm
  4. I think that last bit of code is missing an ‘r’, as in FlickrRSS, not FlickRSS.

    Scott on Wednesday October 1st, 2008 at 12:41 am
  5. hello, cant make it work, and someone help me please?

    snow on Tuesday October 7th, 2008 at 7:27 am
  6. Can’t i make multiple gallery pages by using Flickr RSS?

    SEO Specialist on Friday November 7th, 2008 at 9:23 pm
  7. 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!

    bluestella on Thursday December 11th, 2008 at 6:35 am
  8. [...] Create Fancybox Flickr galleries inside Wordpress with FlickrRSS … [...]

    Indra EHM » Blog Archive » asddas on Friday December 12th, 2008 at 5:41 pm
  9. I did the demo, but I don’t think I am correct. Can someone still give me a few more tutorials regarding this? :(

    bluestella on Sunday December 14th, 2008 at 12:50 pm
  10. 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.:(

    bluestella on Sunday December 14th, 2008 at 12:53 pm
  11. [...] - Make the WordPress FancyBox plugin work http://www.stefanoverna.com/log/fancybox-flickrss-wordpress. This works with FlickrRSS plugin as [...]

    EXERCISES « cAmz’s Weblog on Thursday December 18th, 2008 at 11:45 am
  12. 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!

    Matthias Heil on Sunday January 11th, 2009 at 4:15 pm
  13. Спасибо. Просто спасибо, за красивые мысли вслух. В цитатник.

    cetosteola on Wednesday February 18th, 2009 at 11:49 pm
  14. [...] - 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 [...]

    Bookmarks about Wp on Sunday March 1st, 2009 at 5:15 am
  15. Спасибо крупное за предоставленную сообщение. Существо рад разместить ее у себя на дневнике. Если Вы не против, то я так и совершу.Если существуем какие-то проблеммы со копирайтом, постучитесь на мой дневник,я целое исправлю. Так же сложил Ваш должность на соцзакладки. Вообщем если что обращайтесь, - ввек выслушаю и постичь. Со, почитанием, Firestarter.

    UtipseWet on Friday March 13th, 2009 at 10:32 am
  16. 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…

    bthaxor on Saturday March 14th, 2009 at 9:50 am
  17. большое спасибо!Взяла себе тоже-пригодится.

    DrurfRaf on Sunday April 26th, 2009 at 1:52 pm
  18. Seolitelie on Thursday May 28th, 2009 at 11:05 am
  19. Добрый день,админ!!! Сильно понравилась информация. полистал страници, то скажу, что сочиняете очень интелектуально и выбираете актуальные категории информации. Большое Спасибо!!!

    callister-holloway on Saturday May 30th, 2009 at 8:56 am
  20. terertre on Sunday June 7th, 2009 at 3:43 pm
  21. Что то у Вас дизайн косит, сижу под ИЕ

    Orerowhow on Tuesday June 23rd, 2009 at 9:30 am
  22. [...] 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 [...]

    Create Fancybox Flickr galleries inside Wordpress with FlickrRSS | Stefano Verna on Tuesday July 14th, 2009 at 8:29 am
  23. [...] reading here: Create Fancybox Flickr galleries inside Wordpress with FlickrRSS | Stefano Verna Tags: fancybox - flickr - jquery - slideshow Comments0 Leave a Reply Click here to [...]

    Create Fancybox Flickr galleries inside Wordpress with FlickrRSS | Stefano Verna on Tuesday July 14th, 2009 at 8:29 am
  24. Буду знать, благодарю за помощь в этом вопросе.

    amusuamma on Sunday July 19th, 2009 at 9:04 pm
  25. 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.

    theonemnJes on Friday July 24th, 2009 at 7:48 pm

Leave a Reply