IMAGE SLICING EFFECT POST THUMBNAILS

Wednesday, 31 July 2013

IMAGE SLICING EFFECT POST THUMBNAILS

------------------------------------------------------------------------------------------
FIND HEAD TAG AND REPLACE HEAD TAG BELOW CODE AND
ADD TWO JAVA LINK FILES

<head>

------------------------------------------------------------------------------------------

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script src="https://blogger-hacks-all.googlecode.com/files/jquery.easing-1.3.min.js"></script>

----------------------------------------------------------------------------------------------
FIND B SKIN TAG AND ADD CODE
-------------------------------------------------------------------------------------------

body {
font-family:arial;
}

.qitem {
width:406px;
height:406px;
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;
}

.topRight {
background-position: top right;
}

.bottomLeft {
background-position: bottom left;
}

.bottomRight {
background-position: bottom right;
}

.clear {
clear:both;
}

]]></b:skin>

---------------------------------------------------------------------------------------------
FIND HEAD TAG

</head>

------------------------------------------------------------------------------------------

<script type='text/javascript'>
//<![CDATA[

$(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>

</head>

------------------------------------------------------------------------------------------------------------
FIND THIS B TAG LINE ADD BELOW CODE

<b:includable id='post' var='post'></b:includable>

------------------------------------------------------------------------------------------------------------

<b:includable id='post' var='post'>

</b:includable>

----------------------------------------------------------------------------------------
FURTHER INFORMATION

-------------------------------------------------------------------------------------------------------
YOU CAN CHANGE EASING JAVA FILE LINK WITH BELOW CODE

<script src="https://blogger-hacks-all.googlecode.com/files/jquery.easing-1.3.min.js"></script>
-----------------------------------------------------------------------------------------------------------
<script src="http://1-ps.googleusercontent.com/h/www.htmldrive.net/edit_media/2010/201007/20100713/slicing/js/jquery.easing.1.3.js.pagespeed.jm.d5gtiwpCzy.js"></script>

------------------------------------------------------------------------------------------------------------
OR USE THIS CODE
----------------------------------------------------------------------------------------------------------
<script src='http://www.htmldrive.net/edit_media/2010/201007/20100713/slicing/js/jquery.easing.1.3.js'/>

GENERALLY WE USE THIS CODE
-----------------------------------------------------------------------------------------

</head>

<body>

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