jQuery Image Cloning Script
29 May 2009
Posted by Jake Rutter as CSS/Web Standards, JavaScript/Ajax, jQuery
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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//12 bottles - 486w - 40.5/bottle
//6 bottles - 486w - 81/bottle
var bottles = 12;
if (bottles == 12) {
alert("12 bottles");
for (i = 0 ;i < 12;i++)
{
$(".image-container").append("<div class='bot12'><img src='http://4seasonswine.com/labels/small/0109107.jpg' class='bottle'></div>");
//console.log("bottle"+i);
}
}
else if (bottles == 6) {
alert("6 bottles");
for (i = 0 ;i < 6;i++)
{
$(".image-container").append("<div class='bot6'><img src='http://4seasonswine.com/labels/small/0109107.jpg' class='bottle'></div>");
// for firebug console.log("bottle"+i);
}
}
});
</script>CSS to float the images left:
<style> .bot6 { float:left; width:81px; } .bot6 img { width:81px; } .bot12 { float:left; width:38px; } .bot12 img { width:40.5px; } </style>
HTML to display the images:
<body> <div class="image-container"></div> </body>
See it in action:
jQuery Bottle Clone Example
Category CSS/Web Standards, JavaScript/Ajax, jQuery
You can follow any responses to this entry through the RSS 2.0 feed.
No Responses to “jQuery Image Cloning Script”