Category Archives: development

jQuery plugins I use almost every day

In my nine-to-five I use every little technique at my disposal to make the software work for me and my clients. Mostly I hack things using jQuery, you know, moving things around in the dom, not ideal but if your software spits out rigid html what can you do.

There are times when you really should use a little bit of page enhancement and that’s just what jQuery plugins do. When I first started working on frontend projects, we were using jCarousel. I don’t know if there is a more modern version than the one we were using (surely there must be) but now I use bxSlider. It’s responsive, takes video (with an additional plugin – fitvids.js and can handle multiple instances and multiple types on the same page. The plugin has been written by Steven Wanderski or should that be “Wonderski”? There is excellent documentation and plenty of examples. My favourite jQuery plugin of all time.

Because the vast majority of sites we create are e-commerce sites, we use a plethora of image enhancement plugins. Again these are often old because the processs for updating these is too painful to describe here. We use lightbox, jqzoom, galleria and a few others but my new favourite is zoom by Jack Moore. I love it because like bxSlider you can configure it easily, not least, set the magnification easily.

Jack is also the developer of colorbox, and I’m going to replace the archaic lightbox that is embedded in our e-commerce software with it just as soon as I can.

Flickr Machine Tags

Five years ago I read a post by Jeremy Kieth about machine tags. I had a domino blog back then, now gone, but I wanted to do the same thing. The last couple of nights I’ve been fooling around getting the same thing working. I guess that means I’m about 5 years behind schedule.

I’m now going to explain how I did it, so that if anybody has a better way, they can tell me, and I can polish my own code a little.

child-themeMy previous post described my child theme and this is where I’ll be working to build the api call, processing the response and shoe-horning the the processed data into the content of a post.

In my last post I created a child theme and extended the css (not replaced). However the child theme can replace or extend any part of the original theme, and I don’t pretend to be an expert on this….yet.

To extend my child theme further I extended the functions.php file. To extend a file from the original them create a new one of the same name in the child theme. Add some php tags and we’re off.

In my example I’m first going to add a function to add a triple tag to the content by the “add_filter” function which takes $content (returned from the original function) and does something extra with it – In my case it adds a triple tag after the content has rendered in the browser.

Now I want to use that triple tag by calling the flickr api and returning an array of photos that have that tag. Then I will be able to parse the response from that api call and construct html img tags and urls to display those photos on my web page.

Before we go any further, and if you’re following along, to call the flickr api you will need an api key.

I am going to pop the api call in a separate function for neatness and use the flickr.photos.search method and call the whole thing flickrPhotosSearch:

Once that was working I replaced the echo’d successful message with:

This basically creates a section to hold the photos and constructs all of the image tags and links to append to the content. So now I just need to call this function from the “my_the_content_filter” function that I created at the beginning of this post.

I did a bit of polishing, including adding flickr colours to the triple tag to show off my extensive css skills. There is still a fair bit of polishing to do, like sorting out the api call failure message/display but for now if you have a flickr account, try tagging one of your photos with the triple tag of this post. 

tripletag