縮圖預覽大圖並且可以左右滑動
阿新 • • 發佈:2019-02-14
/*--------------------------------------------------------------------------------------------- @author Constantin Saguin - @brutaldesign @link http://csag.co @github http://github.com/brutaldesign/swipebox @version 1.2.1 @license MIT License ----------------------------------------------------------------------------------------------*/ ; (function(window, document, $, undefined) { $.swipebox = function(elem, options) { var defaults = { useCSS : true, initialIndexOnArray : 0, hideBarsDelay : 3000, videoMaxWidth : 1140, vimeoColor : 'CCCCCC', beforeOpen : null, afterClose : null }, plugin = this, elements = [], // slides array [{href:'...', // title:'...'}, ...], elem = elem, selector = elem.selector, $selector = $(selector), isTouch = document.createTouch !== undefined || ('ontouchstart' in window) || ('onmsgesturechange' in window) || navigator.msMaxTouchPoints, supportSVG = !!(window.SVGSVGElement), winWidth = window.innerWidth ? window.innerWidth : $(window).width(), winHeight = window.innerHeight ? window.innerHeight : $(window).height(), html = '<div id="swipebox-overlay">\ <div id="swipebox-slider"></div>\ <div id="swipebox-action">\ <a id="swipebox-prev"></a>\ <a id="swipebox-next"></a>\ <a id="swipebox-close">關閉</a>\ <div class="scroll-page"><span class="curr-page">1</span><span>/</span><span class="total-page">5</span>\ </div>\ </div>\ </div>'; plugin.settings = {} plugin.init = function() { plugin.settings = $.extend({}, defaults, options); if ($.isArray(elem)) { elements = elem; ui.target = $(window); ui.init(plugin.settings.initialIndexOnArray); } else { $selector.click(function(e) { elements = []; var index, relType, relVal; if (!relVal) { relType = 'rel'; relVal = $(this).attr(relType); } if (relVal && relVal !== '' && relVal !== 'nofollow') { $elem = $selector.filter('[' + relType + '="' + relVal + '"]'); } else { $elem = $(selector); } $elem.each(function() { var title = null, href = null; if ($(this).attr('title')) title = $(this).attr('title'); if ($(this).attr('href')) href = $(this).attr('href'); elements.push({ href : href, title : title }); }); index = $elem.index($(this)); e.preventDefault(); e.stopPropagation(); ui.target = $(e.target); ui.init(index); }); } } plugin.refresh = function() { if (!$.isArray(elem)) { ui.destroy(); $elem = $(selector); ui.actions(); } } var ui = { init : function(index) { if (plugin.settings.beforeOpen) plugin.settings.beforeOpen(); this.target.trigger('swipebox-start'); $.swipebox.isOpen = true; this.build(index); this.openSlide(index); this.openMedia(index); this.preloadMedia(index + 1); this.preloadMedia(index - 1); }, build : function(index) { var $this = this; $('body').append(html); $("#swipebox-overlay").find(".curr-page").html(index + 1); $("#swipebox-overlay").find(".total-page") .html($selector.length); if ($this.doCssTrans()) { $('#swipebox-slider').css({ '-webkit-transition' : 'left 0.4s ease', '-moz-transition' : 'left 0.4s ease', '-o-transition' : 'left 0.4s ease', '-khtml-transition' : 'left 0.4s ease', 'transition' : 'left 0.4s ease' }); $('#swipebox-overlay').css({ '-webkit-transition' : 'opacity 1s ease', '-moz-transition' : 'opacity 1s ease', '-o-transition' : 'opacity 1s ease', '-khtml-transition' : 'opacity 1s ease', 'transition' : 'opacity 1s ease' }); $('#swipebox-action, #swipebox-caption').css({ '-webkit-transition' : '0.5s', '-moz-transition' : '0.5s', '-o-transition' : '0.5s', '-khtml-transition' : '0.5s', 'transition' : '0.5s' }); } //圖片等於一張的時候清除下方圖片張數顯示 if (elements.length==1){ $(".scroll-page").remove(); } /* * if(supportSVG){ var bg = $('#swipebox-action * #swipebox-close').css('background-image'); bg = * bg.replace('png', 'svg'); $('#swipebox-action * #swipebox-prev,#swipebox-action * #swipebox-next,#swipebox-action #swipebox-close').css({ * 'background-image' : bg }); } */ $.each(elements, function() { $('#swipebox-slider') .append('<div class="slide"></div>'); }); $this.setDim(); $this.actions(); $this.keyboard(); $this.gesture(); $this.animBars(); $this.resize(); }, setDim : function() { var width, height, sliderCss = {}; if ("onorientationchange" in window) { window.addEventListener("orientationchange", function() { if (window.orientation == 0) { width = winWidth; height = winHeight; } else if (window.orientation == 90 || window.orientation == -90) { width = winHeight; height = winWidth; } }, false); } else { width = window.innerWidth ? window.innerWidth : $(window) .width(); height = window.innerHeight ? window.innerHeight : $(window).height(); } sliderCss = { width : width, height : height } $('#swipebox-overlay').css(sliderCss); }, resize : function() { var $this = this; $(window).resize(function() { $this.setDim(); }).resize(); }, supportTransition : function() { var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition' .split(' '); for (var i = 0; i < prefixes.length; i++) { if (document.createElement('div').style[prefixes[i]] !== undefined) { return prefixes[i]; } } return false; }, doCssTrans : function() { if (plugin.settings.useCSS && this.supportTransition()) { return true; } }, gesture : function() { if (isTouch) { var $this = this, distance = null, swipMinDistance = 10, startCoords = {}, endCoords = {}; var bars = $('#swipebox-caption, #swipebox-action'); bars.addClass('visible-bars'); $this.setTimeout(); $('body').bind('touchstart', function(e) { $(this).addClass('touching'); endCoords = e.originalEvent.targetTouches[0]; startCoords.pageX = e.originalEvent.targetTouches[0].pageX; $('.touching').bind('touchmove', function(e) { e.preventDefault(); e.stopPropagation(); endCoords = e.originalEvent.targetTouches[0]; }); return false; }).bind('touchend', function(e) { e.preventDefault(); e.stopPropagation(); distance = endCoords.pageX - startCoords.pageX; if (distance >= swipMinDistance) { // swipeLeft $this.getPrev(); } else if (distance <= -swipMinDistance) { // swipeRight $this.getNext(); } else { // tap if (!bars.hasClass('visible-bars')) { $this.showBars(); $this.setTimeout(); } else { $this.clearTimeout(); $this.hideBars(); } } $('.touching').off('touchmove').removeClass('touching'); }); } }, setTimeout : function() { if (plugin.settings.hideBarsDelay > 0) { var $this = this; $this.clearTimeout(); $this.timeout = window.setTimeout(function() { $this.hideBars() }, plugin.settings.hideBarsDelay); } }, clearTimeout : function() { window.clearTimeout(this.timeout); this.timeout = null; }, showBars : function() { var bars = $('#swipebox-caption, #swipebox-action'); if (this.doCssTrans()) { bars.addClass('visible-bars'); } else { $('#swipebox-caption').animate({ top : 0 }, 500); $('#swipebox-action').animate({ bottom : 0 }, 500); setTimeout(function() { bars.addClass('visible-bars'); }, 1000); } }, hideBars : function() { var bars = $('#swipebox-caption, #swipebox-action'); if (this.doCssTrans()) { bars.removeClass('visible-bars'); } else { $('#swipebox-caption').animate({ top : '-50px' }, 500); $('#swipebox-action').animate({ bottom : '-50px' }, 500); setTimeout(function() { bars.removeClass('visible-bars'); }, 1000); } }, animBars : function() { var $this = this; var bars = $('#swipebox-caption, #swipebox-action'); bars.addClass('visible-bars'); $this.setTimeout(); $('#swipebox-slider').click(function(e) { if (!bars.hasClass('visible-bars')) { // 丟 $this.showBars(); $this.setTimeout(); } }); $('#swipebox-action').hover(function() { $this.showBars(); bars.addClass('force-visible-bars'); $this.clearTimeout(); }, function() { bars.removeClass('force-visible-bars'); $this.setTimeout(); }); }, keyboard : function() { var $this = this; $(window).bind('keyup', function(e) { e.preventDefault(); e.stopPropagation(); if (e.keyCode == 37) { $this.getPrev(); } else if (e.keyCode == 39) { $this.getNext(); } else if (e.keyCode == 27) { $this.closeSlide(); } }); }, actions : function() { var $this = this; if (elements.length < 2) { $('#swipebox-prev, #swipebox-next').hide(); } else { $('#swipebox-prev').bind('click touchend', function(e) { e.preventDefault(); e.stopPropagation(); $this.getPrev(); $this.setTimeout(); }); $('#swipebox-next').bind('click touchend', function(e) { e.preventDefault(); e.stopPropagation(); $this.getNext(); $this.setTimeout(); }); } $('#swipebox-close').bind('click touchend', function(e) { $this.closeSlide(); // 點選按鈕關閉 }); $('.hiddd').bind('click touchend', function(e) { $this.closeSlide(); // 點選圖片關閉 }); }, setSlide : function(index, isFirst) { isFirst = isFirst || false; var slider = $('#swipebox-slider'); if (this.doCssTrans()) { slider.css({ left : (-index * 100) + '%' }); } else { slider.animate({ left : (-index * 100) + '%' }); } $('#swipebox-slider .slide').removeClass('current'); $('#swipebox-slider .slide').eq(index).addClass('current'); this.setTitle(index); if (isFirst) { slider.fadeIn(); } $('#swipebox-prev, #swipebox-next').removeClass('disabled'); if (index == 0) { $('#swipebox-prev').addClass('disabled'); } else if (index == elements.length - 1) { $('#swipebox-next').addClass('disabled'); } $("#swipebox-overlay").find(".curr-page") .html(index + 1); $("#swipebox-overlay").find(".total-page") .html($selector.length); }, openSlide : function(index) { $('html').addClass('swipebox'); $(window).trigger('resize'); // fix scroll bar visibility on // desktop this.setSlide(index, true); }, preloadMedia : function(index) { var $this = this, src = null; if (elements[index] !== undefined) src = elements[index].href; if (!$this.isVideo(src)) { setTimeout(function() { $this.openMedia(index); }, 1000); } else { $this.openMedia(index); } }, openMedia : function(index) { var $this = this, src = null; if (elements[index] !== undefined) src = elements[index].href; var currentIndex = index; if (index < 0 || index >= elements.length) { return false; } if (!$this.isVideo(src)) { $this.loadMedia(src, function() { $('#swipebox-slider .slide').eq(index) .html(this); }); } else { $('#swipebox-slider .slide').eq(index).html($this .getVideo(src)); } }, setTitle : function(index, isFirst) { var title = null; $('#swipebox-caption').empty(); if (elements[index] !== undefined) title = elements[index].title; if (title) { $('#swipebox-caption').append(title); } }, isVideo : function(src) { if (src) { if (src.match(/youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/) || src.match(/vimeo\.com\/([0-9]*)/)) { return true; } } }, getVideo : function(url) { var iframe = ''; var output = ''; var youtubeUrl = url.match(/watch\?v=([a-zA-Z0-9\-_]+)/); var vimeoUrl = url.match(/vimeo\.com\/([0-9]*)/); if (youtubeUrl) { iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtubeUrl[1] + '" frameborder="0" allowfullscreen></iframe>'; } else if (vimeoUrl) { iframe = '<iframe width="560" height="315" src="http://player.vimeo.com/video/' + vimeoUrl[1] + '?byline=0&portrait=0&color=' + plugin.settings.vimeoColor + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'; } return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.videomaxWidth + 'px"><div class="swipebox-video">' + iframe + '</div></div>'; }, loadMedia : function(src, callback) { if (!this.isVideo(src)) { var img = $('<img>').on({ 'load' : function() { callback.call(img); }, 'click' : function() { } }); img.attr('src', src); } }, getNext : function() { var $this = this; index = $('#swipebox-slider .slide') .index($('#swipebox-slider .slide.current')); if (index + 1 < elements.length) { index++; $this.setSlide(index); $this.preloadMedia(index + 1); } else { $('#swipebox-slider').addClass('rightSpring'); setTimeout(function() { $('#swipebox-slider') .removeClass('rightSpring'); }, 500); } }, getPrev : function() { index = $('#swipebox-slider .slide') .index($('#swipebox-slider .slide.current')); if (index > 0) { index--; this.setSlide(index); this.preloadMedia(index - 1); } else { $('#swipebox-slider').addClass('leftSpring'); setTimeout(function() { $('#swipebox-slider').removeClass('leftSpring'); }, 500); } }, closeSlide : function() { $('html').removeClass('swipebox'); $(window).trigger('resize'); this.destroy(); }, destroy : function() { $(window).unbind('keyup'); $('body').unbind('touchstart'); $('body').unbind('touchmove'); $('body').unbind('touchend'); $('#swipebox-slider').unbind(); $('#swipebox-overlay').remove(); if (!$.isArray(elem)) elem.removeData('_swipebox'); if (this.target) this.target.trigger('swipebox-destroy'); $.swipebox.isOpen = false; if (plugin.settings.afterClose) plugin.settings.afterClose(); } }; plugin.init(); }; $.fn.swipebox = function(options) { if (!$.data(this, "_swipebox")) { var swipebox = new $.swipebox(this, options); this.data('_swipebox', swipebox); } return this.data('_swipebox'); } }(window, document, jQuery));
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no,email=no"/> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>圖片處理</title> <style type="text/css"> * {margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;-webkit-tap-highlight-color:transparent;} body { width: 100%;height: auto;margin: 0px auto;} a { display: block; margin: 0; padding:0; text-align: center; } a:link,a:visited{ text-decoration:none; /*超連結無下劃線*/ } span {display: block;} div { display: block; } #fakecrop-fill a { margin: 4px 4px 0 0; } .container{ float: left; padding: 0 0 0 2%; width: 100%;} .container img{ vertical-align: top;} .scroll-page{ background-color:rgba(255,255,255,0.75);height: 25px; line-height: 25px; color: #000; border-radius: 4px; position: absolute;top: 15px; right: 42%; padding: 0 16px;} .scroll-page span{ text-shadow:none; color: #000; float:left;} #swipebox-action #swipebox-close{ background:#28a000;} #swipebox-action{bottom:0px !important; border-top:none !important; background:none !important;font-family:微軟雅黑;} </style> <link href="css/swipebox.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="js/jquery.fakecrop.js"></script> <script type="text/javascript" src="js/jquery.swipebox.js" ></script> </head> <body> <div class="container" id="fakecrop-fill"> <a class="swipebox" href="images/1.jpg" style="float: left; overflow: hidden; width: 100px; height: 100px; position: relative;"> <img src="images/1.jpg" class="fc-init" style="display: inline; position: absolute; left: 0px; height: 177.5px; width: 100px;"> </a> <a class="swipebox" href="images/2.jpg" style="float: left; overflow: hidden; width: 100px; height: 100px; position: relative;"> <img src="images/2.jpg" class="fc-init" style="display: inline; position: absolute; left: 0px; height: 177.5px; width: 100px;"> </a> <a class="swipebox" href="images/3.jpg" style="float: left; overflow: hidden; width: 100px; height: 100px; position: relative;"> <img src="images/3.jpg" class="fc-init" style="display: inline; position: absolute; left: 0px; height: 177.5px; width: 100px;"> </a> </div> <script> $(document).ready(function () { $("#fakecrop-fill").html(); $('#fakecrop-fill img').fakecrop(); $(".swipebox").swipebox(); }); </script> </body> </html>
html.swipebox { overflow: hidden!important; } #swipebox-overlay img { border: none!important; } #swipebox-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999!important; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; } #swipebox-slider { height: 100%; left: 0; top: 0; width: 100%; white-space: nowrap; position: absolute; display: none; } #swipebox-slider .slide { /*background: url("img/loader.gif") no-repeat center center;*/ height: 100%; width: 100%; line-height: 1px; text-align: center; display: inline-block; } #swipebox-slider .slide:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } #swipebox-slider .slide img, #swipebox-slider .slide .swipebox-video-container { display: inline-block; margin: 0; padding: 0; width: 100%; height: auto; vertical-align: middle; } #swipebox-slider .slide .swipebox-video-container { background:none; max-width: 1140px; max-height: 100%; width: 100%; padding:5%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #swipebox-slider .slide .swipebox-video-container .swipebox-video{ width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } #swipebox-slider .slide .swipebox-video-container .swipebox-video iframe{ width: 100%!important; height: 100%!important; position: absolute; top: 0; left: 0; } #swipebox-action, #swipebox-caption { position: absolute; left: 0; z-index: 999; height: 55px; width: 100%; } #swipebox-action { bottom: -50px; } #swipebox-action.visible-bars { bottom: 0; } #swipebox-action.force-visible-bars { bottom: 0!important; } #swipebox-caption { top: -50px; text-align: center; } #swipebox-caption.visible-bars { top: 0; } #swipebox-caption.force-visible-bars { top: 0!important; } #swipebox-action #swipebox-prev, #swipebox-action #swipebox-next, #swipebox-action #swipebox-close { /*background-image: url("img/icons.png"); background-repeat: no-repeat;*/ border: none!important; text-decoration: none!important; cursor: pointer; position: absolute; width:60px; height:25px; bottom:15px; right:15px; color:#fff; text-align:center; line-height:25px; text-shadow:none; border-radius:4px; } #swipebox-action #swipebox-close { /* background-position: 15px 12px;*/ right: 40px; } #swipebox-action #swipebox-prev { background-position: -32px 13px; /*right: 100px;*/ left:40px; } #swipebox-action #swipebox-next { background-position: -78px 13px; /* right: 40px;*/ left:100px; } #swipebox-action #swipebox-prev.disabled, #swipebox-action #swipebox-next.disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; } #swipebox-slider.rightSpring { -moz-animation: rightSpring 0.3s; -webkit-animation: rightSpring 0.3s; } #swipebox-slider.leftSpring { -moz-animation: leftSpring 0.3s; -webkit-animation: leftSpring 0.3s; } @-moz-keyframes rightSpring { 0% { margin-left: 0px; } 50% { margin-left: -30px; } 100% { margin-left: 0px; } } @-moz-keyframes leftSpring { 0% { margin-left: 0px; } 50% { margin-left: 30px; } 100% { margin-left: 0px; } } @-webkit-keyframes rightSpring { 0% { margin-left: 0px; } 50% { margin-left: -30px; } 100% { margin-left: 0px; } } @-webkit-keyframes leftSpring { 0% { margin-left: 0px; } 50% { margin-left: 30px; } 100% { margin-left: 0px; } } @media screen and (max-width: 800px) { #swipebox-action #swipebox-close { /*left: 0;*/ right: 15px; } #swipebox-action #swipebox-prev { left: 0px; } #swipebox-action #swipebox-next { left:60px; } } /* Skin --------------------------*/ #swipebox-overlay { background: #0d0d0d; } #swipebox-action, #swipebox-caption { text-shadow: 1px 1px 1px black; background-color: #0d0d0d; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d0d0d), color-stop(100%, #000000)); background-image: -webkit-linear-gradient(#0d0d0d, #000000); background-image: -moz-linear-gradient(#0d0d0d, #000000); background-image: -o-linear-gradient(#0d0d0d, #000000); background-image: linear-gradient(#0d0d0d, #000000); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95); opacity: 0.95; } #swipebox-action { border-top: 1px solid rgba(255, 255, 255, 0.2); } #swipebox-caption { border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: white!important; font-size: 15px; line-height: 43px; font-family: Helvetica, Arial, sans-serif; }
/***
* jquery.fakecrop.js
* Copyright (c) 2012 Vuong Nguyen
* http://vuongnguyen.com
*/
(function ($) {
var methods = {
ratio : function (args) {
var item = args.item,
settings = args.settings;
return { w : item.width()/settings.wrapperWidth,
h : item.height()/settings.wrapperHeight };
},
center : function (long, short) {
return parseInt((long-short)/2, 10);
},
scaleToFill : function (args) {
var item = args.item,
settings = args.settings,
ratio = settings.ratio,
width = item.width(),
height = item.height(),
offset = {top: 0, left: 0};
if (ratio.h > ratio.w) {
width = settings.wrapperWidth;
height = height / ratio.w;
if (settings.center) {
offset.top = methods.center(width, height);
}
} else {
height = settings.wrapperHeight;
width = width / ratio.h;
if (settings.center) {
offset.left = methods.center(height, width);
}
}
if (settings.center) {
args.wrapper.css('position', 'relative');
item.css({
'position' : 'absolute',
'top' : ['-', offset.top, 'px'].join(''),
'left' : offset.left + 'px'
});
}
return item.height(height).attr('height', height + 'px')
.width(width).attr('width', width + 'px');
},
scaleToFit : function (args) {
var item = args.item,
settings = args.settings,
ratio = settings.ratio,
width = item.width(),
height = item.height(),
offset = {top: 0, left: 0};
if (ratio.h > ratio.w) {
height = settings.wrapperHeight,
width = parseInt((item.width() * settings.wrapperHeight)/item.height(), 10);
if (settings.center) {
offset.left = methods.center(height, width);
}
} else {
height = parseInt((item.height() * settings.wrapperWidth)/item.width(), 10),
width = settings.wrapperWidth;
if (settings.center) {
offset.top = methods.center(width, height);
}
}
args.wrapper.css({
'width' : (settings.squareWidth ? settings.wrapperWidth : width) + 'px',
'height' : settings.wrapperHeight + 'px'
});
if (settings.center) {
args.wrapper.css('position', 'relative');
item.css({
'position' : 'absolute',
'top' : offset.top +'px',
'left' : offset.left + 'px'
});
}
return item.height(height).attr('height', height + 'px')
.width(width).attr('width', width + 'px');
},
init : function (options) {
var settings = $.extend({
wrapperSelector : null,
wrapperWidth : 100,
wrapperHeight : 100,
center : true,
fill : true,
initClass : 'fc-init',
doneEvent : 'fakedropdone',
squareWidth : true
}, options),
_init = function () {
var item = $(this),
wrapper = settings.wrapperSelector ? item.closest(settings.wrapperSelector) : item.parent(),
args = { item : item,
settings : settings,
wrapper : wrapper };
settings.ratio = methods.ratio(args);
if (settings.fill) {
wrapper.css({
'float' : 'left',
'overflow' : 'hidden',
'width' : settings.wrapperWidth + 'px',
'height' : settings.wrapperHeight + 'px'
});
methods.scaleToFill(args);
} else {
methods.scaleToFit(args);
}
item.data('fc.settings', settings)
.addClass(settings.initClass) // Add class to container after initialization
.trigger(settings.doneEvent); // Publish an event to announce that fakecrop in initialized
},
images = this.filter('img'),
others = this.filter(':not(img)');
if (images.length) {
images.bind('load', function () {
_init.call(this);
this.style.display = 'inline';
}).each(function () {
// trick from paul irish's https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58
if (this.complete || this.complete === undefined) {
var src = this.src;
this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
this.src = src;
this.style.display = 'none';
}
});
}
if (others.length) {
others.each(_init);
}
return this;
}
};
$.fn.fakecrop = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.fakecrop');
}
};
})(jQuery);
之前做專案做到分享的時候,做過上傳圖片為縮圖模式,並且可以進行大圖預覽
就用了fakecrop以及swipebox進行顯示
下面是我的程式碼: