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>
<!--[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;
$('.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;'/> <!-- 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 != "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/
------------------------------------------------------------------------------------------------------------------
<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>
--------------------------------------------------------------------------------------------------------------------
<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>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment