BLOG ZOOM EFFECT THUMBNAIL

Monday, 10 March 2014

BLOG ZOOM EFFECT THUMBNAIL

------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
READ MORE:
http://www.mastemplate.com/2012/06/johny-crott-template.html
http://jsfiddle.net/7FLbU/

ZOOM IMAGE SAVE HD

May 31, 2017 9:57 AM

Edit

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

<html>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: ZOOM EFFECT POST THUMBNAIL
VIDEO NOT CHANGE IN THUMBNAIL, WHEN CLICK
POST THUMBNAIL IMAGE DOWNLOAD IN PREVIEW SIZE
300 X 400
POST THUMBNAL NOT OPEN WITH AUTO READ MORE
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

h2.date-header{margin:1.5em 0 .5em}
.post{margin:.5em 0 .1em;padding:15px}
.post .jump-link{display:none}
.post h3{font:20px Oswald;line-height:1.2em;color:#333;margin:.25em 0 0;padding:0 0 4px;text-shadow:1px 1px 1px #ccc;}
.post h3 a,.post h3 a:visited,.post h3 strong{color:$titlecolor}
.post h3 strong,.post h3 a:hover{color:#444444}
.post-body{border-top:2px solid #bbb;font:12px Arial;padding-top:10px;line-height:1.4em;margin:1em 0 .75em;}
.post-body blockquote{line-height:1.3em}
.post-footer{color:#666;text-transform:none;letter-spacing:.01em;font:$postfooterfont;line-height:1.4em;margin:.75em 0}

.post img,table.tr-caption-container{overflow:hidden;margin-top:5px;padding:0}
.tr-caption-container img{border:none;padding:0}
.post blockquote{margin: 10px 10px 10px 20px;padding: 10px 15px 10px 15px;line-height: 1.6em;color: #333;background: #eee;border-left: 20px solid #ccc}
.post blockquote p{margin:.75em 0}

]]></b:skin>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post {
float:left;
height:230px;
width:280px;
margin:10px 15px 0 5px;
overflow:hidden;
position:relative;
}

.post img {
background-repeat:no-repeat;
background-position: bottom center;
height:180px;
margin-bottom:8000px;
margin-left:15px;
margin-top:0;
border: none;
padding-bottom:3px;
width:250px;
}
.post-body {
font-size: 0px;
}

.post-footer {
line-height: 1.4em;
font-size: 0.9em;
margin:12px;
border-top:1px solid #bbb;
}

.post h3 {
position: relative;
background-color:Black;
height:20px
font-size:20px

}

.post h3 a {
display:block;
color: Red;
text-decoration: none;
}

</style>
</b:if></b:if>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
this.imagePreview=function(){xOffset=10;yOffset=30;$("a.preview").hover(function(e){this.t=this.title;this.title="";var c=(this.t!="")?"<br/>"+this.t:"";$("body").append("<p id='preview'><img src='"+this.href+"' alt='Image preview' />"+c+"</p>");$("#preview").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast")},function(){this.title=this.t;$("#preview").remove()});$("a.preview").mousemove(function(e){$("#preview").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px")})};$(document).ready(function(){imagePreview()});
//]]>
</script>

<style>
#preview{position:absolute;-moz-box-shadow:0 4px 4px rgba(0,0,0,0.6);-webkit-box-shadow:0 4px 4px rgba(0,0,0,0.6);background:#e8380f;padding:5px;z-index:330;color:#fff;}
</style>

<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(e,d){var c=155; var d=400;var a=true;var b="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/s72-c/default.png";if(a==true&&e==""){e=b}image_tag='<a class="preview" href="'+e.replace("/s72-c/","/s"+d+"-d/")+'" title="Our Product Collection"><img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="item_thumb"" alt="'+d+'"/></a>';if(e!=""){return image_tag}else{return""}};
//]]>
</script>

</head>

<body>

<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>

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

<div class='post'>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='"Read more to " + data:post.title' rel='bookmark' target='_blank'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='"Read more to " + data:post.title' rel='bookmark' target='_blank'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-body'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:post.isFirstPost'>

</b:if>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));</script>
</b:if>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>

</b:if>
</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear: both;'/> 

</div>

</div>

</b:includable>

<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------
http://jsfiddle.net/7FLbU/
http://ezmediart.com/stock-photo/young-beautiful-woman-on-a-field-in-summer-time-16435.html
--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.2.js'></script>
<style type='text/css'>
.image {
float: left;
padding: 0px 10px 10px 0px;
}
.image img {
max-width: 240px;
max-height: 290px;
}
#preview{
position:absolute;
border:1px solid #0096B8;
background:#0096B8;
padding:5px;
display:none;
color:#fff;
max-width:500px;
border-radius: 4px;
}
#preview img {
max-width:500px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
this.imagePreview = function(){
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function(e){
$("body").append("<p id='preview'><img src='"+ this.href +"'/></p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
$(document).ready(function(){
imagePreview();
});
});

//]]>

</script>

</head>

<body>

<div class="image"><a href="https://www.google.com/images/srpr/logo11w.png" class="preview">
<img src="https://www.google.com/images/srpr/logo11w.png"/></a></div>

</body>

</html>