Saturday, 4 January 2014

BLOG ZOOM EFFECT THUMBNAIL WITH POST TITLE TOP EFFECT

FB Gadgets


-----------------------------------------------------------------------------------------
IT 'S ZOOM  IMAGE INSIDE THE THUMBNAIL AND GIVES POST TITLE TOP
HOVER EFFECT COPY AND PASTE BELOW CODE
-----------------------------------------------------------------------------------------------


<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOG POST THUMBNAILS WITH SLIDER EFFECT
- Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
]]></b:skin>
<style type='text/css'>
body{margin:0 auto;padding:0 0 0 0;background:#000;font-family:Arial,Century gothic,Tahoma,sans-serif;color:#fff;font-size:13px;}

/* Posts-----------------------------------------------*/
h2.date-header{margin:1.5em 0 .5em;display:none;}
.post{margin: 5px 0 25px 0;padding-right:10px;padding-bottom:5px;}
.post h3{text-align:center;margin:0 0 15px 0;padding:0;font-size:32px;}
.post h3 a,.post h3 a:visited,.post h3 strong{display:block;text-decoration:none;color:#fff;}
.post h3 strong,.post h3 a:hover{color:#fff;text-decoration:none;}
.post-body{margin:0 0 .75em;text-align:center}
.post-footer{margin:.75em 0;color:$sidebarcolor;text-transform:uppercase;letter-spacing:.1em;font:$postfooterfont;line-height:1.4em}
.post img{padding:6px 6px 6px 6px;background:#ff0000;border:2px solid #ff7a7a;margin:0 4px 4px 0}

</style>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post{width:450px;height:300px;background:#a60100;float:left;margin-right:14px;margin-left:14px;margin-bottom:30px;border:1px solid #ff4d4c;padding:10px;overflow:hidden;position:relative;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
.post-body{font-size:0;color:#eee}
.post-body img{position:relative;height:300px;width:450px;padding:0;border:none}
.post h3{width:450px;height:100px;opacity:1.0;color:#fff;text-align:center;top:15px;font-size:20px;font-weight:normal;position:absolute;text-align:left;}
.post h3 a:link,.post h3 a:visited{color:#000}
.thumb{
display:block;
overflow:hidden;
z-index:1;
position:relative;
text-decoration:none;
height:300px;
width:450px;
}
.snip {font-size:9pt;line-height:9px;}
.cover{
background:#febfbe;
color:#000;
position:absolute;
width:450px;
padding:0.2em;
font-size:15pt;
height:100px;
top:300px;
text-decoration:none;
opacity: .9;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
/* For IE 8 */
-MS-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=90)&quot;;
}
.cover a{color:#868686;text-decoration:none;}
.post-body a {text-decoration:none}

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#main-wrapper{width:970px;background:#333;color:#fff;padding:10px 15px 10px 15px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
</style>
</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#main-wrapper{background-color:#eeeeee;padding:10px 15px 10px 15px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
</style>
</b:if>
<!--[if IE 6]>
<style type='text/css'>
.post{margin-right:28px;margin-left:0px;}
.subscribesec{margin-top:0px;}
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
var move = -15;
var zoom = 1.2;
$(&#39;.thumb&#39;).hover(function(){
width = $(&#39;.thumb&#39;).width() * zoom;
height = $(&#39;.thumb&#39;).height() * zoom;
$(this).find(&#39;img&#39;).stop(false,true).animate({&#39;width&#39;:width, &#39;height&#39;:height, &#39;top&#39;:move, &#39;left&#39;:move}, {duration:200});
$(&quot;.cover&quot;, this).stop().animate({top:&#39;180px&#39;},{queue:false,duration:300});
}, function() {
$(this).find(&#39;img&#39;).stop(false,true).animate({&#39;width&#39;:$(&#39;.thumb&#39;).width(), &#39;height&#39;:$(&#39;.thumb&#39;).height(), &#39;top&#39;:&#39;0&#39;, &#39;left&#39;:&#39;0&#39;}, {duration:100});
$(&quot;.cover&quot;, this).stop().animate({top:&#39;250px&#39;},{queue:false,duration:300});
});
});
</script>
<script type='text/javascript'>
summary_noimg = 1;
summary_img = 1;
img_thumb_height = 270;
img_thumb_width = 200; 
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1) { var s=strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left;padding:0 10px 5px 0"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</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 hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<p>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='thumb'>
<a class='title' expr:href='data:post.url'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<h3><span class='cover'>
<data:post.title/><br/>
<span class='snip'>
<data:post.snippet/>
</span></span></h3>
</a></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<div class='post-footer-line-1'>
<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 != &quot;true&quot;'/>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line-2'>
</div>
<div class='post-footer-line post-footer-line-3'/></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>
 ----------------------------------------------------------------------------------------------------------------
SMOOTH ZOOM EFFECT
http://kthornbloom.com/smoothproducts/
------------------------------------------------------------------------------------------------------------------
<html lang="en">
<!-- http://kthornbloom.com/smoothproducts/ -->
<head>
<title>Smooth Products Demo</title>
<meta name="description" content="A lightweight and dead simple lightbox script">
<link rel="icon" href="favicon.ico">
<style type="text/css">
html, body {
height: 100%;
width: 100%;
}
.sp-loading {
text-align: center;
max-width: 270px;
padding: 15px;
border: 5px solid #eee;
border-radius: 3px;
font-size: 12px;
color: #888;
}
.sp-wrap {
display: none;
line-height: 0;
font-size: 0;
background: #eee;
border: 5px solid #eee;
border-radius: 3px;
position: relative;
margin: 0 25px 15px 0;
float: left;
max-width: 300px;
}
.sp-thumbs {
text-align: left;
display: inline-block;
}
.sp-thumbs img {
min-height: 50px;
min-width: 50px;
max-width: 50px;
}
.sp-thumbs a:link, .sp-thumbs a:visited {
width: 50px;
height: 50px;
overflow: hidden;
opacity: .3;
display: inline-block;
background-size: cover;
background-position: center;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.sp-thumbs a:hover {
opacity: 1;
}
.sp-thumbs a:active, .sp-current {
opacity: 1!important;
position: relative;
}
.sp-large {
position: relative;
overflow: hidden;
top: 0;
left: 0;
}
.sp-large a img {
max-width: 100%;
height: auto;
}
.sp-large a {
display: block;
}
.sp-zoom {
position: absolute;
left: -50%;
top: -50%;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
display: none;
}
.sp-lightbox {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, .9);
z-index: 500;
display: none;
}
.sp-lightbox img {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 90%;
max-height: 90%;
border: 2px solid #fff;
}
#sp-prev, #sp-next {
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 501;
color: #fff;
padding: 14px;
text-decoration: none;
background: #000;
border-radius: 25px;
border: 2px solid #fff;
width: 50px;
height: 50px;
box-sizing: border-box;
transition: .2s;
}
#sp-prev {
left: 10px;
}
#sp-prev:before {
content: '';
border: 7px solid transparent;
border-right: 15px solid #fff;
position: absolute;
top: 16px;
left: 7px;
}
#sp-next {
right: 10px;
}
#sp-next:before {
content: '';
border: 7px solid transparent;
border-left: 15px solid white;
position: absolute;
top: 16px;
left: 18px;
}
#sp-prev:hover, #sp-next:hover {
background: #444;
}
@media screen and (max-width: 400px) {
.sp-wrap {
margin: 0 0 15px 0;
}
#sp-prev, #sp-next {
top: auto;
margin-top: 0;
bottom: 25px;
}
}
body,
html {
padding: 0px;
margin: 0px;
background: #fff;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.page {
padding: 5px 30px 30px 30px;
max-width: 800px;
margin: 0 auto;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
background: #fff;
color: #555;
}
img {
border: none;
}
a:link,
a:visited {
color: #F0353A;
}
a:hover {
color: #8C0B0E;
}
ul {
overflow: hidden;
}
pre {
background: #333;
padding: 10px;
overflow: auto;
color: #BBB7A9;
}
.button {
text-decoration: none;
color: #F0353A;
border: 2px solid #F0353A;
padding: 6px 10px;
display: inline-block;
font-size: 18px;
}
.button:hover {
background: #F0353A;
color: #fff;
}
.demo {
text-align: center;
padding: 30px 0
}
.clear {
clear: both;
}
h1 {
font-size: 2em;
line-height: 1.5em;
margin: 20px 0;
font-weight: normal;
}
</style>
</head>
<body>
<br>
<div class="page">
<h1>Smooth Products</h1>
<div class="sp-loading">
<img src="http://kthornbloom.com/smoothproducts/images/sp-loading.gif" alt=""><br>LOADING IMAGES</div>
<div class="sp-wrap">
<a href="images/1.jpg"><img src="http://kthornbloom.com/smoothproducts/images/1_tb.jpg" alt=""></a>
<a href="images/2.jpg"><img src="http://kthornbloom.com/smoothproducts/images/2_tb.jpg" alt=""></a>
<a href="images/3.jpg"><img src="http://kthornbloom.com/smoothproducts/images/3_tb.jpg" alt=""></a>
<a href="images/4.jpg"><img src="http://kthornbloom.com/smoothproducts/images/4_tb.jpg" alt=""></a>
<a href="images/5.jpg"><img src="http://kthornbloom.com/smoothproducts/images/5_tb.jpg" alt=""></a>
<a href="images/6.jpg"><img src="http://kthornbloom.com/smoothproducts/images/6_tb.jpg" alt=""></a>
</div>
A jQuery product image viewer by <a href="http://kthornbloom.com">Kevin Thornbloom</a>.
<br><br>
<ul>
<li>Easy to use</li>
<li>Easy to style</li>
<li>Responsive</li>
<li>Handles different image sizes</li>
<li>'Quick zoom' on hover with mouse</li>
<li>Handles multiple instances on one page</li>
</ul>
<a href="http://github.com/kthornbloom/Smoothproducts" class="button" target="_blank">Download & Docs</a>
</div>
<br>
<script type="text/javascript" src="http://kthornbloom.com/smoothproducts/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://kthornbloom.com/smoothproducts/js/smoothproducts.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.sp-wrap').smoothproducts();
});
</script>
</body>
</html>

 ------------------------------------------------------------------------------------------------------------------
IMAGE ZOOM WITH ONE IMAGE
--------------------------------------------------------------------------------------------------------------------
<html lang="en">
<head>
<meta charset="UTF8">
<title>Title</title>
<script  type="application/javascript">
(function (root, factory) {
if (typeof module !== 'undefined' && module.exports) {
module.exports = factory();
} 
else {
root.ImageZoom = factory();
}
}(this, function () {
/**
* @param {Object} container DOM element, which contains an image to be zoomed (required)
* @param {Object} options js-image-zoom options (required)
*          @param {number} width Image width (required)
*          @param {number} height Image height (optional)
*          @param {number} zoomWidth  Zoomed image width optional if scale param is provided
*          @param {string} img Url of image to zoom. If provided container children is ignored (optional)
*          @param {number} scale Zoom scale. If provided zoomWidth param is ignored (optional if zoomWidth param is provided)
*          @param {object} offset {vertical, horizontal} offset in pixels between original image and zoomed image (optional)
*          @param {string} zoomStyle custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')
*/
return function ImageZoom(container, opts) {
"use strict";
var options = JSON.parse(JSON.stringify(opts));
if (!container) {
return;
}
var data = {
sourceImg: {
element: null,
width: 100,
height:100,
naturalWidth: 0,
naturalHeight: 0
},
zoomedImgOffset: {
vertical: 100,
horizontal: 100
},
zoomedImg: {
element: null,
width: 0,
height: 0
},
zoomLens: {
element: null,
width: 10,
height:10,
}
};

var div = document.createElement('div');
var lensDiv = document.createElement('div');
var scaleX;
var scaleY;
var offset;
data.zoomedImgOffset = options.offset || {vertical: 0, horizontal: 0};

function getOffset(el) {
if (el) {
var elRect = el.getBoundingClientRect();
return {left: elRect.left, top: elRect.top};
}
return {left: 0, top: 0};
}

function leftLimit(min) {
return options.width - min;
}

function topLimit(min) {
return options.height - min;
}

function getValue(val, min, max) {
if (val < min) {
return min;
}
if (val > max) {
return max;
}
return val;
}

function getPosition(v, min, max) {
var value = getValue(v, min, max);
return value - min;
}

function zoomLensLeft(left) {
var leftMin = data.zoomLens.width / 2;
return getPosition(left, leftMin, leftLimit(leftMin));
}

function zoomLensTop(top) {
var topMin = data.zoomLens.height / 2;
return getPosition(top, topMin, topLimit(topMin));
}

function setZoomedImgSize(options, data) {
if (options.scale) {
data.zoomedImg.element.style.width = options.width * options.scale + 'px';
data.zoomedImg.element.style.height = options.height * options.scale + 'px';
} else {
data.zoomedImg.element.style.width = options.zoomWidth + 'px';
data.zoomedImg.element.style.height = data.sourceImg.element.style.height;
}
}

function onSourceImgLoad() {
// use height, determined by browser if height is not set in options
options.height = options.height || data.sourceImg.element.height;
data.sourceImg.element.style.height = options.height + 'px';

setZoomedImgSize(options, data);

data.sourceImg.naturalWidth = data.sourceImg.element.naturalWidth;
data.sourceImg.naturalHeight = data.sourceImg.element.naturalHeight;
data.zoomedImg.element.style.backgroundSize = data.sourceImg.naturalWidth + 'px ' + data.sourceImg.naturalHeight + 'px';
if (options.zoomStyle) {
data.zoomedImg.element.style.cssText +=  options.zoomStyle;
}
scaleX = data.sourceImg.naturalWidth / options.width;
scaleY = data.sourceImg.naturalHeight / options.height;
offset = getOffset(data.sourceImg.element);
if (options.scale) {
data.zoomLens.width = options.width / (data.sourceImg.naturalWidth / (options.width * options.scale));
data.zoomLens.height = options.height / (data.sourceImg.naturalHeight / (options.height * options.scale));
} else {
data.zoomLens.width = options.zoomWidth / scaleX;
data.zoomLens.height = options.height / scaleY;
}
data.zoomLens.element.style.width = data.zoomLens.width + 'px';
data.zoomLens.element.style.height = data.zoomLens.height + 'px';
data.zoomLens.element.style.position = 'absolute';
data.zoomLens.element.style.background = 'white';
data.zoomLens.element.style.opacity = 0.4;
data.zoomLens.element.pointerEvents = 'none';
};
function setup() {
if (options.img) {
var img = document.createElement('img');
img.src = options.img;
data.sourceImg.element = container.appendChild(img);
} else {
data.sourceImg.element = container.children[0];
}
data.sourceImg.element.onload = onSourceImgLoad;
options = options || {};
container.style.position = 'relative';
data.sourceImg.element.style.width = options.width + 'px' || 'auto';
data.sourceImg.element.style.height = options.height ? options.height + 'px' : 'auto';
data.zoomLens.element = container.appendChild(lensDiv);
data.zoomLens.element.style.display = 'none';
data.zoomedImg.element = container.appendChild(div);
data.zoomedImg.element.style.position = 'absolute';
data.zoomedImg.element.style.top = data.zoomedImgOffset.vertical + 'px';
data.zoomedImg.element.style.left = options.width + data.zoomedImgOffset.horizontal + 'px';
data.zoomedImg.element.style.backgroundImage = 'url(' + data.sourceImg.element.src + ')';
data.zoomedImg.element.style.backgroundRepeat = 'no-repeat';
data.zoomedImg.element.style.display = 'none';
container.addEventListener('mousemove', events, false);
container.addEventListener('mouseenter', events, false);
container.addEventListener('mouseleave', events, false);
data.zoomLens.element.addEventListener('mouseenter', events, false);
data.zoomLens.element.addEventListener('mouseleave', events, false);
window.addEventListener('scroll', events, false);
return data;
}
function kill() {
container.removeEventListener('mousemove', events, false);
container.removeEventListener('mouseenter', events, false);
container.removeEventListener('mouseleave', events, false);
data.zoomLens.element.removeEventListener('mouseenter', events, false);
data.zoomLens.element.removeEventListener('mouseleave', events, false);
window.removeEventListener('scroll', events, false);
if (data.zoomLens && data.zoomedImg) {
container.removeChild(data.zoomLens.element);
container.removeChild(data.zoomedImg.element);
}
if (options.img) {
container.removeChild(data.sourceImg.element);
}
return data;
}

var events = {
handleEvent: function(event) {
switch(event.type) {
case 'mousemove': return this.handleMouseMove(event);
case 'mouseenter': return this.handleMouseEnter(event);
case 'mouseleave': return this.handleMouseLeave(event);
case 'scroll': return this.handleScroll(event);
}
},
handleMouseMove: function(event) {
var offsetX;
var offsetY;
var backgroundTop;
var backgroundRight;
var backgroundPosition;
if (offset) {
offsetX = zoomLensLeft(event.clientX - offset.left);
offsetY = zoomLensTop(event.clientY - offset.top);
backgroundTop = offsetX * scaleX;
backgroundRight = offsetY * scaleY;
backgroundPosition = '-' + backgroundTop + 'px ' +  '-' + backgroundRight + 'px';
data.zoomedImg.element.style.backgroundPosition = backgroundPosition;
data.zoomLens.element.style.cssText += 'top:' + offsetY + 'px;' + 'left:' + offsetX + 'px;display: block;';
}
},
handleMouseEnter: function() {
data.zoomedImg.element.style.display  = 'block';
data.zoomLens.element.style.display = 'block';
},
handleMouseLeave: function() {
data.zoomedImg.element.style.display  = 'none';
data.zoomLens.element.style.display = 'none';
},
handleScroll: function() {
offset = getOffset(data.sourceImg.element);
}
};
setup();
return {
setup: function() {
setup();
},
kill: function() {
kill();
},
_getInstanceInfo: function() {
return {
setup: setup,
kill: kill,
onSourceImgLoad: onSourceImgLoad,
data: data,
options: options
}
}
}
}
}));
</script>
</head>
<body>
<div id="img-container">
<img src="http://malaman.github.io/js-image-zoom/example/1.jpg" />
<div>
<script>
var options = {
width: 400,
zoomWidth: 500,
offset: {vertical: 0, horizontal:40}
};
new ImageZoom(document.getElementById("img-container"), options);
</script>
</body>
</html
---------------------------------------------------------------------------------------------------------------------
ONE IMAGE ZOOM EFFECT
---------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Magnify Image On Hover Example</title>
<!-- https://www.jqueryscript.net/zoom/magnify-image-hover.html -->
</head>
<body>
<h1>Magnify Image On Hover Example</h1>
<div class="zoom-box">
<img src="https://source.unsplash.com/6TIpY5KqCYo/600x450" width="200" height="150" />
</div>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/magnify-image-hover/css/jquery.jqZoom.css" type="text/css"/>
<style>
body { background: #ccc; }
.container { margin: 150px auto; max-width: 960px; }
.example {border: 1px solid #000; display: inline-block;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jqueryscript.net/demo/magnify-image-hover/js/jquery.jqZoom.js"></script>
<script>
$(function(){
$("img").jqZoom({
selectorWidth: 30,
selectorHeight: 30,
viewerWidth: 400,
viewerHeight: 300
});

})
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
READ MORE:
https://www.jqueryscript.net/demo/magnify-image-hover/css/jquery.jqZoom.css
----------------------------------------------------------------------------------------------------------------------
.zoom-box{
position: relative;
}
.zoom-box img{
vertical-align: bottom;
}
.zoom-box .zoom-selector{
position: absolute;
background-image: url("images/selector.png");
background-repeat: repeat;
display: none;
cursor: crosshair;
}
.zoom-box .viewer-box{
position: absolute;
border: 1px solid rgb(239,237,240);
display: none;
overflow: hidden;
}
.zoom-box .viewer-box>img{
position: absolute;
left: 0;
top: 0;
}
----------------------------------------------------------------------------------------------------------------------
READ MORE:
https://www.jqueryscript.net/demo/magnify-image-hover/js/jquery.jqZoom.js
----------------------------------------------------------------------------------------------------------------------
(function($){
var SPACING = 15;
//var ZOOM_TIMES = 10;
$.fn.jqZoom = function(options){
$(this).each(function(i, dom){
var me = $(dom);
_initZoom(me, options.selectorWidth, options.selectorHeight);
var imgUrl = options&&options.zoomImgUrl?options.zoomImgUrl:me.attr("src");
_initViewer(me, imgUrl, options.viewerWidth, options.viewerHeight);
})
}
var _initZoom = function(target, sWidth, sHeight){
var $zoom = $("<div />").addClass("zoom-selector").width(sWidth).height(sHeight);
target.after($zoom);
target.closest(".zoom-box").on({
mousemove: function(e){
var mouseX=e.pageX-$(this).offset().left;
var mouseY=e.pageY-$(this).offset().top;
var halfSWidth = sWidth/ 2,halfSHeight = sHeight/2;
var realX, realY;
if(mouseX < halfSWidth){
realX = 0;
}else if(mouseX + halfSWidth > target.width()){
realX = target.width() - sWidth;
}else{
realX = mouseX - halfSWidth;
}
if(mouseY < halfSHeight){
realY = 0;
}else if(mouseY + halfSHeight > target.height()){
realY = target.height() - sHeight;
}else{
realY = mouseY - halfSHeight;
}
$zoom.css({
left: realX,
top: realY
})
var viewerX = realX*($(this).find(".viewer-box>img").width() - $(this).find(".viewer-box").width())/(target.width() - sWidth);
var viewerY = realY*($(this).find(".viewer-box>img").height() - $(this).find(".viewer-box").height())/(target.height() - sHeight);
$(this).find(".viewer-box>img").css({
left: -viewerX,
top: -viewerY
})
},
mouseenter: function(){
$zoom.css("display", "block");
$(this).find(".viewer-box").css("display", "block");
},
mouseleave: function(){
$zoom.css("display", "none");
$(this).find(".viewer-box").css("display", "none");
}
})
}
var _initViewer = function(target, imgUrl, vWidth, vHeight){
var $viewer = $("<div />").addClass("viewer-box").width(vWidth).height(vHeight);
var $zoomBox = target.closest(".zoom-box");
$viewer.css({
left: target.width() + SPACING,
top: 0
})
_setOriginalSize(target, function(oWidth, oHeight){
var $img = $("<img src='"+imgUrl+"' />").width(oWidth).height(oHeight);
$viewer.append($img);
target.after($viewer);
});
}
var _setOriginalSize = function(target, callback){
var newImg = new Image();
newImg.src = target.attr("src")+"?date="+new Date();
$(newImg).on("load", function(){
callback(newImg.width, newImg.height);
})
}
})(jQuery);
----------------------------------------------------------------------------------------------------------------------
PIC ZOOMER WITH ONE IMAGE WITH JQUERY 1.10.1
----------------------------------------------------------------------------------------------------------------------
<html>
<!-- https://www.onaryman.com/index.php?main_page=product_info&products_id=713053 -->
<!-- https://jsfiddle.net/5n7xbonz/1/ -->
<head>
<title>PIC ZOOMER</title>
<script
type="text/javascript"
src="https://code.jquery.com/jquery-1.10.1.js"
></script>
<style id="compiled-css" type="text/css">
.picZoomer{
position: relative;
}
.picZoomer-pic-wp{
position: relative;
overflow: hidden;
}
.picZoomer-pic-wp:hover .picZoomer-cursor{
display: block;
}
.picZoomer-zoom-pic{
position: absolute;
top: 0;
left: 0;
}
.picZoomer-pic{
width: 100%;
height: 100%;
}
.picZoomer-zoom-wp{
display: none;
position: absolute;
z-index: 999;
overflow: hidden;
}
.picZoomer-cursor{
display: none;
cursor: crosshair;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
border: 1px solid #eee;
background-color: rgba(0,0,0,.1);
}
/* custom style */
.picZoomer-pic-wp,
.picZoomer-zoom-wp{
border: 1px solid #000;
}
/* EOS */
</style>
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
$('.picZoomer').picZoomer({
picWidth: $(this).width()
});
});
var clrTimeout;
$(window).resize(function(){
clearTimeout(clrTimeout);
clrTimeout = setTimeout(function(){
$('.picZoomer').html($('.imgToSave'));
$('.picZoomer').picZoomer({
picWidth: $(this).width()
});
}, 200);
});
;(function($){
$.fn.picZoomer = function(options){
var opts = $.extend({}, $.fn.picZoomer.defaults, options), 
$this = this,
$picBD = $('<div class="picZoomer-pic-wp"></div>').css({'width':opts.picWidth+'px', 'height':opts.picHeight+'px'}).appendTo($this),
$pic = $this.children('img').addClass('picZoomer-pic').appendTo($picBD),
$cursor = $('<div class="picZoomer-cursor"><i class="f-is picZoomCursor-ico"></i></div>').appendTo($picBD),
cursorSizeHalf = {w:$cursor.width()/2 ,h:$cursor.height()/2},
$zoomWP = $('<div class="picZoomer-zoom-wp"><img src="" alt="" class="picZoomer-zoom-pic"></div>').appendTo($this),
$zoomPic = $zoomWP.find('.picZoomer-zoom-pic'),
picBDOffset = {x:$picBD.offset().left,y:$picBD.offset().top};
console.log(opts.picWidth);
opts.zoomWidth = opts.zoomWidth||opts.picWidth;
opts.zoomHeight = opts.zoomHeight||opts.picHeight;
var zoomWPSizeHalf = {w:opts.zoomWidth/2 ,h:opts.zoomHeight/2};
$zoomWP.css({'width':opts.zoomWidth+'px', 'height':opts.zoomHeight+'px'});
$zoomWP.css(opts.zoomerPosition || {top: 0, left: opts.picWidth+30+'px'});
$zoomPic.css({'width':opts.picWidth*opts.scale+'px', 'height':opts.picHeight*opts.scale+'px'});
//初始化äŗ‹ä»¶
$picBD.on('mouseenter',function(event){
$cursor.show();
$zoomWP.show();
$zoomPic.attr('src',$pic.attr('src'))
}).on('mouseleave',function(event){
$cursor.hide();
$zoomWP.hide();
}).on('mousemove', function(event){
var x = event.pageX-picBDOffset.x,
y = event.pageY-picBDOffset.y;
$cursor.css({'left':x-cursorSizeHalf.w+'px', 'top':y-cursorSizeHalf.h+'px'});
$zoomPic.css({'left':-(x*opts.scale-zoomWPSizeHalf.w)+'px', 'top':-(y*opts.scale-zoomWPSizeHalf.h)+'px'});
});
return $this;
};
$.fn.picZoomer.defaults = {
picWidth: 320,
picHeight: 320,
scale: 5,
zoomerPosition: {top: '350px', left: '0px'}
/*,
zoomWidth: 320,
zoomHeight: 320*/
};
})(jQuery);
//]]></script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "5n7xbonz"
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>

</head>
<body>
<div class="picZoomer" style="width:100%;">
<img class="imgToSave" style="width:100%;" src="smiley.gif">
</div>
</body>
----------------------------------------------------------------------------------------------------------------------



Related Post for BLOG ZOOM EFFECT THUMBNAIL WITH POST TITLE TOP EFFECT

  • HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------ā€¦
  • GOOGLE PROJECT HOSTING ------------------------------------------------------------------------------------------------------------- STEP:1 LOGIN YOUR GOOGLE ACCOUNT STEP:2 GO TO SITE https://code.ā€¦
  • BLOGGER MEGA GRID AND LIST TEMPLATE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE: BLUE GRID AND LIST CODE WHICH SHOW YOUR POā€¦
  • BLOG PAGER WITH NEWER OLDER HOME POST ----------------------------------------------------------------------------------------------------- BLOG PAGER WITH NEWER OLDER HOME POST READ MORE: BLOG PAGER - YouTube ā€¦
  • Direct Link Generator CODE ----------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------------------ā€¦
  • EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+noā€¦
  • White Space Remover /************************************BODY************************************/ body { background-color: #eee; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; foā€¦
  • NEWS TICKER BLOGGER TEMPLATES ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODEIN BLOGGER TEMPLATE -----------------ā€¦
  • SEARCH BOX WITHOUT JAVA CODE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE <input id='input' name='q' placeholdeā€¦
  • INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' diā€¦
  • BLOG COMMENT FORM TEMPLATE <html> <head> <b:skin><![CDATA[/* ]]></b:skin> </head> <body> <div id='outer-wrapper'> <div id='main-wrapper'> <b:secā€¦
  • C DRIVE OPEN IN GOOGLE AND DATA URI IMAGE C DRIVE OPEN IN CHROME - YouTube ā–¶ 2:14 https://www.youtube.com/watch?v=aXpogZBq6fk 4 mins ago - Uploaded by SAVE MONEY C DRIVE OPEN IN CHROME. SAVE MONEY ... Chroā€¦
  • GOOGLE IMAGE HOSTING BY PICSA -------------------------------------------------------------------------------------------------------- READ MORE: -----------------------------------------------ā€¦
  • WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------ā€¦
  • PADDING BUTTON ------------------------------------------------------------------------------------------------------------ READ MORE: http://www.w3schools.com/css/css_padding.asp ----------ā€¦
  • BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ā–¶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/ā€¦
  • BLOG HOSTING HELP READ MORE: http://www.000webhost.com/ DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ā–¶ 5:17 https://www.youtube.com/watch?ā€¦
  • SEARCH YOUR VIDEO IN GOOGLE ----------------------------------------------------------------------------------------------- 1) CLICK SEAACH TOOLS TAB 2) CLICK 24 HOUR PAST OPTION ------------------------ā€¦
  • Platinum Arts Sandbox Free 3D Game Maker ----------------------------------------------------------------------------------------------------- READ MORE: ------------------------------------------------------ā€¦
  • Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ā–¶ 2:50 https:/ā€¦
  • SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlightā€¦
  • SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-hā€¦
  • CSS BORDER COLOR -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -------------------------------------------ā€¦
  • IMAGE CONVERTER SOFTWARE body { background: #F7F6F6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJLkVEJ3qEWo7QLxoIodbY4zPdTiYoP9fGbBTrurq74uG7Zcay6tGp74LmQ3o20PswnHIQysiDkM3ANkr7jC1ā€¦
  • BlogPagerWithJavaCode BLOG PAGER - YouTube ā–¶ 6:22 https://www.youtube.com/watch?v=u54p0R8tS30 4 mins ago - Uploaded by SAVE MONEY BLOG PAGER ... how to create paging,pagination in ā€¦
  • WHITE SPACE REMOVER CODE --------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML SECTION COPY CODE ā€¦
  • BLOG HOSTING HELP DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ā–¶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVEā€¦
  • RECOMMENDED POST SLIDE OUT FOR BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ------------------------------------------ā€¦
  • Generic Blogger Template ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE 0)BLOGGER TEMPLATE HAS WIDGET BASED LAYOā€¦
  • SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlā€¦
  • CODE OR TEXT WRITING BOX -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN HTML --------------------------------ā€¦
Posted by on Saturday, 4 January 2014 at 10:00
Labels:

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets