经验分享程序开发文档资料数据资源其它资源

自适应屏幕的Swipebox相册代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 自适应屏幕的Swipebox相册代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

自适应屏幕的Swipebox相册代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,相册代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为自适应屏幕的Swipebox相册代码，属于站长常用代码" />
<title>自适应屏幕的Swipebox相册代码</title>
<link rel='stylesheet' href='css/justifiedgallery.min.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/swipebox.css' type='text/css' media='screen' />
<script src='js/jquery.min.js'></script>
<script src='js/justifiedgallery.js'></script>
<script src='js/jquery.swipebox.min.js'></script>
</head>
<body>
<!-- 代码 开始 -->
<br />第一个相册
<div class="swipeboxEx">
    <a href="images/8083451788_552becfbc7_b.jpg" title="What's your destination?">
        <img alt="What's your destination?" src="images/8083451788_552becfbc7_m.jpg" />
    </a>
    <a href="images/7948632554_01f6ae6b6f_b.jpg" title="Just in a dream Place">
        <img alt="Just in a dream Place" src="images/7948632554_01f6ae6b6f_m.jpg" />
    </a>
    <a href="images/7302459122_19fa1d8223_b.jpg" title="Truthful Innocence">
        <img alt="Truthful Innocence" src="images/7302459122_19fa1d8223_m.jpg" />
    </a>
    <a href="images/7222046648_5bf70e893a_b.jpg" title="Simply my Brother">
        <img alt="Simply my Brother" src="images/7222046648_5bf70e893a_m.jpg" />
    </a>
    <a href="images/7002395006_29fdc85f7a_b.jpg" title="Freedom">
        <img alt="Freedom" src="images/7002395006_29fdc85f7a_m.jpg" />
    </a>
    <a href="images/7062575651_b23918b11a_b.jpg" title="Maybe spring">
        <img alt="Maybe spring" src="images/7062575651_b23918b11a_m.jpg" />
    </a>
    <a href="images/6841267340_855273fd7e_b.jpg" title="Love">
        <img alt="Love" src="images/6841267340_855273fd7e_m.jpg" />
    </a>
    <a href="images/6958456697_e56a37bb5f_b.jpg" title="Young Lovers' Wall and the Old Rain">
        <img alt="Young Lovers' Wall and the Old Rain" src="images/6958456697_e56a37bb5f_m.jpg" />
    </a>
    <a href="images/6791628438_affaa19e10_b.jpg" title="This is the colors I love">
        <img alt="This is the colors I love" src="images/6791628438_affaa19e10_m.jpg" />
    </a>
</div>
<br />第二个相册
<div class="swipeboxEx">
    <a href="images/6916180091_9c9559e463_b.jpg" title="The Hope">
        <img alt="The Hope" src="images/6916180091_9c9559e463_m.jpg" />
    </a>
    <a href="images/6880502467_d4b3c4b2a8_b.jpg" title="Florence streets. Florence people.">
        <img alt="Florence streets. Florence people." src="images/6880502467_d4b3c4b2a8_m.jpg" />
    </a>
    <a href="images/6876412479_6268c6e2aa_b.jpg" title="I Love You">
        <img alt="I Love You" src="images/6876412479_6268c6e2aa_m.jpg" />
    </a>
    <a href="images/6840627709_92ed52fb41_b.jpg" title="The painter in Florence">
        <img alt="The painter in Florence" src="images/6840627709_92ed52fb41_m.jpg" />
    </a>
    <a href="images/6812090617_5fd5bbdda0_b.jpg" title="Me and My Belover">
        <img alt="Me and My Belover" src="images/6812090617_5fd5bbdda0_m.jpg" />
    </a>
    <a href="images/6806687375_07d2b7a1f9_b.jpg" title="Fiocco">
        <img alt="Fiocco" src="images/6806687375_07d2b7a1f9_m.jpg" />
    </a>
    <a href="images/6798453217_72dea2d06e_b.jpg" title="My first clothespin">
        <img alt="My first clothespin" src="images/6798453217_72dea2d06e_m.jpg" />
    </a>
