I recently ran into an issue at work where we have been spending countless hours making 6 and 12 bottle shots by hand in Photoshop. We would take one bottle and copy/clone it over 6 or 12 times, then save and resize the image for the web. It became so repetitive that I created a little script that would do the same thing, but only using one image and some fancy jQuery.

Here is my script:

JavaScript and jQuery

    

    

CSS to float the images left:

    

HTML to display the images:


	

See it in action:
jQuery Bottle Clone Example


0 thoughts on “jQuery Image Cloning Script”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

eCommerce

Optimizely and jQuery – The new A/B Testing Platform

Being that I work in the eCommerce space, we talk a lot about A/B testing and it has also become a huge topic of conversation on the internet/twitter/facebook. Over the past two years, there have Read more…

HTML5

What are Web Hooks?

In an effort to push my skills front-end development with jQuery, I have began trying to learn more about Web Hooks. Web Hooks are essentially user-defined callbacks or events, which can be used in a Read more…

jQuery

Smashing jQuery – Working on Updated eBook.

Just wanted to let all my fans who have purchased Smashing jQuery that I’m currently working with my publisher, Wiley, to fix all of the code errors that are present in the book and we Read more…