 for a while i have been using the flickrrss wordpress plugin to show my recent flickr photos in the footer of my site since i have become more comfortable using jquery i thought i would use it to make the plugin better i created a demo page to see what the markup generated from the plugin normally is the markup is just an unordered list and i have done some basic css so that it looks halfway decent each photo just links to the original flickr page with the photo on it i kind of didnt like that because if someone wanted to see the larger version they would have to leave my site just to see it digging into the flickr photos if we take a look at the square image of me hugging my new tv we can see that it is 75x75 now if we take a closer look at the filename 2543094667 2ddfec7c73 s jpg we see that there is a s at the end lets take a look at the other photo sizes there are thumbnail t jpg small m jpg medium jpg large o jpg the medium sized photo looks like a nice size to display what if instead of linking the small square photos to their respective flickr page we open the medium sized photo in a lightbox lightbox the lightbox that i use is a hacked up version of the facebox script i modified it a little to use table less markup and for the entire page to grey out the lightbox is launched by setting the rel attribute equal to lightbox another modification i would like to make is to enable the lightbox to work in sets kind of like the lightbox 2 script but that is for another day the reason i like the facebox script is because you can also have inline content and content loaded via an ajax call tweaking the flickr markup since i do not want to modify the flickrrss plugin to change the markup i will just use jquery to change the markup on body load so there are two things that i want to do add rel= lightbox to each link containing the flickr photo change the href to link to the medium image instead of linking to the flickr page the code first lets add the rel= lightbox attribute to each of the links that are descendants of ul flickr on body load $ document ready function $ ul flickr a each function $ this attr rel lightbox next lets change the link to be the medium photo we will do this by copying the source of the image and then replacing s jpg with jpg $ document ready function $ ul flickr a each function $ this attr rel lightbox var imgsrc = $ this children attr src $ this attr href imgsrc replace s jpg jpg next we just initiate the lightbox script by targeting links that have a rel attribute of lightbox $ document ready function $ ul flickr a each function $ this attr rel lightbox var imgsrc = $ this children attr src $ this attr href imgsrc replace s jpg jpg $ a rel =lightbox facebox i have modified the first demo page to show this new functionality although you can just look at my footer too its pretty cool how just a few lines of jquery can drastically improve the user experience 