</div>
<script>
	$(document).ready(function () {
		$('.swipeboxEx').each(function (i, el) {
			$(el).justifiedGallery({rel: 'gal' + i}).on('jg.complete', function () {
				if (i == 1) $('.swipeboxEx a').swipebox(); //如果想调用1个相册对应i值为0，同理3个相册，i值为2。
			});
		});
	});
</script>
</body>
</html>

JS代码(jquery.swipebox.min.js):

/*---------------------------------------------------------------------------------------------@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:3e3,videoMaxWidth:1140,vimeoColor:"CCCCCC",beforeOpen:null,afterClose:null}
,plugin=this,elements=[],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-caption"></div><div id="swipebox-action"><a id="swipebox-close"></a><a id="swipebox-prev"></a><a id="swipebox-next"></a></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();
	this.openSlide(index);
	this.openMedia(index);
	this.preloadMedia(index+1);
	this.preloadMedia(index-1)}
,build:function(){
	var $this=this;
	$("body").append(html);
	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(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){
	$this.getPrev()}
else if(distance<=-swipMinDistance){
	$this.getNext()}
else{
	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")}
,1e3)}
}
,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")}
,1e3)}
}
,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()}
)}
,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")}
}
,openSlide:function(index){
	$("html").addClass("swipebox");
	$(window).trigger("resize");
	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)}
,1e3)}
else{
	$this.openMedia(index)}
}
,openMedia:function(index){
	var $this=this,src=null;
	if(elements[index]!==undefined)src=elements[index].href;
	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&amp;
	portrait=0&amp;
	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)}
);
	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);

JS代码(justifiedgallery.js):

/* * Justified Gallery - v3.2.0 * http://miromannino.com/projects/justified-gallery/ * Copyright (c) 2014 Miro Mannino * Licensed under the MIT license. */
(function($){
	/* Eventsjg.complete:called when all the gallery has been createdjg.resize:called when the gallery has been resized*/
$.fn.justifiedGallery = function (arg){
	// Default optionsvar defaults ={
	sizeRangeSuffixes:{
	'lt100':'_t','lt240':'_m','lt320':'_n','lt500':'','lt640':'_z','lt1024':'_b'}
,rowHeight:120,maxRowHeight:0,//negative value = no limits,0 = 1.5 * rowHeightmargins:1,lastRow:'nojustify',// or can be 'justify' or 'hide'justifyThreshold:0.35,// if available space / row width <= 0.35 it will be always justified// (lastRow setting is not considered)cssAnimation:false,captionsAnimationDuration:500,captionsVisibleOpacity:0.7,imagesAnimationDuration:300,fixedHeight:false,captions:true,rel:null,//rewrite the rel of each analyzed linkstarget:null,//rewrite the target of all linksextension:/\.[^.]+$/,refreshTime:250,randomize:false}
;
	function getSuffix(width,height,context){
	var longestSide;
	longestSide = (width > height) ? width:height;
	if (longestSide <= 100){
	return context.settings.sizeRangeSuffixes.lt100;
}
else if (longestSide <= 240){
	return context.settings.sizeRangeSuffixes.lt240;
}
else if (longestSide <= 320){
	return context.settings.sizeRangeSuffixes.lt320;
}
else if (longestSide <= 500){
	return context.settings.sizeRangeSuffixes.lt500;
}
else if (longestSide <= 640){
	return context.settings.sizeRangeSuffixes.lt640;
}
else{
	return context.settings.sizeRangeSuffixes.lt1024;
}
}
function onEntryMouseEnterForCaption (ev){
	var $caption = $(ev.currentTarget).find('.caption');
	if (ev.data.settings.cssAnimation){
	$caption.addClass('caption-visible').removeClass('caption-hidden');
}
else{
	$caption.stop().fadeTo(ev.data.settings.captionsAnimationDuration,ev.data.settings.captionsVisibleOpacity);
}
}
function onEntryMouseLeaveForCaption (ev){
	var $caption = $(ev.currentTarget).find('.caption');
	if (ev.data.settings.cssAnimation){
	$caption.removeClass('caption-visible').removeClass('caption-hidden');
}
else{
	$caption.stop().fadeTo(ev.data.settings.captionsAnimationDuration,0.0);
}
}
function displayEntry($entry,x,y,imgWidth,imgHeight,rowHeight,context){
	var $image = $entry.find('img');
	$image.css('width',imgWidth);
	$image.css('height',imgHeight);
	$image.css('margin-left',- imgWidth / 2);
	$image.css('margin-top',- imgHeight / 2);
	$entry.width(imgWidth);
	$entry.height(rowHeight);
	$entry.css('top',y);
	$entry.css('left',x);
	//DEBUG// console.log('displayEntry:$image.width() = ' + $image.width() + ' $image.height() = ' + $image.height());
	// Image reloading for an high quality of thumbnailsvar imageSrc = $image.attr('src');
	var newImageSrc = imageSrc.replace(context.settings.extension,'').replace(context.usedSizeRangeRegExp,'') +getSuffix(imgWidth,imgHeight,context) +imageSrc.match(context.settings.extension)[0];
	$image.one('error',function (){
	//DEBUG// console.log('revert the original image');
	$image.attr('src',$image.data('jg.originalSrc'));
	//revert to the original thumbnail,we got it.}
);
	var loadNewImage = function (){
	if (imageSrc !== newImageSrc){
	//load the new image after the fadeIn$image.attr('src',newImageSrc);
}
}
;
	if (context.settings.cssAnimation){
	$entry.addClass('entry-visible');
	loadNewImage();
}
else{
	$entry.stop().fadeTo(context.settings.imagesAnimationDuration,1.0,loadNewImage);
}
// Captions ------------------------------//TODO option for caption always visiblevar captionMouseEvents = $entry.data('jg.captionMouseEvents');
	if (context.settings.captions === true){
	var $imgCaption = $entry.find('.caption');
	if ($imgCaption.length === 0){
	// Create it if it doesn't existsvar caption = $image.attr('alt');
	if (typeof caption === 'undefined') caption = $entry.attr('title');
	if (typeof caption !== 'undefined'){
	// Create only we found something$imgCaption = $('<div class="caption">' + caption + '</div>');
	$entry.append($imgCaption);
}
}
// Create events (we check again the $imgCaption because it can be still inexistent)if ($imgCaption.length !== 0 && typeof captionMouseEvents === 'undefined'){
	captionMouseEvents ={
	mouseenter:onEntryMouseEnterForCaption,mouseleave:onEntryMouseLeaveForCaption}
;
	$entry.on('mouseenter',undefined,context,captionMouseEvents.mouseenter);
	$entry.on('mouseleave',undefined,context,captionMouseEvents.mouseleave);
	$entry.data('jg.captionMouseEvents',captionMouseEvents);
}
}
else{
	if (typeof captionMouseEvents !== 'undefined'){
	$entry.off('mouseenter',undefined,context,captionMouseEvents.mouseenter);
	$entry.off('mouseleave',undefined,context,captionMouseEvents.mouseleave);
	$entry.removeData('jg.captionMouseEvents');
}
}
}
function prepareBuildingRow(context,isLastRow){
	var i,$entry,$image,stdImgW,newImgW,newImgH,justify = true;
	var minHeight = 0;
	var availableWidth = context.galleryWidth;
	var extraW = availableWidth - context.buildingRow.width -((context.buildingRow.entriesBuff.length - 1) * context.settings.margins);
	//Skip the last row if we can't justify it and the lastRow == 'hide'if (isLastRow && context.settings.lastRow === 'hide' && (extraW / availableWidth > context.settings.justifyThreshold)){
	for (i = 0;
	i < context.buildingRow.entriesBuff.length;
	i++){
	$entry = context.buildingRow.entriesBuff[i];
	if (context.settings.cssAnimation)$entry.removeClass('entry-visible');
	else$entry.stop().fadeTo(0,0);
}
return -1;
}
// With lastRow = nojustify,justify if (extraW / availableWidth <= context.settings.justifyThreshold)if (isLastRow && context.settings.lastRow === 'nojustify' && (extraW / availableWidth > context.settings.justifyThreshold))justify = false;
	//DEBUG// console.log('prepareBuildingRow:availableWidth:' + availableWidth + ' extraW:' + extraW);
	for (i = 0;
	i < context.buildingRow.entriesBuff.length;
	i++){
	$image = context.buildingRow.entriesBuff[i].find('img');
	stdImgW = Math.ceil($image.data('jg.imgw') / ($image.data('jg.imgh') / context.settings.rowHeight));
	if (justify){
	if (i < context.buildingRow.entriesBuff.length - 1){
	// Scale proportionally of the image aspect ratio (the more is long,the more can be extended)newImgW = stdImgW + Math.ceil(stdImgW / context.buildingRow.width * extraW);
}
else{
	newImgW = availableWidth;
}
// Scale factor for the new width is (newImgW / stdImgW),hence:newImgH = Math.ceil(context.settings.rowHeight * (newImgW / stdImgW));
	// With fixedHeight the newImgH >= rowHeight. In some cases here this is not satisfied (due to the justification)if (context.settings.fixedHeight && newImgH < context.settings.rowHeight){
	newImgW = stdImgW;
	newImgH = context.settings.rowHeight;
}
}
else{
	newImgW = stdImgW;
	newImgH = context.settings.rowHeight;
}
$image.data('jg.imgw',newImgW);
	$image.data('jg.imgh',newImgH);
	//DEBUG// console.log($image.attr('alt') + ' new jq.imgw = ' + $image.data('jg.imgw') + ' new jg.imgh = ' + $image.data('jg.imgh'));
	availableWidth -= newImgW + ((i < context.buildingRow.entriesBuff.length - 1) ? context.settings.margins:0);
	if (i === 0 || minHeight > newImgH) minHeight = newImgH;
}
//DEBUG// console.log('availableWidth:' + availableWidth + ' extraW:' + extraW);
	if (context.settings.fixedHeight) minHeight = context.settings.rowHeight;
	return minHeight;
}
function rewind(context){
	context.lastAnalyzedIndex = -1;
	context.buildingRow.entriesBuff = [];
	context.buildingRow.width = 0;
	context.offY = 0;
	context.firstRowFlushed = false;
}
function flushRow(context,isLastRow){
	var $entry,$image,minHeight,offX = 0;
	//DEBUG// console.log('flush (width:' + context.buildingRow.width + ',galleryWidth:' + context.galleryWidth + ',' + 'isLastRow:' + isLastRow + ')');
	minHeight = prepareBuildingRow(context,isLastRow);
	if (isLastRow && context.settings.lastRow === 'hide' && minHeight === -1){
	context.buildingRow.entriesBuff = [];
	context.buildingRow.width = 0;
	return;
}
if (context.settings.maxRowHeight > 0 && context.settings.maxRowHeight < minHeight)minHeight = context.settings.maxRowHeight;
	else if (context.settings.maxRowHeight === 0 && (1.5 * context.settings.rowHeight) < minHeight)minHeight = 1.5 * context.settings.rowHeight;
	for (var i = 0;
	i < context.buildingRow.entriesBuff.length;
	i++){
	$entry = context.buildingRow.entriesBuff[i];
	$image = $entry.find('img');
	displayEntry($entry,offX,context.offY,$image.data('jg.imgw'),$image.data('jg.imgh'),minHeight,context);
	offX += $image.data('jg.imgw') + context.settings.margins;
}
//Gallery Heightcontext.$gallery.height(context.offY + minHeight +(context.spinner.active ? context.spinner.$el.innerHeight():0));
	if(!isLastRow){
	//Ready for a new rowcontext.offY += minHeight + context.settings.margins;
	//DEBUG// console.log('minHeight:' + minHeight + ' offY:' + context.offY);
	context.buildingRow.entriesBuff = [];
	//clear the array creating a new onecontext.buildingRow.width = 0;
	context.firstRowFlushed = true;
	context.$gallery.trigger('jg.rowflush');
}
}
function checkWidth(context){
	context.checkWidthIntervalId = setInterval(function (){
	var galleryWidth = parseInt(context.$gallery.width(),10);
	if (context.galleryWidth !== galleryWidth){
	//DEBUG// console.log("resize. old:" + context.galleryWidth + " new:" + galleryWidth);
	context.galleryWidth = galleryWidth;
	rewind(context);
	// Restart to analyzestartImgAnalyzer(context,true);
}
}
,context.settings.refreshTime);
}
function startLoadingSpinnerAnimation(spinnerContext){
	clearInterval(spinnerContext.intervalId);
	spinnerContext.intervalId = setInterval(function (){
	if (spinnerContext.phase < spinnerContext.$points.length)spinnerContext.$points.eq(spinnerContext.phase).fadeTo(spinnerContext.timeslot,1);
	elsespinnerContext.$points.eq(spinnerContext.phase - spinnerContext.$points.length).fadeTo(spinnerContext.timeslot,0);
	spinnerContext.phase = (spinnerContext.phase + 1) % (spinnerContext.$points.length * 2);
}
,spinnerContext.timeslot);
}
function stopLoadingSpinnerAnimation(spinnerContext){
	clearInterval(spinnerContext.intervalId);
	spinnerContext.intervalId = null;
}
function stopImgAnalyzerStarter(context){
	context.yield.flushed = 0;
	if (context.imgAnalyzerTimeout !== null) clearTimeout(context.imgAnalyzerTimeout);
}
function startImgAnalyzer(context,isForResize){
	stopImgAnalyzerStarter(context);
	context.imgAnalyzerTimeout = setTimeout(function (){
	analyzeImages(context,isForResize);
}
,0.001);
	analyzeImages(context,isForResize);
}
function analyzeImages(context,isForResize){
	//DEBUG///*var rnd = parseInt(Math.random() * 10000,10);
	//DEBUG// console.log('analyzeImages ' + rnd + ' start');
	//DEBUG// console.log('images status:');
	for (var i = 0;
	i < context.entries.length;
	i++){
	var $entry = $(context.entries[i]);
	var $image = $entry.find('img');
	//DEBUG// console.log(i + ' (alt:' + $image.attr('alt') + 'loaded:' + $image.data('jg.loaded') + ')');
}
*/
/* The first row */
var isLastRow;
	for (var i = context.lastAnalyzedIndex + 1;
	i < context.entries.length;
	i++){
	var $entry = $(context.entries[i]);
	var $image = $entry.find('img');
	//DEBUG// console.log('checking:' + i + ' (loaded:' + $image.data('jg.loaded') + ')');
	if ($image.data('jg.loaded') === true){
	var newImgW = Math.ceil($image.data('jg.imgw') / ($image.data('jg.imgh') / context.settings.rowHeight));
	//DEBUG// console.log('analyzed img ' + $image.attr('alt') + ',imgW:' + $image.data('jg.imgw') + ',imgH:' + $image.data('jg.imgh') + ',rowWidth:' + context.buildingRow.width);
	isLastRow = context.firstRowFlushed && (i >= context.entries.length - 1);
	// NOTE:If we have fixed height we need to never have a negative extraW,else some images can be hided.//This is because the images need to have a smaller height,but fixed height doesn't allow itif (context.buildingRow.width + (context.settings.fixedHeight ? newImgW:newImgW / 2) +(context.buildingRow.entriesBuff.length - 1) *context.settings.margins > context.galleryWidth){
	flushRow(context,isLastRow);
	if(++context.yield.flushed >= context.yield.every){
	//DEBUG// console.log("yield");
	startImgAnalyzer(context,isForResize);
	return;
}
}
context.buildingRow.entriesBuff.push($entry);
	context.buildingRow.width += newImgW;
	context.lastAnalyzedIndex = i;
}
else if ($image.data('jg.loaded') !== 'error'){
	return;
}
}
// Last row flush (the row is not full)if (context.buildingRow.entriesBuff.length > 0) flushRow(context,context.firstRowFlushed);
	if (context.spinner.active){
	context.spinner.active = false;
	context.$gallery.height(context.$gallery.height() - context.spinner.$el.innerHeight());
	context.spinner.$el.detach();
	stopLoadingSpinnerAnimation(context.spinner);
}
/* Stop,if there is,the timeout to start the analyzeImages.This is because an image can be set loaded,and the timeout can be set,but this image can be analyzed yet.*/
stopImgAnalyzerStarter(context);
	//On complete callbackif (!isForResize) context.$gallery.trigger('jg.complete');
	else context.$gallery.trigger('jg.resize');
	//DEBUG// console.log('analyzeImages ' + rnd + ' end');
}
function checkSettings (context){
	function checkSuffixesRange(range){
	if (typeof context.settings.sizeRangeSuffixes[range] !== 'string')throw 'sizeRangeSuffixes.' + range + ' must be a string';
}
function checkOrConvertNumber(setting){
	if (typeof context.settings[setting] === 'string'){
	context.settings[setting] = parseFloat(context.settings[setting],10);
	if (isNaN(context.settings[setting])) throw 'invalid number for ' + setting;
}
else if (typeof context.settings[setting] === 'number'){
	if (isNaN(context.settings[setting])) throw 'invalid number for ' + setting;
}
else{
	throw setting + ' must be a number';
}
}
if (typeof context.settings.sizeRangeSuffixes !== 'object')throw 'sizeRangeSuffixes must be defined and must be an object';
	checkSuffixesRange('lt100');
	checkSuffixesRange('lt240');
	checkSuffixesRange('lt320');
	checkSuffixesRange('lt500');
	checkSuffixesRange('lt640');
	checkSuffixesRange('lt1024');
	checkOrConvertNumber('rowHeight');
	checkOrConvertNumber('maxRowHeight');
	checkOrConvertNumber('margins');
	if (context.settings.lastRow !== 'nojustify' &&context.settings.lastRow !== 'justify' &&context.settings.lastRow !== 'hide'){
	throw 'lastRow must be "nojustify","justify" or "hide"';
}
checkOrConvertNumber('justifyThreshold');
	if (context.settings.justifyThreshold < 0 || context.settings.justifyThreshold > 1)throw 'justifyThreshold must be in the interval [0,1]';
	if (typeof context.settings.cssAnimation !== 'boolean'){
	throw 'cssAnimation must be a boolean';
}
checkOrConvertNumber('captionsAnimationDuration');
	checkOrConvertNumber('imagesAnimationDuration');
	checkOrConvertNumber('captionsVisibleOpacity');
	if (context.settings.captionsVisibleOpacity < 0 || context.settings.captionsVisibleOpacity > 1)throw 'captionsVisibleOpacity must be in the interval [0,1]';
	if (typeof context.settings.fixedHeight !== 'boolean'){
	throw 'fixedHeight must be a boolean';
}
if (typeof context.settings.captions !== 'boolean'){
	throw 'captions must be a boolean';
}
checkOrConvertNumber('refreshTime');
	if (typeof context.settings.randomize !== 'boolean'){
	throw 'randomize must be a boolean';
}
}
return this.each(function (index,gallery){
	var $gallery = $(gallery);
	$gallery.addClass('justified-gallery');
	var context = $gallery.data('jg.context');
	if (typeof context === 'undefined'){
	if (typeof arg !== 'undefined' && arg !== null && typeof arg !== 'object')throw 'The argument must be an object';
	// Spinner initvar $spinner = $('<div class="spinner"><span></span><span></span><span></span></div>');
	//Context initcontext ={
	settings:$.extend({
}
,defaults,arg),imgAnalyzerTimeout:null,entries:null,buildingRow:{
	entriesBuff:[],width:0}
,lastAnalyzedIndex:-1,firstRowFlushed:false,yield:{
	every:2,/* do a flush every context.yield.every flushes (* must be greater than 1,else the analyzeImages will loop */
flushed:0 //flushed rows without a yield}
,offY:0,spinner:{
	active:false,phase:0,timeslot:150,$el:$spinner,$points:$spinner.find('span'),intervalId:null}
,checkWidthIntervalId:null,galleryWidth:$gallery.width(),$gallery:$gallery}
;
	$gallery.data('jg.context',context);
}
else if (arg === 'norewind'){
	// In this case we don't rewind,and analyze all the images}
else{
	context.settings = $.extend({
}
,context.settings,arg);
	rewind(context);
}
checkSettings(context);
	context.entries = $gallery.find('> a,> div').toArray();
	if (context.entries.length === 0) return;
	// Randomizeif (context.settings.randomize){
	context.entries.sort(function (){
	return Math.random() * 2 - 1;
}
);
	$.each(context.entries,function (){
	$(this).appendTo($gallery);
}
);
}
context.usedSizeRangeRegExp = new RegExp("(" +context.settings.sizeRangeSuffixes.lt100 + "|" +context.settings.sizeRangeSuffixes.lt240 + "|" +context.settings.sizeRangeSuffixes.lt320 + "|" +context.settings.sizeRangeSuffixes.lt500 + "|" +context.settings.sizeRangeSuffixes.lt640 + "|" +context.settings.sizeRangeSuffixes.lt1024 + ")$");
	if (context.settings.maxRowHeight > 0 && context.settings.maxRowHeight < context.settings.rowHeight)context.settings.maxRowHeight = context.settings.rowHeight;
	var imagesToLoad = false;
	$.each(context.entries,function (index,entry){
	var $entry = $(entry);
	var $image = $entry.find('img');
	if ($image.data('jg.loaded') !== true){
	$image.data('jg.loaded',false);
	//DEBUG// console.log('listed ' + $image.attr('alt'));
	imagesToLoad = true;
	// Spinner startif (context.spinner.active === false){
	context.spinner.active = true;
	$gallery.append(context.spinner.$el);
	$gallery.height(context.offY + context.spinner.$el.innerHeight());
	startLoadingSpinnerAnimation(context.spinner);
}
// Link Rel global overwriteif (context.settings.rel !== null) $entry.attr('rel',context.settings.rel);
	// Link Target global overwriteif (context.settings.target !== null) $entry.attr('target',context.settings.target);
	// Image srcvar imageSrc = (typeof $image.data('safe-src') !== 'undefined') ? $image.data('safe-src'):$image.attr('src');
	$image.data('jg.originalSrc',imageSrc);
	$image.attr('src',imageSrc);
	/* Check if the image is loaded or not using another image object.We cannot use the 'complete' image property,because some browsers,with a 404 set complete = true*/
var loadImg = new Image();
	var $loadImg = $(loadImg);
	$loadImg.one('load',function imgLoaded (){
	//DEBUG// console.log('img load (alt:' + $image.attr('alt') + ')');
	$image.off('load error');
	$image.data('jg.imgw',loadImg.width);
	$image.data('jg.imgh',loadImg.height);
	$image.data('jg.loaded',true);
	startImgAnalyzer(context,false);
}
);
	$loadImg.one('error',function imgLoadError (){
	//DEBUG// console.log('img error (alt:' + $image.attr('alt') + ')');
	$image.off('load error');
	$image.data('jg.loaded','error');
	startImgAnalyzer(context,false);
}
);
	loadImg.src = imageSrc;
}
}
);
	if (!imagesToLoad) startImgAnalyzer(context,false);
	checkWidth(context);
}
);
}
;
}
(jQuery));

