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'>
<div class="qitem"><data:post.body/>
</div>
</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>
</div>
</html>
Related movie you might like to see :

PADDING BUTTON

CSS CLICK DROPDOWN

HTML CSS GREEN COMMENTS NOTEPAD++

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

TEXT COMPARE OR DUPLI TEXT FINDER

BLOCK JAVA SCRIPT BY GOOGLE CHROME

RELATED POST WIDGET LIST WITHOUT TH...

FLASH PLAYER SWF FILE DOWNLOAD ARCH...

WHACK A RAT CSS GAME

POST DATE THUMBNAIL IN BLOG

POST DATE HEADER IN BLOG

HTML SYNTAX HIGHLIGHTER
?
+
X
Recommended for you
Loading..
Related Post for IMAGE SLICING EFFECT POST THUMBNAILS
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------ā¦
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CTā¦
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://ā¦
TEXT COMPARE OR DUPLI TEXT FINDER ------------------------------------------------------------------------------------------------------------------ READ MORE: FIND RED TEXT IN GOOGLE: text compare downlā¦
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HDā¦
FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ā¶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&nā¦
POST DATE HEADER IN BLOG -------------------------------------------------------------------------------------------------------- DEFAULT LANGUAGE SETTING READ MORE: POST DATE TUMBNAIL IN BLOG http://fā¦
BLOGGER INCLUDABLE SECTION ------------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------ā¦
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection httā¦
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------ā¦
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nbā¦
CSS CLICK DROPDOWN -------------------------------------------------------------------------------------------------------------- CODE 1: http://koen.kivits.com/articles/pure-css-menu/ ---------ā¦
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN Wā¦
BLOCK JAVA SCRIPT BY GOOGLE CHROME -------------------------------------------------------------------------------------------------------------------------------------- java file block in google chrome hā¦
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/flaā¦
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_Uā¦
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------ā¦
POST DATE THUMBNAIL IN BLOG -------------------------------------------------------------------------------------------------------- READ MORE: 11:02 POST DATE THUMBNAIL IN BLOG HD Jan 2ā¦
DRAG AND DROP WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspā¦
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/sā¦
Labels:
I
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.