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 i...@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 i...@rel="'+ $.galleria.current+'"]').parents('li'))).find('img').attr('rel'); $.galleria.activate(_next); }, prev : function() { var _prev = $($$.previousSelector($('.galleria i...@rel="'+ $.galleria.current+'"]').parents('li'))).find('img').attr('rel'); $.galleria.activate(_prev); } } }); })(jQuery);