harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #587 from git-marijus/master

Browse Source 
try once more :)
This commit is contained in:
RedMatrix 2014-09-11 18:45:22 +10:00
commit 46fd0ef5ba
12 changed files with 803 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
library/justifiedGallery/dist/css/justifiedGallery.css vendored Normal file
View File

@ -0,0 +1,149 @@
/*!
* 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: 0.7;
}
}
@-moz-keyframes justified-gallery-show-caption-animation {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}
@-o-keyframes justified-gallery-show-caption-animation {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}
@keyframes justified-gallery-show-caption-animation {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}
@-webkit-keyframes justified-gallery-show-entry-animation {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
@-moz-keyframes justified-gallery-show-entry-animation {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
@-o-keyframes justified-gallery-show-entry-animation {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
@keyframes justified-gallery-show-entry-animation {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
.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);
/* IE8 or Earlier */
}
.justified-gallery > a > img,
.justified-gallery > div > img {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
border: none;
}
.justified-gallery > a > .caption,
.justified-gallery > div > .caption {
display: none;
position: absolute;
bottom: 0;
padding: 5px;
background-color: #000000;
left: 0;
right: 0;
margin: 0;
color: white;
font-size: 12px;
font-family: sans-serif;
}
.justified-gallery > a > .caption.caption-visible,
.justified-gallery > div > .caption.caption-visible {
display: initial;
opacity: 0.7;
filter: "alpha(opacity=70)";
/* IE8 or Earlier */
-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.0;
filter: alpha(opacity=100);
/* IE8 or Earlier */
-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 10px 0;
left: 50%;
opacity: initial;
filter: initial;
overflow: initial;
}
.justified-gallery > .spinner > span {
display: inline-block;
opacity: 0;
filter: alpha(opacity=0);
/* IE8 or Earlier */
width: 8px;
height: 8px;
margin: 0 4px 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;
}

7
library/justifiedGallery/dist/css/justifiedGallery.min.css vendored Normal file
View File

