adds second zoom type
This commit is contained in:
parent
f518d116c7
commit
7c1ee9d4d7
|
|
@ -9,6 +9,8 @@ a script for zooming IMG elements with the mousewheel/trackpad.
|
|||
cd ./modules
|
||||
https://git.hangar.org/arcHIVE-tech/ImageViewer/archive/main.zip
|
||||
unzip main.zip
|
||||
mv imageviewer/ ImageViewer
|
||||
rm main.zip
|
||||
```
|
||||
|
||||
## LISENCE
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
/* Panaorama viewer custom */
|
||||
@media screen {
|
||||
.archive_org {
|
||||
/* width: 600px; */
|
||||
/* height: 400px; */
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 572 B |
|
|
@ -0,0 +1,28 @@
|
|||
/* Panaorama viewer custom */
|
||||
@media screen {
|
||||
.archive_org {
|
||||
/* width: 600px; */
|
||||
/* height: 400px; */
|
||||
}
|
||||
}
|
||||
|
||||
.zoom {
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* magnifying glass icon */
|
||||
.zoom:after {
|
||||
content:'';
|
||||
display:block;
|
||||
width:33px;
|
||||
height:33px;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
background:url(icon.png);
|
||||
}
|
||||
|
||||
.zoom img {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Jack Moore
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"name": "jquery-zoom",
|
||||
"description": "Enlarge images on click or mouseover.",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
},
|
||||
"keywords": [
|
||||
"zoom",
|
||||
"images",
|
||||
"ui",
|
||||
"jQuery",
|
||||
"jquery-plugin"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Jack Moore",
|
||||
"url": "http://www.jacklmoore.com",
|
||||
"email": "hello@jacklmoore.com"
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://www.opensource.org/licenses/mit-license.php"
|
||||
}
|
||||
],
|
||||
"homepage": "http://www.jacklmoore.com/zoom",
|
||||
"main": "jquery.zoom.js"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'/>
|
||||
<title>jQuery Zoom Demo</title>
|
||||
<style>
|
||||
/* styles unrelated to zoom */
|
||||
* { border:0; margin:0; padding:0; }
|
||||
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
|
||||
|
||||
/* these styles are for the demo, but are not required for the plugin */
|
||||
.zoom {
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* magnifying glass icon */
|
||||
.zoom:after {
|
||||
content:'';
|
||||
display:block;
|
||||
width:33px;
|
||||
height:33px;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
background:url(icon.png);
|
||||
}
|
||||
|
||||
.zoom img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zoom img::selection { background-color: transparent; }
|
||||
|
||||
#ex2 img:hover { cursor: url(grab.cur), default; }
|
||||
#ex2 img:active { cursor: url(grabbed.cur), default; }
|
||||
</style>
|
||||
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
|
||||
<script src='jquery.zoom.js'></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#ex1').zoom();
|
||||
$('#ex2').zoom({ on:'grab' });
|
||||
$('#ex3').zoom({ on:'click' });
|
||||
$('#ex4').zoom({ on:'toggle' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<span class='zoom' id='ex1'>
|
||||
<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
|
||||
<p>Hover</p>
|
||||
</span>
|
||||
<span class='zoom' id='ex2'>
|
||||
<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
|
||||
<p>Grab</p>
|
||||
</span>
|
||||
<span class='zoom' id='ex3'>
|
||||
<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
|
||||
<p>Click to activate</p>
|
||||
</span>
|
||||
<span class='zoom' id='ex4'>
|
||||
<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
|
||||
<p>Click to toggle</p>
|
||||
</span>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 326 B |
Binary file not shown.
|
After Width: | Height: | Size: 326 B |
Binary file not shown.
|
After Width: | Height: | Size: 572 B |
|
|
@ -0,0 +1,236 @@
|
|||
/*!
|
||||
Zoom 1.7.21
|
||||
license: MIT
|
||||
http://www.jacklmoore.com/zoom
|
||||
*/
|
||||
(function ($) {
|
||||
var defaults = {
|
||||
url: false,
|
||||
callback: false,
|
||||
target: false,
|
||||
duration: 120,
|
||||
on: 'mouseover', // other options: grab, click, toggle
|
||||
touch: true, // enables a touch fallback
|
||||
onZoomIn: false,
|
||||
onZoomOut: false,
|
||||
magnify: 1
|
||||
};
|
||||
|
||||
// Core Zoom Logic, independent of event listeners.
|
||||
$.zoom = function(target, source, img, magnify) {
|
||||
var targetHeight,
|
||||
targetWidth,
|
||||
sourceHeight,
|
||||
sourceWidth,
|
||||
xRatio,
|
||||
yRatio,
|
||||
offset,
|
||||
$target = $(target),
|
||||
position = $target.css('position'),
|
||||
$source = $(source);
|
||||
|
||||
// The parent element needs positioning so that the zoomed element can be correctly positioned within.
|
||||
target.style.position = /(absolute|fixed)/.test(position) ? position : 'relative';
|
||||
target.style.overflow = 'hidden';
|
||||
img.style.width = img.style.height = '';
|
||||
|
||||
$(img)
|
||||
.addClass('zoomImg')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
opacity: 0,
|
||||
width: img.width * magnify,
|
||||
height: img.height * magnify,
|
||||
border: 'none',
|
||||
maxWidth: 'none',
|
||||
maxHeight: 'none'
|
||||
})
|
||||
.appendTo(target);
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
targetWidth = $target.outerWidth();
|
||||
targetHeight = $target.outerHeight();
|
||||
|
||||
if (source === target) {
|
||||
sourceWidth = targetWidth;
|
||||
sourceHeight = targetHeight;
|
||||
} else {
|
||||
sourceWidth = $source.outerWidth();
|
||||
sourceHeight = $source.outerHeight();
|
||||
}
|
||||
|
||||
xRatio = (img.width - targetWidth) / sourceWidth;
|
||||
yRatio = (img.height - targetHeight) / sourceHeight;
|
||||
|
||||
offset = $source.offset();
|
||||
},
|
||||
move: function (e) {
|
||||
var left = (e.pageX - offset.left),
|
||||
top = (e.pageY - offset.top);
|
||||
|
||||
top = Math.max(Math.min(top, sourceHeight), 0);
|
||||
left = Math.max(Math.min(left, sourceWidth), 0);
|
||||
|
||||
img.style.left = (left * -xRatio) + 'px';
|
||||
img.style.top = (top * -yRatio) + 'px';
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.zoom = function (options) {
|
||||
return this.each(function () {
|
||||
var
|
||||
settings = $.extend({}, defaults, options || {}),
|
||||
//target will display the zoomed image
|
||||
target = settings.target && $(settings.target)[0] || this,
|
||||
//source will provide zoom location info (thumbnail)
|
||||
source = this,
|
||||
$source = $(source),
|
||||
img = document.createElement('img'),
|
||||
$img = $(img),
|
||||
mousemove = 'mousemove.zoom',
|
||||
clicked = false,
|
||||
touched = false;
|
||||
|
||||
// If a url wasn't specified, look for an image element.
|
||||
if (!settings.url) {
|
||||
var srcElement = source.querySelector('img');
|
||||
if (srcElement) {
|
||||
settings.url = srcElement.getAttribute('data-src') || srcElement.currentSrc || srcElement.src;
|
||||
}
|
||||
if (!settings.url) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
$source.one('zoom.destroy', function(position, overflow){
|
||||
$source.off(".zoom");
|
||||
target.style.position = position;
|
||||
target.style.overflow = overflow;
|
||||
img.onload = null;
|
||||
$img.remove();
|
||||
}.bind(this, target.style.position, target.style.overflow));
|
||||
|
||||
img.onload = function () {
|
||||
var zoom = $.zoom(target, source, img, settings.magnify);
|
||||
|
||||
function start(e) {
|
||||
zoom.init();
|
||||
zoom.move(e);
|
||||
|
||||
// Skip the fade-in for IE8 and lower since it chokes on fading-in
|
||||
// and changing position based on mousemovement at the same time.
|
||||
$img.stop()
|
||||
.fadeTo($.support.opacity ? settings.duration : 0, 1, $.isFunction(settings.onZoomIn) ? settings.onZoomIn.call(img) : false);
|
||||
}
|
||||
|
||||
function stop() {
|
||||
$img.stop()
|
||||
.fadeTo(settings.duration, 0, $.isFunction(settings.onZoomOut) ? settings.onZoomOut.call(img) : false);
|
||||
}
|
||||
|
||||
// Mouse events
|
||||
if (settings.on === 'grab') {
|
||||
$source
|
||||
.on('mousedown.zoom',
|
||||
function (e) {
|
||||
if (e.which === 1) {
|
||||
$(document).one('mouseup.zoom',
|
||||
function () {
|
||||
stop();
|
||||
|
||||
$(document).off(mousemove, zoom.move);
|
||||
}
|
||||
);
|
||||
|
||||
start(e);
|
||||
|
||||
$(document).on(mousemove, zoom.move);
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
);
|
||||
} else if (settings.on === 'click') {
|
||||
$source.on('click.zoom',
|
||||
function (e) {
|
||||
if (clicked) {
|
||||
// bubble the event up to the document to trigger the unbind.
|
||||
return;
|
||||
} else {
|
||||
clicked = true;
|
||||
start(e);
|
||||
$(document).on(mousemove, zoom.move);
|
||||
$(document).one('click.zoom',
|
||||
function () {
|
||||
stop();
|
||||
clicked = false;
|
||||
$(document).off(mousemove, zoom.move);
|
||||
}
|
||||
);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
);
|
||||
} else if (settings.on === 'toggle') {
|
||||
$source.on('click.zoom',
|
||||
function (e) {
|
||||
if (clicked) {
|
||||
stop();
|
||||
} else {
|
||||
start(e);
|
||||
}
|
||||
clicked = !clicked;
|
||||
}
|
||||
);
|
||||
} else if (settings.on === 'mouseover') {
|
||||
zoom.init(); // Preemptively call init because IE7 will fire the mousemove handler before the hover handler.
|
||||
|
||||
$source
|
||||
.on('mouseenter.zoom', start)
|
||||
.on('mouseleave.zoom', stop)
|
||||
.on(mousemove, zoom.move);
|
||||
}
|
||||
|
||||
// Touch fallback
|
||||
if (settings.touch) {
|
||||
$source
|
||||
.on('touchstart.zoom', function (e) {
|
||||
e.preventDefault();
|
||||
if (touched) {
|
||||
touched = false;
|
||||
stop();
|
||||
} else {
|
||||
touched = true;
|
||||
start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
|
||||
}
|
||||
})
|
||||
.on('touchmove.zoom', function (e) {
|
||||
e.preventDefault();
|
||||
zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
|
||||
})
|
||||
.on('touchend.zoom', function (e) {
|
||||
e.preventDefault();
|
||||
if (touched) {
|
||||
touched = false;
|
||||
stop();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if ($.isFunction(settings.callback)) {
|
||||
settings.callback.call(img);
|
||||
}
|
||||
};
|
||||
|
||||
img.setAttribute('role', 'presentation');
|
||||
img.alt = '';
|
||||
img.src = settings.url;
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.zoom.defaults = defaults;
|
||||
}(window.jQuery));
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/*!
|
||||
Zoom 1.7.21
|
||||
license: MIT
|
||||
http://www.jacklmoore.com/zoom
|
||||
*/
|
||||
(function(o){var t={url:!1,callback:!1,target:!1,duration:120,on:"mouseover",touch:!0,onZoomIn:!1,onZoomOut:!1,magnify:1};o.zoom=function(t,n,e,i){var u,c,a,r,m,l,s,f=o(t),h=f.css("position"),d=o(n);return t.style.position=/(absolute|fixed)/.test(h)?h:"relative",t.style.overflow="hidden",e.style.width=e.style.height="",o(e).addClass("zoomImg").css({position:"absolute",top:0,left:0,opacity:0,width:e.width*i,height:e.height*i,border:"none",maxWidth:"none",maxHeight:"none"}).appendTo(t),{init:function(){c=f.outerWidth(),u=f.outerHeight(),n===t?(r=c,a=u):(r=d.outerWidth(),a=d.outerHeight()),m=(e.width-c)/r,l=(e.height-u)/a,s=d.offset()},move:function(o){var t=o.pageX-s.left,n=o.pageY-s.top;n=Math.max(Math.min(n,a),0),t=Math.max(Math.min(t,r),0),e.style.left=t*-m+"px",e.style.top=n*-l+"px"}}},o.fn.zoom=function(n){return this.each(function(){var e=o.extend({},t,n||{}),i=e.target&&o(e.target)[0]||this,u=this,c=o(u),a=document.createElement("img"),r=o(a),m="mousemove.zoom",l=!1,s=!1;if(!e.url){var f=u.querySelector("img");if(f&&(e.url=f.getAttribute("data-src")||f.currentSrc||f.src),!e.url)return}c.one("zoom.destroy",function(o,t){c.off(".zoom"),i.style.position=o,i.style.overflow=t,a.onload=null,r.remove()}.bind(this,i.style.position,i.style.overflow)),a.onload=function(){function t(t){f.init(),f.move(t),r.stop().fadeTo(o.support.opacity?e.duration:0,1,o.isFunction(e.onZoomIn)?e.onZoomIn.call(a):!1)}function n(){r.stop().fadeTo(e.duration,0,o.isFunction(e.onZoomOut)?e.onZoomOut.call(a):!1)}var f=o.zoom(i,u,a,e.magnify);"grab"===e.on?c.on("mousedown.zoom",function(e){1===e.which&&(o(document).one("mouseup.zoom",function(){n(),o(document).off(m,f.move)}),t(e),o(document).on(m,f.move),e.preventDefault())}):"click"===e.on?c.on("click.zoom",function(e){return l?void 0:(l=!0,t(e),o(document).on(m,f.move),o(document).one("click.zoom",function(){n(),l=!1,o(document).off(m,f.move)}),!1)}):"toggle"===e.on?c.on("click.zoom",function(o){l?n():t(o),l=!l}):"mouseover"===e.on&&(f.init(),c.on("mouseenter.zoom",t).on("mouseleave.zoom",n).on(m,f.move)),e.touch&&c.on("touchstart.zoom",function(o){o.preventDefault(),s?(s=!1,n()):(s=!0,t(o.originalEvent.touches[0]||o.originalEvent.changedTouches[0]))}).on("touchmove.zoom",function(o){o.preventDefault(),f.move(o.originalEvent.touches[0]||o.originalEvent.changedTouches[0])}).on("touchend.zoom",function(o){o.preventDefault(),s&&(s=!1,n())}),o.isFunction(e.callback)&&e.callback.call(a)},a.setAttribute("role","presentation"),a.alt="",a.src=e.url})},o.fn.zoom.defaults=t})(window.jQuery);
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "jquery-zoom",
|
||||
"description": "Enlarge images on click or mouseover.",
|
||||
"version": "1.7.21",
|
||||
"keywords": [
|
||||
"zoom",
|
||||
"images",
|
||||
"ui",
|
||||
"jquery-plugin"
|
||||
],
|
||||
"author": {
|
||||
"name": "Jack Moore",
|
||||
"url": "http://www.jacklmoore.com",
|
||||
"email": "hello@jacklmoore.com"
|
||||
},
|
||||
"main": "jquery.zoom.js",
|
||||
"license": "MIT",
|
||||
"homepage": "http://www.jacklmoore.com/zoom",
|
||||
"demo": "http://www.jacklmoore.com/zoom",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://github.com/jackmoore/zoom.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
## About Zoom
|
||||
|
||||
A small jQuery plugin for zooming images on mouseover or mousedown. See the [project page](http://jacklmoore.com/zoom/) for documentation and a demonstration. Released under the [MIT license](http://www.opensource.org/licenses/mit-license.php).
|
||||
|
||||
To compile the .min.js file, run: `uglifyjs --comments '/license:/' < jquery.zoom.js > jquery.zoom.min.js`
|
||||
|
||||
## Changelog:
|
||||
|
||||
##### v1.7.21 - 2018/4/26
|
||||
* Added empty alt attribute. Resolves #134
|
||||
|
||||
##### v1.7.20 - 2017/4/25
|
||||
* Replaced alt and aria-hidden with role attribute. Resolves #121
|
||||
|
||||
##### v1.7.19 - 2017/4/20
|
||||
* Added alt and aria-hidden attributes to the zoom layer img element. Merged #121
|
||||
|
||||
##### v1.7.18 - 2016/9/9
|
||||
* Fixed regression from 1.7.16 that occurred when the target option was passed a selector. Fixes #113
|
||||
|
||||
##### v1.7.17 - 2016/9/7
|
||||
* Detect src using element.currentSrc to support srcset. Fixes #82
|
||||
|
||||
##### v1.7.16 - 2016/9/7
|
||||
* Cancelled the onload event when calling destroy. Fixes #83
|
||||
|
||||
##### v1.7.15 - 2016/2/8
|
||||
* Added touchend event, might fix #97 #75 #62. Merges #100.
|
||||
|
||||
##### v1.7.14 - 2015/3/18
|
||||
* Fixes bug with passing the `target` property a selector, rather than a DOM node. Merges #73.
|
||||
|
||||
##### v1.7.13 - 2014/4/29
|
||||
* Destroy event does a better job of reseting back to the original state.
|
||||
|
||||
##### v1.7.12 - 2014/2/11
|
||||
* Set zoomed image's maxHeight to none, just in case a maxHeight has been defined for images in the CSS.
|
||||
|
||||
##### v1.7.11 - 2013/11/12
|
||||
* Added magnify property to allow scaling of the zoomed image.
|
||||
|
||||
##### v1.7.10 - 2013/10/16
|
||||
* Fixed bug relating to the size of the target element when using the target property (Fixes #35)
|
||||
|
||||
##### v1.7.9 - 2013/10/16
|
||||
* Added simple fallback for touch events (Fixes #37 #39)
|
||||
* Renamed minified file to jquery.zoom.min.js to match jQuery's convention.
|
||||
|
||||
##### v1.7.8 - 2013/7/30
|
||||
* Will use data-src attribute if present before checking for the presence of an src attribute.
|
||||
|
||||
##### v1.7.7 - 2013/7/14
|
||||
* Restricted grab to just the left-mouse-button on mousedown
|
||||
|
||||
##### v1.7.6 - 2013/6/24
|
||||
* Fixed misnamed onZoomOut callback
|
||||
|
||||
##### v1.7.5 - 2013/6/19
|
||||
* Fixed a bug with absolutely or fixed position target elements
|
||||
* Set the value of `this` to be zoom-image element for the onZoomIn and onZoomOut callbacks
|
||||
|
||||
##### v1.7.4 - 2013/6/18
|
||||
* Namespaced events to assist unbinding events.
|
||||
* Added destroy event to unbind zoom events & remove created img element. Example:
|
||||
$('.example').trigger('zoom.destroy');
|
||||
* Added onZoomIn and onZoomOut callbacks
|
||||
|
||||
##### v1.7.3 - 2013/6/10
|
||||
* Fixing mistake made in previous commit
|
||||
|
||||
##### v1.7.2 - 2013/6/6
|
||||
* Replaced new Image() with document.createElement('img') to avoid a potential bug in Chrome 27.
|
||||
|
||||
##### v1.7.1 - 2013/3/12
|
||||
* Replaced jQuery shorthand methods with on() in anticipation of jQuery 2.0
|
||||
|
||||
##### v1.7.0 - 2013/1/31
|
||||
* Added 'toggle' behavior to zoom in/out on click. Example: $('#example').zoom({ on:'toggle' });
|
||||
* Removed the icon property in favor of just using CSS.
|
||||
|
||||
##### v1.6.0 - 2013/1/22
|
||||
* Created $.zoom which contains the positioning logic, so that users can write custom controls or event handling.
|
||||
|
||||
##### v1.5.0 - 2012/11/19
|
||||
* Added 'target' property for specifying the element that displays the zoomed image.
|
||||
|
||||
##### v1.4.0 - 2012/9/29
|
||||
* Changed API & added option to activate on click.
|
||||
|
||||
##### v1.3.0 - 2011/12/21
|
||||
* Added 'callback' property that will execute a callback function once the image has loaded.
|
||||
* Fixed a bug relating to the 'grab' property
|
||||
|
||||
##### v1.2.0 - 2011/11/15
|
||||
* Fixed a positioning bug
|
||||
|
||||
##### v1.1.0 - 2011/11/15
|
||||
* Added 'grab' property
|
||||
|
||||
##### v1.0.0 - 2011/11/11
|
||||
* First release
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
|
|
@ -1,7 +1,11 @@
|
|||
|
||||
|
||||
<?php if ($zoom == true) {
|
||||
$this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js',
|
||||
//$this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js',
|
||||
// 'ImageViewer'));
|
||||
$this->headScript()->appendFile($this->assetUrl('vendor/zoom/jquery.zoom.min.js',
|
||||
'ImageViewer'));
|
||||
$this->headLink()->appendStylesheet($this->assetUrl('css/zoom.css',
|
||||
'ImageViewer'));
|
||||
} ?>
|
||||
|
||||
|
|
@ -18,6 +22,7 @@
|
|||
<style>
|
||||
.archive-img {
|
||||
width: <?= $width ?>px;
|
||||
<!-- width: 50%; -->
|
||||
}
|
||||
<?php if ($zoom == true) { ?>
|
||||
#<?= $id ?> {
|
||||
|
|
@ -32,12 +37,27 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<?php if ($zoom == true) { ?>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#<?= $id ?>')
|
||||
.wrap('<span class="zoom" style="display:inline-block; cursor:grab"></span>')
|
||||
.css('display', 'block')
|
||||
.parent()
|
||||
.zoom({'duration': 200, 'magnify': 2, on:'grab'});
|
||||
});
|
||||
</script>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($zoom == true) { ?>
|
||||
<script>
|
||||
/*
|
||||
$(document).ready(function(){
|
||||
wheelzoom(document.querySelector('#<?= $id ?>'));
|
||||
});
|
||||
*/
|
||||
</script>
|
||||
|
||||
<?php } ?>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue