Jquery Slicing

User Rating: / 0
PoorBest 

Hi, if you follow this tutorial you will make a very cool Slicing jQuery Gallery. It is a picture that is divided into four image when mouse is over, slipping each into a different corner!

Create a html page and copy this code:

<script src="js/jquery-1.3.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<title>Sliding jQuery</title>
<script>

$(document).ready(function() {

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

    //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>

<link href="style.css" type="text/css" rel="stylesheet" media="screen" />

In the body tag crate container for our images:

<div class="qitem">
    <a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="qitem">
    <a href="#"><img src="2.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>Umbrella</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="qitem">
    <a href="#"><img src="3.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>Maximum</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="clear"></div>

<div class="qitem">
    <a href="#"><img src="4.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>litle Blackbird</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="qitem">
    <a href="#"><img src="5.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>infinity crime</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="qitem">
    <a href="#"><img src="6.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>Indacy</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="clear"></div>

<div class="qitem">
    <a href="#"><img src="7.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>Moon Balloon</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="qitem">
    <a href="#"><img src="8.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>Yes Media</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="qitem">
    <a href="#"><img src="9.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>Balloon Chef</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

Now, create a css file with style named and copy the code:

.qitem {
width:126px;
height:126px;   
border:4px solid #222;   
margin:5px 5px 5px 0;
background: url('bg.gif') 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:#ccc;
display:block;
}

.qitem .caption h4 {
font-size:12px;
padding:10px 5px 0 8px;
margin:0;
color:#369ead;
}

.qitem .caption p {
font-size:10px;   
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: top left;    
}

The last step is to download the jquery plugin!

That is all, bye!

This script has been developed by http://www.queness.com/!