Blog Post Tumbnails With Image Zoom Effect

Thursday, 1 August 2013

Blog Post Tumbnails With Image Zoom Effect

-------------------------------------------------------------------------------------------------
FIND HEAD TAG AND REPLACE THIS CODE

</head>

------------------------------------------------------------------------------------------------
<link href='http://1-ps.googleusercontent.com/h/www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/A.style.css.pagespeed.cf.AQ7uWnsf26.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://1-ps.googleusercontent.com/h/www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/A.zoomooz.css.pagespeed.cf.PjDsbaaHg6.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/sylvester.js' type='text/javascript'/>
<script src='http://www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/purecssmatrix.js' type='text/javascript'/>
<script src='http://www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/jquery.animtrans.js' type='text/javascript'/>
<script src='http://www.htmldrive.net/edit_media/2011/201108/20110826/imagezoom/jquery.zoomooz.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(".zoom").click(function(evt) {
evt.stopPropagation();
$(this).zoomTo();
});
$(window).click(function(evt) {
evt.stopPropagation();
$("body").zoomTo();
});
$("body").zoomTo();
});
</script>

</head>

-----------------------------------------------------------------------------------------
FIND THIS B TAG LINE AND REPLACE BELOW CODE

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

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

<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType != "item"'>
<div class='post' id='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>

<div class='zoom' id='gallery'>
<ul>
<li class='zoom'>
<a expr:href='data:post.url'/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
</li>
</ul>
</div>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>/*<![CDATA[*/createSummaryAndThumb("summary<data:post.id/>");/*]]>*/</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear:both'/>
</div>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='single' id='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-body-2'>
<p><data:post.body/></p>
<div style='clear:both'/>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> on <data:post.dateHeader/> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span> <span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span> <span class='post-icons'>
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
</div>
</div>
</b:if>
</b:includable>

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

TUTORIAL FINSH

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

FURTHER INFORMATION:

POST CODE

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

/*---------------- Posts ---------------------*/
h2.date-header {
margin:1.5em 0 .5em;
display:none;
}

.post {
background: #f1f1f1;
border-top:#fff 1px solid;
border-left:#fff 1px solid;
border-right:#fff 1px solid;
border-bottom:#7c7c7c 1px solid;
float:left;
height:230px;
margin:10px 15px 0 5px;
overflow:hidden;
position:relative;
width:280px;
-moz-box-shadow: 0px 2px 10px #989898;
-webkit-box-shadow:0px 2px 5px #989898;
}

.post:hover {
background: #E4E4E4;
}

.post h3 {
margin-top:5px;
margin-bottom: 10px;
margin-left:15px;
font-size: 1.2em;
text-align:left;
padding-bottom:10px;
overflow:hidden;
height:10px;
text-transform: uppercase;

}

.post h3 a {
color: #000000;
text-decoration: none;
}

.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;
overflow:hidden;
height:198px;
}

.post-body blockquote {
line-height:1.3em;
}

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

.post blockquote {
margin:1em 20px;
}
.bottom {
margin-top:10px;
}
.category {
clear: both;
font-weight: bold;
float: left;
font-size: 0.9em;
padding-top: 10px;
}
.coomments {
font-weight: bold;
float: right;
font-size: 0.9em;
padding-top: 10px;
}

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

POST THUMBNAIL JAVA CODE

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