CSS代码(justifiedgallery.min.css):

/*! * Justified Gallery - v3.2.0 * http://miromannino.com/projects/justified-gallery/ * Copyright (c) 2014 Miro Mannino * Licensed under the MIT license. */
@-webkit-keyframes justified-gallery-show-caption-animation{from{opacity:0}
to{opacity:.7}
}
@-moz-keyframes justified-gallery-show-caption-animation{from{opacity:0}
to{opacity:.7}
}
@-o-keyframes justified-gallery-show-caption-animation{from{opacity:0}
to{opacity:.7}
}
@keyframes justified-gallery-show-caption-animation{from{opacity:0}
to{opacity:.7}
}
@-webkit-keyframes justified-gallery-show-entry-animation{from{opacity:0}
to{opacity:1}
}
@-moz-keyframes justified-gallery-show-entry-animation{from{opacity:0}
to{opacity:1}
}
@-o-keyframes justified-gallery-show-entry-animation{from{opacity:0}
to{opacity:1}
}
@keyframes justified-gallery-show-entry-animation{from{opacity:0}
to{opacity:1}
}
.justified-gallery{width:100%;position:relative;overflow:hidden}
.justified-gallery>a,.justified-gallery>div{position:absolute;display:inline-block;overflow:hidden;opacity:0;filter:alpha(opacity=0)}
.justified-gallery>a>img,.justified-gallery>div>img{position:absolute;top:50%;left:50%;margin:0;padding:0;border:0}
.justified-gallery>a>.caption,.justified-gallery>div>.caption{display:none;position:absolute;bottom:0;padding:5px;background-color:#000;left:0;right:0;margin:0;color:#fff;font-size:12px;font-weight:300;font-family:sans-serif}
.justified-gallery>a>.caption.caption-visible,.justified-gallery>div>.caption.caption-visible{display:initial;opacity:.7;filter:alpha(opacity=70);-webkit-animation:justified-gallery-show-caption-animation 500ms 0 ease;-moz-animation:justified-gallery-show-caption-animation 500ms 0 ease;-ms-animation:justified-gallery-show-caption-animation 500ms 0 ease}
.justified-gallery>.entry-visible{opacity:1;filter:alpha(opacity=1);-webkit-animation:justified-gallery-show-entry-animation 300ms 0 ease;-moz-animation:justified-gallery-show-entry-animation 300ms 0 ease;-ms-animation:justified-gallery-show-entry-animation 300ms 0 ease}
.justified-gallery>.spinner{position:absolute;bottom:0;margin-left:-24px;padding:10px 0;left:50%;opacity:initial;filter:initial;overflow:initial}
.justified-gallery>.spinner>span{display:inline-block;opacity:0;filter:alpha(opacity=0);width:8px;height:8px;margin:0 4px;background-color:#000;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px}

CSS代码(swipebox.css):

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("../images/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;max-height:100%;max-width:100%;margin:0;padding:0;width:auto;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:50px;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("../images/icons.png");background-repeat:no-repeat;border:none!important;text-decoration:none!important;cursor:pointer;position:absolute;width:50px;height:50px;top:0;}
#swipebox-action #swipebox-close{background-position:15px 12px;left:40px;}
#swipebox-action #swipebox-prev{background-position:-32px 13px;right:100px;}
#swipebox-action #swipebox-next{background-position:-78px 13px;right:40px;}
#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;}
#swipebox-action #swipebox-prev{right:60px;}
#swipebox-action #swipebox-next{right:0;}
}
/* 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;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
3.71 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
3.71 MB
立即下载
简荷月贞
了解
打赏作者 鼓励作者
Html Js 相册
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章