Hey guys, I'm dipping my toe into JQuery and am fooling around with the galleria plugin (you can view the beast in it's natural element at http://devkick.com/lab/galleria/demo_01.htm#img/grass-blades.jpg). I've copied the code over to my testbed fairly faithfully, but have made some changes to the layout, dimensions, etc.. You can view that here http://oldkitbag.com/sonta/.
I have also, however, tried to add two little effects of my own and I'm afraid I'm making a sad mess of it:
In the initial version, the title attr of the image was pulled and placed in a span underneath the main image, in my version I've placed it in a div and given it a scroll-type animation to reveal itself upon the mouse hovering over the main image. So far so good, but now this text is without <p> or <span> tags and difficult to style exactly. I've tried append, 'wrapinner', etc, and even tried to create a new element (i.e. a <p>) and insert it within the div I created previously, but without the proper know-how that just wasn't working. I've left it without any tags for the moment, but any help here would be great.
My second problem is that, in giving the main image a hover function, I've obviously conflicted with the initial version's method which was to display a tool tip ("Next Image>>") and activated to next image on mouseclick. What I want is to wrap the images in an anchor tag to lead to a page dedicated to that image's subject matter and to have the JQuery pull that anchor link, hide it , and then activate it when someone clicks on the main image. Changing the content of the tooltip is (thankfully!) not a prob.
I'm including below all the coding involved, for which I apologise in advance. I'm just at the very, very beginning of learning this stuff and I'm not 100% as to what's relevant or not...
$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
$('ul.gallery_demo').galleria({ history : true, // activates the history object for bookmarking, back-button etc. clickNext : true, // helper for making the image clickable insert : '#main_image', // the containing selector for our main image onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
// fade in the image & caption image.css('display','none').fadeIn(1000); caption.css('top','-375px'); $(\".replaced\").hover(function(){ $(\".caption\").animate({top:'0px'},'slow'); image.attr('title','Next image >>'); });
// fetch the thumbnail container var _li = thumb.parents('li');
// fade out inactive thumbnail _li.siblings().children('img.selected').fadeTo(500,0.75);
// fade in active thumbnail thumb.fadeTo('fast',1).addClass('selected');
}, onThumb : function(thumb) { // thumbnail effects goes here
// fetch the thumbnail container var _li = thumb.parents('li');
// if thumbnail is active, fade all the way. var _fadeTo = _li.is('.active') ? '1' : '0.75';
// fade in the thumbnail when finished loading thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects thumb.hover( function() { thumb.fadeTo('fast',1); }, function() { _li.not('.active').children('img').fadeTo('fast',0.75); } // don't fade out if the parent is active ) } }); });
</script>
And finally, the plugin code itself. I understand it in pieces, but unfortunately get lost along the way :D !:
* Copyright (c) 2008 David Hellsing (http://monc.se) * Licensed under the GPL licenses.
;(function($){
var $$;
$$ = $.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 div var _titlediv = $(document.createElement('div')).addClass('caption');
// inject the wrapper in in the insert selector _insert.addClass('galleria_container').append(_div).append(_titlediv);
//-------------
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: '72px', width: '115px', marginTop: '10px', marginLeft: '10px' }); } else { _thumb.css({ width: '115px', height: '72px', marginLeft: '10px', marginTop: '10px' }); } } 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); });
/** * * @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);
// 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);
/** * * Packed history extension for jQuery * Credits to http://www.mikage.to/ * **/
Again, apologies for the long code, but any help you can give me would be greatly appreciated. I learn by doing, and I'm really liking what this JQuery can achieve... Ta! :D
I'm certainly no jQuery expert, but I can usually get it to do what I want (eventually).
So the first thing I did with the page was run it through the firebug console. You are getting one error:
handler is undefined
Now after a quick google search this looks like the most likely culprit http://groups.google.com/group/jquery-en/browse_thread/thread/011919bfea04d90f
All I can say for now is address that, then we'll have another look and hopefully by then some of the javascript ninjas around here can come to your aid.
Aha! I saw that error myself, but had no idea what was causing it...
That's interesting - does that mean that you can't actually use the hover event without specifying a mouseout function? Doesn't that make 'hover' a bit pointless?
EDIT - Ok changed the hover function to the following and got rid of that error:
I have also, however, tried to add two little effects of my own and I'm afraid I'm making a sad mess of it:
In the initial version, the title attr of the image was pulled and placed in a span underneath the main image, in my version I've placed it in a div and given it a scroll-type animation to reveal itself upon the mouse hovering over the main image. So far so good, but now this text is without <p> or <span> tags and difficult to style exactly. I've tried append, 'wrapinner', etc, and even tried to create a new element (i.e. a <p>) and insert it within the div I created previously, but without the proper know-how that just wasn't working. I've left it without any tags for the moment, but any help here would be great.
My second problem is that, in giving the main image a hover function, I've obviously conflicted with the initial version's method which was to display a tool tip ("Next Image>>") and activated to next image on mouseclick. What I want is to wrap the images in an anchor tag to lead to a page dedicated to that image's subject matter and to have the JQuery pull that anchor link, hide it , and then activate it when someone clicks on the main image. Changing the content of the tooltip is (thankfully!) not a prob.
I'm including below all the coding involved, for which I apologise in advance. I'm just at the very, very beginning of learning this stuff and I'm not 100% as to what's relevant or not...
Firstly, the image list, without anchor tags:
Then the header content:
And finally, the plugin code itself. I understand it in pieces, but unfortunately get lost along the way :D !:
Again, apologies for the long code, but any help you can give me would be greatly appreciated. I learn by doing, and I'm really liking what this JQuery can achieve...
Ta! :D
So the first thing I did with the page was run it through the firebug console. You are getting one error:
Now after a quick google search this looks like the most likely culprit http://groups.google.com/group/jquery-en/browse_thread/thread/011919bfea04d90f
All I can say for now is address that, then we'll have another look and hopefully by then some of the javascript ninjas around here can come to your aid.
That's interesting - does that mean that you can't actually use the hover event without specifying a mouseout function? Doesn't that make 'hover' a bit pointless?
EDIT - Ok changed the hover function to the following and got rid of that error:
Any of you ninja's have a crack at the rest? :D