Purple Wave

JQuery Slicing
<div class="qitem">
<a href="http://mydomain.com/"><img src="jqueryslicing/images/myimage1.jpg" alt="My Image" title="My Image" width="504" height="336"/></a>
<span class="caption"><h4></h4><p></p></span>
</div>
<script src="jqueryslicing/js/jquery-1.3.1.min.js"></script>
<script src="jqueryslicing/js/jquery.easing.1.3.js"></script>
<script>

$(document).ready(function() {

//Custom settings
var style_in = 'easeOutBounce';
var style_out = 'jswing';
var speed_in = 1000;
var speed_out = 800;

//Calculation for corners
var neg = Math.round($('.qitem').width() / 2) * (-1);
var pos = neg * (-1);
var out = pos * 2;

$('.qitem').each(function () {

url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
alt = $(this).find('img').attr('img');

$('img', this).remove();
$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
$(this).children('div').css('background-image','url('+ img + ')');

$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});

}).hover(function () {

$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});

},

function () {

$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:-0, left:pos}, {duration:speed_in, easing:style_in});

}).click (function () {
window.location = $(this).find('a').attr('href');
});

});

</script>
Step 1
<style>

.qitem {
width:504px;
height:336px;
border:px solid #222;
margin:0px 0px 0px 0;
background: url('jqueryslicing/images/myimage2.jpg') no-repeat;
/* required to hide the image after resized */
overflow:hidden;

/* for child absolute position */
position:relative;

/* display div in line */
float:left;
cursor:hand; cursor:pointer;
}

.qitem img {
border:0;

/* allow javascript moves the img position*/
position:absolute;
z-index:200;
}

.qitem .caption {
position:absolute;
z-index:0;
color:#ffffff;
display:block;
margin: 40px 20px 40px 20px;
}

.qitem .caption h4 {
font-size:20px;
text-align:center;
padding:10px 5px 0 8px;
margin:0;
color:#000000;
}

.qitem .caption p {
font-size:30px;
padding:3px 5px 0 8px;
margin:0;
}



/* Setting for corners */

.topLeft, .topRight, .bottomLeft, .bottomRight {
position:absolute;
background-repeat: no-repeat;
float:left;
}

.topLeft {
background-position: 0px 0px;
}

.topRight {
background-position: -150px 0px;
}

.bottomLeft {
background-position: 0px -150px;
}

.bottomRight {
background-position: -150px -150px;
}

.clear {
clear:both;
}

</style>
Step 2
Step 3
Add a HTML box to your page and copy then paste the code below to the Body HTML
Change the mydomain.com link and the myimage1 to your needs.
Adjust the width and height to your image size
Keep the html box open for step 2
Copy and paste the code below to the same html box as above but to the Header HTML
Check side notes for needed adjustments to the code
Adjust the two speed settings to your liking.
Adjust the width and height to your image size.
Keep the html box open for step 3
Paste the code below to the Header html right below the code that you just added above.
Check side notes for needed adjustments to the code
Adjust the myimage2.jpg to your image
You will need two images for this project. The image that slices and a background image. For this project the slicing image is image1.jpg and the background image is image2.jpg Square ones are the easiest to work with. 300x300 for testing would be best.
You can use text over the background image. Add it between the h4 and p tags.
Adjust the qitem.caption margin to position your text.
Adjust each of the background-postion numbers until your image aligns properly with out overlap. The values are for an image that is 300x300. I would suggest starting out with images that size for testing.
Step 4
Now lets add the needed folders and files. Right click on each of the .js files and do save as.
jquery-1.3.1.min.js
jquery.easing.1.3.js
Ctrl + alt + f
Click on "Edit" then "Add files" now click on the {Root}.
Click on "Add a folder" Name this folder
jqueryslicing.
Click on
jqueryslicing then click on "Add a folder" and name it js.
Click on the
js folder then browse to the two js files you saved above and select them.
Click on the
jqueryslicing folder again then "Add a folder" and name it images.
Now click on the
images folder then "Add files" then browse to the images that you want to use for the project.
Adjust the myimage1.jpg to your image
Now try previewing your site to test then publish.
Back to Progrower.coffeecup.com
JQuery Slicing II Add a second slicer to the same page.