/*---------------------------------------------------------------------------------------------
@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进行显示
下面是我的代码：
1185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
