/** * Zazar Presentation Framework * * Library: jquery.zazar.js * * Version: 2.0.0 * (C) 2011-2012 Zazar Ltd * * Description: Framework function and effect library * * History: * 2.0.0 - First commercial release * **/ (function($){ $.zazar = { all: function() { // Initialise all functions with default values $.zazar.accordion(); $.zazar.bookmark(); $.zazar.dialog(); $.zazar.navigation(); $.zazar.random(); $.zazar.reveal(); $.zazar.rotate(); $.zazar.scrollto(); $.zazar.slider(); $.zazar.tabs(); $.zazar.ticker(); $.zazar.tooltip(); $.zazar.tree(); }, accordion: function(options) { // Set defaults var defaults = { selector: '.accordion', titletag: 'h4', contenttag: 'p', oneclick: true, speed: 400 }; var options = $.extend(defaults, options); return $(options.selector).each(function() { var obj = $(this); if (!$(obj).hasClass('accordion')) $(obj).addClass('accordion'); // Get each child item $(this).children().each(function() { // Get content element var content = $(options.contenttag,this); // Hide content $(content).hide(); // Style title with link pointer $(options.titletag,this).css({ cursor: 'pointer' }).click(function() { // If oneclick option then hide any visible content if (options.oneclick) { $(options.contenttag,obj).slideUp(); } // Show or hide content if (!$(content).is(':visible')) { $(content).slideDown(options.speed); } else { $(content).slideUp(options.speed); } }); }); }); }, bookmark: function(options) { // Set defaults var defaults = { selector: 'a.bookmark' }; var options = $.extend(defaults, options); return $(options.selector).each(function() { // Attach click event to anchor $(this).bind('click',function() { var url = window.location; var title = document.title; // Add bookmark on supported browsers if (window.sidebar) { window.sidebar.addPanel(title, url,""); } else if( window.external || document.all) { window.external.AddFavorite( url, title); } else { alert('Your browser does not support this bookmark action'); } // Override default anchor handling return false; }); }); }, dialog: function(options) { // Set defaults var defaults = { selector: '.dialog', id: 'dialog', modal: true, opacity: 0.8, fade: 'fast', width: 800, height: 500, errormsg: 'The content could not be loaded' }; var options = $.extend(defaults, options); return $(options.selector).each(function(i,e) { var obj = $(this); // Set up variables var cX, cY, cI, cJ; cX = cY = cI = cJ = 0; var dlg, dlgm, dlgt, dlgc; var el; var id = ''; // Function to show dialog var dialogOpen = function() { // Get window width and full height var x = $(window).width(); var y = $(document).height(); // Calculate center cX = $(window).width() / 2; cY = $(window).height() / 2; // Show background mask for modal option if (options.modal) { dlgm = $('
').appendTo('body').css({ display: 'none', position: 'absolute', width: x, height: y, top: '0', left: '0', zIndex: '10000', opacity: options.opacity }).fadeIn(options.fade).click(function() { dialogClose(); }); } // Create dialog window dlg = $('').appendTo('body'); x = cX - $(dlg).width() / 2; y = cY - $(dlg).height() / 2; $(dlg).css({ display: 'none', position: 'fixed', left: x, top: y, zIndex: '10001' }); // Support for IE6 if ($.browser.msie && parseInt($.browser.version) <= 7) { cI = $(window).scrollTop(); $(dlg).css({ position: 'absolute', top: (y + cI) + 'px', paddingTop: '2em' }); $('select, object, embed').css({ visibility: 'hidden' }); } $(dlg).fadeIn(options.fade); // Create title & close button dlgt = $('').appendTo($(dlg)); $('').appendTo($(dlg)).click(function(e) { e.preventDefault(); dialogClose(); }); $('.dialogTitle, .dialogClose').css({ display: 'none', position: 'absolute' }); cJ = $('.dialogClose').width(); // Create content container dlgc = $('').appendTo($(dlg)).css({ display: 'none' }); // Load content from anchor dialogContent(obj); }; // Function to close dialog var dialogClose = function() { // Reapply id for elements if (id) $(el).attr('id',id); // Remove dialog $('.dlgContent img').remove(); $(dlg).remove(); // Remove background mask if (options.modal) { $(dlgm).fadeOut(options.fade,function() { if ($.browser.msie && parseInt($.browser.version) <= 7) { $('select, object, embed').css({ visibility: 'visible' }); } $(this).remove(); }); } }; // Function to change content var dialogContent = function(obj) { var x = 0, y = 0; var err = false; // Remove any existing content $('.dialogTitle, .dialogClose, .dialogContent').fadeOut(options.fade); $(dlgc).html(''); // Show loader $(dlg).addClass('loader'); // Set new title $(dlgt).html($(obj).attr('title')); // Get content link and type var href = $(obj).attr('href'); var type = href.substr(href.lastIndexOf('.')).toLowerCase(); if (type == '.gif' || type == '.jpg' || type == '.jpeg' || type == '.png' || type == '.bmp') { // Display image var img = new Image(); $(img).load(function() { $(dlgc).css({textAlign: 'center'}).append(img); dialogAnimate(img.width, img.height); }).error(function() { dialogError(); }).attr('src', href + '?' + (new Date()).getTime()); } else if (href.charAt(0) == '#') { // Get element and ID el = $(href).get(0); if (el) { id = $(el).attr('id'); // Create clone and clear original ID var el2 = $(el).clone(); $(el).attr('id',''); // Append to content $(dlgc).html($(el2).html()); x = $(dlgc).width(); y = $(dlgc).height(); dialogAnimate(x,y); } else { dialogError(); } } else { if (type == '.swf' || $(obj).hasClass('flash')) { // Display flash var html = ''; // Get flash size or set default x = 560; y = 315; } else { // Display in iFrame with default size var html = ''; } // Set content and style $(dlgc).css({width: '100%', height: '100%'}).html(html); dialogAnimate(x,y); } }; // Function to animate to the new size of content var dialogAnimate = function(x,y) { // Set default size if zero if (x == 0) x = options.width; if (y == 0) y = options.height; // Set dialog width to title width if (($(dlgt).width() + cJ) > x) x = $(dlgt).width() + cJ; var offX = cX - (x / 2); var offY = cY - (y / 2) + cI; $(dlg).animate({width: x, height: y, left: offX, top: offY}, 200, function() { $('.dialogTitle, .dialogClose, .dialogContent').fadeIn(options.fade); $(dlg).removeClass('loader'); }); } // Function to show default error message var dialogError = function() { $(dlgc).html(options.errormsg).css({whiteSpace: 'nowrap'}); $(dlgt).html(''); var x = $(dlgc).width(); var y = $(dlgc).height(); dialogAnimate(x,y); } // Main actions $(this).bind('click', function(e) { e.preventDefault(); if ($('#'+ options.id).length == 0) { dialogOpen(); } else { dlg = $('#'+ options.id); dlgm = $('.dialogMask'); dialogClose(); } }); }); }, navigation: function(options) { // Set defaults var defaults = { selector: '.navigation', fade: 200, arrows: true, vertical: false }; var options = $.extend(defaults, options); return $(options.selector).each(function() { var obj = $(this); // Current element var dir = options.vertical ? 'vertical' : 'horizontal'; // Orientation stylesheet class name // Add effect classes if required if (!$(obj).hasClass('navigation')) $(obj).addClass('navigation'); if (!$(obj).hasClass(dir)) $(obj).addClass(dir); // Fix z-index IE bug if ($.browser.msie && parseInt($.browser.version) <= 7) { $('.navigation ul').parents().each(function() { var pos = $(this).css('position'); if (pos == 'relative' || pos == 'absolute' || pos == 'fixed') { $(this).hover(function() { $(this).css('zIndex', 1000); }, function() { $(this).css('zIndex', 0); }); } }); } // Add submenu indicators if (options.arrows) { // Add arrow indicators $('li', this).has('ul').each(function() { $('a:first',this).append('+'); }); } // Action for each list item $('li', this).each(function() { // Show and hide menu levels $(this).hover(function() { $('ul:first', this).fadeIn(options.fadein); }, function() { $('ul', this).hide(); }); }); }); }, random: function(options) { // Set defaults var defaults = { selector: '.random' }; var options = $.extend(defaults, options); return $(options.selector).each(function() { var obj = $(this); if (!$(obj).hasClass('random')) $(obj).addClass('random'); var item = Math.floor(Math.random() * $(obj).children().length) + 1; // Hide all children $(obj).children().hide(); // Show random child item $(obj).children(':nth-child('+ item +')').show(); }); }, reveal: function(options) { // Set defaults var defaults = { selector: '.reveal', speed: 400 }; var options = $.extend(defaults, options); return $(options.selector).each(function() { var obj; // Show pointer for non anchors and remove focus outline $(this).css({cursor: 'pointer', outline: 0}); // Reveal previous element if ($(this).hasClass('prev')) { obj = $(this).prev().hide(); } else { // Reveal element by ID if ($(this).hasClass('id')) { obj = $(this).attr('href'); obj = $(obj).hide(); } else { // Default reveal next element obj = $(this).next().hide(); } } // Perform reveal $(this).toggle(function() { obj.slideDown(options.speed); }, function () { obj.slideUp(options.speed); }); }); }, rotate: function(options) { // Set defaults var defaults = { selector: '.rotate', items: 3, pause: 3000, speed: 800, direction: 'up', hoverpause: true, rowheight: 0 }; var options = $.extend(defaults, options); return $(options.selector).each(function() { var obj = $(this); if (!$(obj).hasClass('rotate')) $(obj).addClass('rotate'); var rowHeight = options.rowheight; // Create frame and item containers obj.wrap(''); obj.children('li').wrapInner(''); // Hide list and style obj.parent().css({overflow: 'hidden', position: 'relative'}); if (rowHeight == 0) { // Calculate largest item height obj.children('li').each(function() { if ($(this).height() > rowHeight) { rowHeight = $(this).height(); } }); } // Set height of list items obj.children('li').each(function() { $(this).height(rowHeight); }); // Set container frame height obj.parent().height(rowHeight * options.items); // Function to handle item rotation function rotateMove() { // If item paused exit if (obj.hasClass('pause')) return; // Scroll in chosen direction if (options.direction == 'down') { // Get last list item and copy var item = obj.children('li:last').clone(true); // Scroll item obj.css('top', '-'+ rowHeight +'px').prepend(item); obj.animate({top: 0}, options.speed, function() { $(this).children('li:last').remove(); }); } else { // Get first list item and copy var item = obj.children('li:first').clone(true); // Scroll item obj.animate({top: '-=' + rowHeight + 'px'}, options.speed, function() { $(this).children('li:first').remove(); $(this).css('top', '0'); }); // Append copied item to end of list item.appendTo(obj); } }; // Set timer interval for scrolling var interval = setInterval(function(){ rotateMove(); }, options.pause); // Enable pausing on mouse hover if (options.hoverpause) { obj.bind("mouseenter",function() { obj.addClass('pause'); }).bind("mouseleave",function() { obj.removeClass('pause'); }); } }); }, scrollto: function(options) { // Set defaults var defaults = { selector: 'a.scrollto', speed: 1000 }; var options = $.extend(defaults, options); return $(options.selector).each(function() { // Attach click event to anchor $(this).bind('click',function() { // Scroll to given element $('html,body').animate({ scrollTop: $($(this).attr('href')).offset().top }, options.speed); // Override default anchor handling return false; }); }); }, slider: function(options) { // Set defaults var defaults = { selector: '.slider', pause: 3000, speed: 800, direction: 'right', hoverpause: true, auto: true, continuous: true, pagination: '', controls: '' }; var options = $.extend(defaults, options); return $(options.selector).each(function() { var obj = $(this); // Current element var timeout; // Timer for auto scrolling var listTotal = $(obj).children().length; // Total number of list items var listMax = listTotal - 1; // Zero indexed list total var slideX = 0; // Slider width var slideY = 0; // Slider height var itemIndex = 0; // Current item index var nOffset = 0; // Continous scroll offset var auto = false; // State of auto scroll var pause = options.pause; // Delay in slide animation var ready = true; // Indicates if animation is in progress // Add framework class if (!$(obj).hasClass('slider')) $(obj).addClass('slider'); // Get height set by styles slideX = $(obj).width(); slideY = $(obj).height(); // Create frame and item containers obj.wrap(''); obj.children('li').wrapInner(''); // Set frame to current object & style obj = obj.parent(); obj.width(slideX); obj.height(slideY); obj.css('overflow','hidden'); // Style list $('ul',obj).css('width', slideX * listTotal); $('ul',obj).children('li').css({width: slideX+'px', height: slideY+'px'}); // Clone list for continuous playing if (options.continuous) { $('ul', obj).prepend($('ul li:last-child', obj).clone()); $('ul', obj).append($('ul li:nth-child(2)', obj).clone()); $('ul', obj).css('width',(listTotal + 2) * slideX ).css('margin-left','-'+ slideX +'px'); nOffset = 1; itemIndex = 1; }; // Add pagination if required if (options.pagination) { // Get user element var pag = $(options.pagination); // Create pagination list var html = '