以下是 jQuery动态加载图片相册特效代码 的示例演示效果:
部分效果截图:
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" />
<title>jQuery动态加载图片相册</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' />
<link rel='stylesheet' href='css/colorbox.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>
<script src='js/jquery.colorbox-min.js'></script>
<script>
$(document).ready(function() {
$('#remotetest').justifiedGallery({rel: 'gal0'}).on('jg.rowflush', function () {
$(this).find('a').colorbox({
maxWidth : '80%',
maxHeight : '80%',
opacity : 0.8,
transition : 'elastic',
current : ''
});
});
});
</script>
</head>
<body>
<!-- 代码 开始 -->
<div id="remotetest" style="border: 1px solid black;">
<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>
<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>
<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>
</div>
</body>
</html>
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代码(colorbox.css):
/*Colorbox Core Style:The following CSS is consistent between example themes and should not be altered. */
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;}
#cboxWrapper{max-width:none;}
#cboxOverlay{position:fixed;width:100%;height:100%;}
#cboxMiddleLeft,#cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%;}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0;}
#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
/*User Style:Change the following styles to modify the appearance of Colorbox. They areordered & tabbed in a way that represents the nesting of the generated HTML. */
#cboxOverlay{background:url(../images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px;height:21px;background:url(../images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px;height:21px;background:url(../images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px;height:21px;background:url(../images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px;height:21px;background:url(../images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px;background:url(../images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px;background:url(../images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px;background:url(../images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px;background:url(../images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff;overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px;border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute;bottom:4px;left:0;text-align:center;width:100%;color:#949494;}
#cboxCurrent{position:absolute;bottom:4px;left:58px;color:#949494;}
#cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
/* these elements are buttons,and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:none;}
/* avoid outlines on:active (mouseclick),but preserve outlines on:focus (tabbed navigating) */
#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0;}
#cboxSlideshow{position:absolute;bottom:4px;right:30px;color:#0092ef;}
#cboxPrevious{position:absolute;bottom:0;left:0;background:url(../images/controls.png) no-repeat -75px 0;width:25px;height:25px;text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute;bottom:0;left:27px;background:url(../images/controls.png) no-repeat -50px 0;width:25px;height:25px;text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute;bottom:0;right:0;background:url(../images/controls.png) no-repeat -25px 0;width:25px;height:25px;text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fillwhen an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.See:http://jacklmoore.com/notes/ie-transparency-problems/ */
.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);}
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;}
分享到QQ
分享到微博
微信扫一扫
