BLOG ZOOM EFFECT THUMBNAIL WITH POST TITLE TOP EFFECT

Saturday, 4 January 2014

BLOG ZOOM EFFECT THUMBNAIL WITH POST TITLE TOP EFFECT

-----------------------------------------------------------------------------------------
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 == "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: 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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
.cover a{color:#868686;text-decoration:none;}
.post-body a {text-decoration:none}

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

<b:if cond='data:blog.pageType == "item"'>
<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 == "static_page"'>
<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>

<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;
$('.thumb').hover(function(){
width = $('.thumb').width() * zoom;
height = $('.thumb').height() * zoom;
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
$(".cover", this).stop().animate({top:'180px'},{queue:false,duration:300});
}, function() {
$(this).find('img').stop(false,true).animate({'width':$('.thumb').width(), 'height':$('.thumb').height(), 'top':'0', 'left':'0'}, {duration:100});
$(".cover", this).stop().animate({top:'250px'},{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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='thumb'>
<a class='title' expr:href='data:post.url'>
<div expr:id='"summary" + 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("summary<data:post.id/>");</script>
</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></p>
<div style='clear: both;'/> 
</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 != "true"'/>
</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/
------------------------------------------------------------------------------------------------------------------

<head>

<title>Smooth Products Demo</title>

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>

<h1>Smooth Products</h1>

<img src="http://kthornbloom.com/smoothproducts/images/sp-loading.gif" alt=""><br>LOADING IMAGES</div>

</div>

A jQuery product image viewer by <a href="http://kthornbloom.com">Kevin Thornbloom</a>.

<ul>

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

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