@ -0,0 +1,7 @@
/*!
* 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=100);-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}

586
library/justifiedGallery/dist/js/jquery.justifiedGallery.js vendored Normal file
View File

@ -0,0 +1,586 @@
/*!
* Justified Gallery - v3.2.0
* http://miromannino.com/projects/justified-gallery/
* Copyright (c) 2014 Miro Mannino
* Licensed under the MIT license.
*/
(function($) {
/* Events
jg.complete : called when all the gallery has been created
jg.resize : called when the gallery has been resized
*/
$.fn.justifiedGallery = function (arg) {
// Default options
var defaults = {
sizeRangeSuffixes : {
'lt100': '_t',
'lt240': '_m',
'lt320': '_n',
'lt500': '',
'lt640': '_z',
'lt1024': '_b'
},
rowHeight : 120,
maxRowHeight : 0, //negative value = no limits, 0 = 1.5 * rowHeight
margins : 1,
lastRow : 'nojustify', // or can be 'justify' or 'hide'
justifyThreshold: 0.75, /* if row width / available space > 0.75 it will be always justified
(i.e. lastRow setting is not considered) */
fixedHeight : false,
captions : true,
cssAnimation: false,
imagesAnimationDuration : 300, //ignored with css animations
captionSettings : { //ignored with css animations
animationDuration : 500,
visibleOpacity : 0.7,
nonVisibleOpacity : 0.0
},
rel : null, //rewrite the rel of each analyzed links
target : null, //rewrite the target of all links
extension : /\.[^.]+$/,
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.captionSettings.animationDuration, ev.data.settings.captionSettings.visibleOpacity);
}
}
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.captionSettings.animationDuration, ev.data.settings.captionSettings.nonVisibleOpacity);
}
}
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 thumbnails
var 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 ------------------------------
var 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 exists
var 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) {
if (!context.settings.cssAnimation) {
$imgCaption.stop().fadeTo(context.settings.imagesAnimationDuration, context.settings.captionSettings.nonVisibleOpacity);
}
if (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, imgAspectRatio, newImgW, newImgH, justify = true;
var minHeight = 0;
var availableWidth = context.galleryWidth - ((context.buildingRow.entriesBuff.length - 1) * context.settings.margins);
var rowHeight = availableWidth / context.buildingRow.aspectRatio;
var justificable = context.buildingRow.width / availableWidth > context.settings.justifyThreshold;
//Skip the last row if we can't justify it and the lastRow == 'hide'
if (isLastRow && context.settings.lastRow === 'hide' && !justificable) {
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 is justificable (the images will not become too big)
if (isLastRow && context.settings.lastRow === 'nojustify' && !justificable) justify = false;
for (i = 0; i < context.buildingRow.entriesBuff.length; i++) {
$image = context.buildingRow.entriesBuff[i].find('img');
imgAspectRatio = $image.data('jg.imgw') / $image.data('jg.imgh');
if (justify) {
newImgW = rowHeight * imgAspectRatio;
newImgH = rowHeight;
/* With fixedHeight the newImgH must be greater than rowHeight.
In some cases here this is not satisfied (due to the justification).
But we comment it, because is better to have a shorter but justified row instead
to have a cropped image at the end. */
/*if (context.settings.fixedHeight && newImgH < context.settings.rowHeight) {
newImgW = context.settings.rowHeight * imgAspectRatio;
newImgH = context.settings.rowHeight;
}*/
} else {
newImgW = context.settings.rowHeight * imgAspectRatio;
newImgH = context.settings.rowHeight;
}
$image.data('jg.imgw', Math.ceil(newImgW));
$image.data('jg.imgh', Math.ceil(newImgH));
if (i === 0 || minHeight > newImgH) minHeight = newImgH;
}
if (context.settings.fixedHeight && minHeight > context.settings.rowHeight)
minHeight = context.settings.rowHeight;
return minHeight;
}
function rewind(context) {
context.lastAnalyzedIndex = -1;
context.buildingRow.entriesBuff = [];
context.buildingRow.aspectRatio = 0;
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.aspectRatio = 0;
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 Height
context.$gallery.height(context.offY + minHeight +
(context.spinner.active ? context.spinner.$el.innerHeight() : 0)
);
if(!isLastRow) {
//Ready for a new row
context.offY += minHeight + context.settings.margins;
//DEBUG// console.log('minHeight: ' + minHeight + ' offY: ' + context.offY);
context.buildingRow.entriesBuff = []; //clear the array creating a new one
context.buildingRow.aspectRatio = 0;
context.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 analyze
startImgAnalyzer(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);
else
spinnerContext.$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');
if ($image.data('jg.loaded') === true) {
isLastRow = i >= context.entries.length - 1;
var availableWidth = context.galleryWidth - ((context.buildingRow.entriesBuff.length - 1) * context.settings.margins);
var imgAspectRatio = $image.data('jg.imgw') / $image.data('jg.imgh');
if (availableWidth / (context.buildingRow.aspectRatio + imgAspectRatio) < context.settings.rowHeight) {
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.aspectRatio += imgAspectRatio;
context.buildingRow.width += imgAspectRatio * context.settings.rowHeight;
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, isLastRow);
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 callback
if (!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(parent, settingName) {
if (typeof parent[settingName] === 'string') {
parent[settingName] = parseFloat(parent[settingName], 10);
if (isNaN(parent[settingName])) throw 'invalid number for ' + settingName;
} else if (typeof parent[settingName] === 'number') {
if (isNaN(parent[settingName])) throw 'invalid number for ' + settingName;
} else {
throw settingName + ' 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(context.settings, 'rowHeight');
checkOrConvertNumber(context.settings, 'maxRowHeight');
checkOrConvertNumber(context.settings, 'margins');
if (context.settings.lastRow !== 'nojustify' &&
context.settings.lastRow !== 'justify' &&
context.settings.lastRow !== 'hide') {
throw 'lastRow must be "nojustify", "justify" or "hide"';
}
checkOrConvertNumber(context.settings, '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(context.settings.captionSettings, 'animationDuration');
checkOrConvertNumber(context.settings, 'imagesAnimationDuration');
checkOrConvertNumber(context.settings.captionSettings, 'visibleOpacity');
if (context.settings.captionSettings.visibleOpacity < 0 || context.settings.captionSettings.visibleOpacity > 1)
throw 'captionSettings.visibleOpacity must be in the interval [0, 1]';
checkOrConvertNumber(context.settings.captionSettings, 'nonVisibleOpacity');
if (context.settings.captionSettings.visibleOpacity < 0 || context.settings.captionSettings.visibleOpacity > 1)
throw 'captionSettings.nonVisibleOpacity 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(context.settings, '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 init
var $spinner = $('<div class="spinner"><span></span><span></span><span></span></div>');
//Context init
context = {
settings : $.extend({}, defaults, arg),
imgAnalyzerTimeout : null,
entries : null,
buildingRow : {
entriesBuff : [],
width : 0,
aspectRatio : 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 {
//redmatrix - this makes the gallery jump back to top after new content is loaded
context.settings = $.extend({}, context.settings, arg);
rewind(context);
}
checkSettings(context);
context.entries = $gallery.find('> a').toArray();
if (context.entries.length === 0) return;
// Randomize
if (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 start
if (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 overwrite
if (context.settings.rel !== null) $entry.attr('rel', context.settings.rel);
// Link Target global overwrite
if (context.settings.target !== null) $entry.attr('target', context.settings.target);
// Image src
var 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));

7
library/justifiedGallery/dist/js/jquery.justifiedGallery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

20
mod/photos.php
View File

@ -635,7 +635,7 @@ function photos_content(&$a) {
);
if(count($r)) {
$a->set_pager_total(count($r));
$a->set_pager_itemspage(60);
$a->set_pager_itemspage(30);
}
if($_GET['order'] === 'posted')
@ -703,7 +703,7 @@ function photos_content(&$a) {
if(count($r)) {
$twist = 'rotright';
$o .= "<script> var page_query = '" . $_GET['q'] . "'; var extra_args = '" . extra_query_args() . "' ; </script>";
$o .= '<div id="photo-album-contents">';
$o .= '<div id="photo-album-contents-' . $a->pager['page'] . '">';
foreach($r as $rr) {
@ -755,12 +755,18 @@ function photos_content(&$a) {
if($_REQUEST['aj']) {
if(! $r)
$ajaxout .= '<div id="content-complete"></div>';
echo '<div id="photo-album-contents-' . $a->pager['page'] . '">';
echo $ajaxout;
echo '<div>';
echo '<script>justifyPhotos(' . $a->pager['page'] . ');</script>';
killme();
}
$o .= '<div id="page-end"></div>';
$o .= '</div>'; // photo-album-contents
$o .= '<script>justifyPhotos(' . $a->pager['page'] . ');</script>';
$o .= '<div id="page-end"></div>';
$o .= '<div id="photo-album-end"></div>';
$o .= '<script>$(document).ready(function() { loadingPage = false;});</script>';
$o .= '<div id="page-spinner"></div>';
@ -1159,7 +1165,7 @@ function photos_content(&$a) {
);
if(count($r)) {
$a->set_pager_total(count($r));
$a->set_pager_itemspage(60);
$a->set_pager_itemspage(30);
}
$r = q("SELECT `resource_id`, `id`, `filename`, type, `album`, max(`scale`) AS `scale` FROM `photo`
@ -1216,7 +1222,8 @@ function photos_content(&$a) {
if($_REQUEST['aj']) {
if($photos) {
$o = replace_macros(get_markup_template('photosajax.tpl'),array(
'$photos' => $photos
'$photos' => $photos,
'$page' => $a->pager['page']
));
}
else {
@ -1233,6 +1240,7 @@ function photos_content(&$a) {
'$can_post' => $can_post,
'$upload' => array(t('Upload New Photos'), $a->get_baseurl().'/photos/'.$a->data['channel']['channel_address'].'/upload'),
'$photos' => $photos,
'$page' => $a->pager['page']
));
}
@ -1243,7 +1251,7 @@ function photos_content(&$a) {
killme();
}
// $o .= paginate($a);
// paginate($a);
return $o;
}

4
view/css/mod_photos.css
View File

@ -182,3 +182,7 @@
margin-left: 200px;
}
div[id^='photo-album-contents-'] {
margin-bottom: 3px;
}

25
view/js/main.js
View File

@ -704,6 +704,22 @@ function updateConvItems(mode,data) {
}
function justifyPhotos(bParam_page) {
$('#photo-album-contents-' + bParam_page).justifiedGallery({
lastRow : 'nojustify',
captions: true,
margins: 3,
rowHeight : 150,
sizeRangeSuffixes : {
'lt100': '',
'lt240': '',
'lt320': '',
'lt500': '',
'lt640': '',
'lt1024': ''
}
});
}
function notify_popup_loader(notifyType) {
@ -1050,7 +1066,6 @@ function previewTheme(elm) {
}
$(document).ready(function() {
jQuery.timeago.settings.strings = {
prefixAgo : aStr['t01'],
prefixFromNow : aStr['t02'],
@ -1089,7 +1104,7 @@ $(document).ready(function() {
$(window).scroll(function () {
$(window).scroll(function () {
if(typeof buildCmd == 'function') {
// This is a content page with items and/or conversations
$('#more').hide();
@ -1099,8 +1114,8 @@ $(window).scroll(function () {
$('#more').css("top","400");
$('#more').show();
}
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if((pageHasMoreContent) && (! loadingPage)) {
$('#more').hide();
$('#no-more').hide();
@ -1120,7 +1135,7 @@ $(window).scroll(function () {
$('#more').show();
}
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if((pageHasMoreContent) && (! loadingPage)) {
$('#more').hide();
$('#no-more').hide();

3
view/php/theme_init.php
View File

@ -10,10 +10,13 @@ head_add_css('library/colorbox/colorbox.css');
head_add_css('view/css/conversation.css');
head_add_css('view/css/widgets.css');
head_add_css('library/justifiedGallery/dist/css/justifiedGallery.css');
head_add_js('jquery.js');
head_add_js('jquery-migrate-1.1.1.js');
head_add_js('library/justifiedGallery/dist/js/jquery.justifiedGallery.js');
//head_add_js('jquery-compat.js');
head_add_js('spin.js');
head_add_js('jquery.spin.js');

10
view/tpl/photo_album.tpl
View File

@ -1,7 +1,3 @@
<div class="photo-album-image-wrapper{{$twist}}" id="photo-album-image-wrapper-{{$id}}">
<a href="{{$photolink}}" class="photo-album-photo-link" id="photo-album-photo-link-{{$id}}" title="{{$phototitle}}" rel="{{$rel}}">
<img src="{{$imgsrc}}" alt="{{$imgalt}}" title="{{$phototitle}}" class="photo-album-photo lframe resize" id="photo-album-photo-{{$id}}" />
<p class='caption'>{{$desc}}</p>
</a>
</div>
<div class="photo-album-image-wrapper-end"></div>
<a href="{{$photolink}}" id="photo-album-photo-link-{{$id}}" title="{{$phototitle}}" rel="{{$rel}}">
<img src="{{$imgsrc}}" alt="{{if $desc}}{{$desc}}{{else}}{{$imgalt}}{{/if}}" title="{{$phototitle}}" id="photo-album-photo-{{$id}}" />
</a>

9
view/tpl/photo_top.tpl
View File

@ -1,7 +1,4 @@
<div class="photo-top-image-wrapper lframe {{$photo.twist}}" id="photo-top-image-wrapper-{{$photo.id}}">
<a href="{{$photo.link}}" class="photo-top-photo-link" id="photo-top-photo-link-{{$photo.id}}" title="{{$photo.title}}">
<img src="{{$photo.src}}" alt="{{$photo.alt}}" title="{{$photo.title}}" class="photo-top-photo" id="photo-top-photo-{{$photo.id}}" />
</a>
<div class="photo-top-album-name"><a href="{{$photo.album.link}}" class="photo-top-album-link" title="{{$photo.album.alt}}" >{{$photo.album.name}}</a></div>
</div>
<a href="{{$photo.link}}" id="photo-top-photo-link-{{$photo.id}}" title="{{$photo.title}}">
<img src="{{$photo.src}}" alt="{{$photo.album.name}}" title="{{$photo.title}}" id="photo-top-photo-{{$photo.id}}" />
</a>

6
view/tpl/photos_recent.tpl
View File

@ -3,12 +3,14 @@
<a id="photo-top-upload-link" href="{{$upload.1}}">{{$upload.0}}</a>
{{/if}}
<div id="photo-album-contents" class="photos">
<div id="photo-album-contents-{{$page}}">
{{foreach $photos as $photo}}
{{include file="photo_top.tpl"}}
{{/foreach}}
<div id="page-end"></div>
</div>
<script>justifyPhotos({{$page}});</script>
<div id="page-end"></div>
<div class="photos-end"></div>
<script>$(document).ready(function() { loadingPage = false;});</script>
<div id="page-spinner"></div>

3
view/tpl/photosajax.tpl
View File

@ -1,4 +1,7 @@
<!-- -->
<div id="photo-album-contents-{{$page}}">
{{foreach $photos as $photo}}
{{include file="photo_top.tpl"}}
{{/foreach}}
</div>
<script>justifyPhotos({{$page}});</script>