[jQuery] Galleria and imagefit plugins together
I can't find where to add the imagefit code to galleria plugin. I
would really appreciate some help here.
=========== begin imagefit instructions ========
In your JavaScript
Where '#content' is a jQuery selector for the container (or
containers) inside which you want images to resize:
$(function(){
$('#content').imagefit();
});
============ end imagefit instructions =========
============ galleria plugin =================
$$ = $.fn.galleria = function($options) {
// check for basic CSS support
if (!$$.hasCSS()) { return false; }
// init the modified history object
$.historyInit($$.onPageLoad);
// set default options
var $defaults = {
insert : '.galleria_container',
history : true,
clickNext : true,
onImage : function(image,caption,thumb) {},
onThumb : function(thumb) {}
};
// extend the options
var $opts = $.extend($defaults, $options);
// bring the options to the galleria object
for (var i in $opts) {
$.galleria[i] = $opts[i];
}
// if no insert selector, create a new division and insert it before
the ul
var _insert = ( $($opts.insert).is($opts.insert) ) ?
$($opts.insert) :
jQuery(document.createElement('div')).insertBefore(this);
// create a wrapping div for the image
var _div = $(document.createElement('div')).addClass
('galleria_wrapper');
// create a caption span
var _span = $(document.createElement('span')).addClass('caption');
// inject the wrapper in in the insert selector
_insert.addClass('galleria_container').append(_div).append(_span);
//-------------
return this.each(function(){
// add the Galleria class
$(this).addClass('galleria');
// loop through list
$(this).children('li').each(function(i) {
// bring the scope
var _container = $(this);
// build element specific options
var _o = $.meta ? $.extend({}, $opts, _container.data()) : $opts;
// remove the clickNext if image is only child
_o.clickNext = $(this).is(':only-child') ? false : _o.clickNext;
// try to fetch an anchor
var _a = $(this).find('a').is('a') ? $(this).find('a') : false;
// reference the original image as a variable and hide it
var _img = $(this).children('img').css('display','none');
// extract the original source
var _src = _a ? _a.attr('href') : _img.attr('src');
// find a title
var _title = _a ? _a.attr('title') : _img.attr('title');
// create loader image
var _loader = new Image();
// check url and activate container if match
if (_o.history && (window.location.hash &&
window.location.hash.replace(/\#/,'') == _src)) {
_container.siblings('.active').removeClass('active');
_container.addClass('active');
}
// begin loader
$(_loader).load(function () {
// try to bring the alt
$(this).attr('alt',_img.attr('alt'));
//-----------------------------------------------------------------
// the image is loaded, let's create the thumbnail
var _thumb = _a ?
_a.find('img').addClass('thumb noscale').css('display','none') :
_img.clone(true).addClass('thumb').css('display','none');
if (_a) { _a.replaceWith(_thumb); }
if (!_thumb.hasClass('noscale')) { // scaled tumbnails!
var w = Math.ceil( _img.width() / _img.height() *
_container.height() );
var h = Math.ceil( _img.height() / _img.width() * _container.width
() );
if (w < h) {
_thumb.css({ height: 'auto', width: _container.width(),
marginTop: -(h-_container.height())/2 });
} else {
_thumb.css({ width: 'auto', height: _container.height(),
marginLeft: -(w-_container.width())/2 });
}
} else { // Center thumbnails.
// a tiny timer fixed the width/height
window.setTimeout(function() {
_thumb.css({
marginLeft: -( _thumb.width() - _container.width() )/2,
marginTop: -( _thumb.height() - _container.height() )/2
});
}, 1);
}
// add the rel attribute
_thumb.attr('rel',_src);
// add the title attribute
_thumb.attr('title',_title);
// add the click functionality to the _thumb
_thumb.click(function() {
$.galleria.activate(_src);
});
// hover classes for IE6
_thumb.hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);
_container.hover(
function() { _container.addClass('hover'); },
function() { _container.removeClass('hover'); }
);
// prepend the thumbnail in the container
_container.prepend(_thumb);
// show the thumbnail
_thumb.css('display','block');
// call the onThumb function
_o.onThumb(jQuery(_thumb));
// check active class and activate image if match
if (_container.hasClass('active')) {
$.galleria.activate(_src);
//_span.text(_title);
}
//-----------------------------------------------------------------
// finally delete the original image
_img.remove();
}).error(function () {
// Error handling
_container.html('<span class="error" style="color:red">Error
loading image: '+_src+'</span>');
}).attr('src', _src);
});
});
};
/**
*
* @name NextSelector
*
* @desc Returns the sibling sibling, or the first one
*
**/
$$.nextSelector = function(selector) {
return $(selector).is(':last-child') ?
$(selector).siblings(':first-child') :
$(selector).next();
};
/**
*
* @name previousSelector
*
* @desc Returns the previous sibling, or the last one
*
**/
$$.previousSelector = function(selector) {
return $(selector).is(':first-child') ?
$(selector).siblings(':last-child') :
$(selector).prev();
};
/**
*
* @name hasCSS
*
* @desc Checks for CSS support and returns a boolean value
*
**/
$$.hasCSS = function() {
$('body').append(
$(document.createElement('div')).attr('id','css_test')
.css({ width:'1px', height:'1px', display:'none' })
);
var _v = ($('#css_test').width() != 1) ? false : true;
$('#css_test').remove();
return _v;
};
/**
*
* @name onPageLoad
*
* @desc The function that displays the image and alters the active
classes
*
* Note: This function gets called when:
* 1. after calling $.historyInit();
* 2. after calling $.historyLoad();
* 3. after pushing "Go Back" button of a browser
*
**/
$$.onPageLoad = function(_src) {
// get the wrapper
var _wrapper = $('.galleria_wrapper');
// get the thumb
var _thumb = $('.galleria img[@rel="'+_src+'"]');
if (_src) {
// new hash location
if ($.galleria.history) {
window.location = window.location.href.replace(/\#.*/,'') + '#' +
_src;
}
// alter the active classes
_thumb.parents('li').siblings('.active').removeClass('active');
_thumb.parents('li').addClass('active');
// define a new image
var _img = $(new Image()).attr('src',_src).addClass('replaced');
// empty the wrapper and insert the new image
_wrapper.empty().append(_img);
// insert the caption
_wrapper.siblings('.caption').text(_thumb.attr('title'));
// fire the onImage function to customize the loaded image's
features
$.galleria.onImage(_img,_wrapper.siblings('.caption'),_thumb);
// add clickable image helper
if($.galleria.clickNext) {
_img.css('cursor','pointer').click(function() { $.galleria.next
(); })
}
} else {
// clean up the container if none are active
_wrapper.siblings().andSelf().empty();
// remove active classes
$('.galleria li.active').removeClass('active');
}
// place the source in the galleria.current variable
$.galleria.current = _src;
}
/**
*
* @name jQuery.galleria
*
* @desc The global galleria object holds four constant variables and
four public methods:
* $.galleria.history = a boolean for setting the history object
in action with named URLs
* $.galleria.current = is the current source that's being
viewed.
* $.galleria.clickNext = boolean helper for adding a clickable
image that leads to the next one in line
* $.galleria.next() = displays the next image in line, returns
to first image after the last.
* $.galleria.prev() = displays the previous image in line,
returns to last image after the first.
* $.galleria.activate(_src) = displays an image from _src in
the galleria container.
* $.galleria.onImage(image,caption) = gets fired when the image
is displayed.
*
**/
$.extend({galleria : {
current : '',
onImage : function(){},
activate : function(_src) {
if ($.galleria.history) {
$.historyLoad(_src);
} else {
$$.onPageLoad(_src);
}
},
next : function() {
var _next = $($$.nextSelector($('.galleria img[@rel="'+
$.galleria.current+'"]').parents('li'))).find('img').attr('rel');
$.galleria.activate(_next);
},
prev : function() {
var _prev = $($$.previousSelector($('.galleria img[@rel="'+
$.galleria.current+'"]').parents('li'))).find('img').attr('rel');
$.galleria.activate(_prev);
}
}
});
})(jQuery);