/** * AS Keyvisual-Slider * * @version 1.1 * @author:pkrueger * * Features: * - slide any HTML wrapped in unordered list-elements * - containing img's are only loaded, when they are displayed (highly reduzed data-load on heavy galleries) @TODO: Prebuffer next and previous image * - controls via arrows and/or pager-squares * - integrated touchwipe-support for mobile devices */ //integrate Touchwipe support /** * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!) * Common usage: wipe images (left and right to show the previous or next image) * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de) */ var $timer; (function($){$.fn.touchwipe=function(settings){var config={min_move_x:20,min_move_y:20,wipeLeft:function(){},wipeRight:function(){},wipeUp:function(){},wipeDown:function(){},preventDefaultEvents:true};if(settings)$.extend(config,settings);this.each(function(){var startX;var startY;var isMoving=false;function cancelTouch(){this.removeEventListener('touchmove',onTouchMove);startX=null;isMoving=false}function onTouchMove(e){if(config.preventDefaultEvents){e.preventDefault()}if(isMoving){var x=e.touches[0].pageX;var y=e.touches[0].pageY;var dx=startX-x;var dy=startY-y;if(Math.abs(dx)>=config.min_move_x){cancelTouch();if(dx>0){config.wipeLeft()}else{config.wipeRight()}}else if(Math.abs(dy)>=config.min_move_y){cancelTouch();if(dy>0){config.wipeDown()}else{config.wipeUp()}}}}function onTouchStart(e){if(e.touches.length==1){startX=e.touches[0].pageX;startY=e.touches[0].pageY;isMoving=true;this.addEventListener('touchmove',onTouchMove,false)}}if('ontouchstart'in document.documentElement){this.addEventListener('touchstart',onTouchStart,false)}});return this}})(jQuery); (function($){ //Load a specific image by changing the source back $.fn.onDemandLoader = function(img) { $(img).attr('src', $(img).attr('_src')); }; })(jQuery); //Keyvisual-Core (function($){ $.fn.createKeyvisual = function(options) { // Configuration options = $.extend({ id: null, controls_animation: true, //Initial: (true) next- and previous-arrows are toggled via jquery on mouseover interval: 86400000, //Initial: autom. change interval: 1 day ~ no change floating_imgs: false, //Initial: (false) NO multiple imgs, which are floated, MEANS no ONDEMANDLOADER manuell_pager: false, //Initial: (false) pager is rendered on the calculated bottom left of the content touchwipe: true //Initial: (true) touchwipe-support for mobile devices is enabled }, options); /* keyvisuals */ //INIAL RUN if (options.floating_imgs == false) { //Always trigger the FIRST slide for loading $(options.id).onDemandLoader(options.id+' .keyvisualslides li:first .slide_main img'); } $(options.id+' .keyvisualpager li:first-child a').addClass('keyvisualactive'); $(options.id+' .keyvisualslides li:first-child').show(10, initial_run); function initial_run() { //wait until document ready AND all imgs are loaded $(window).load(function () { /* if (options.floating_imgs == true) { //set height for floating container first $(options.id+' .keyvisualslides li:first-child .slide_main').css('height',$(options.id+' .keyvisualslides li:first-child .slide_main img').height()); $(options.id+' .keyvisualslides li:first-child').css('height',$(options.id+' .keyvisualslides li:first-child .slide_main img').height()); } */ $slide_main_height = $(options.id+' .keyvisualslides li:first-child .slide_main').height(); //calculated height for controls $controls_height = $slide_main_height / 2; if (options.manuell_pager == false) { $(options.id+' .keyvisualpager').css('top',$slide_main_height + $(options.id+' .headline p').height() - 30); } $(options.id+' .keyvisualcontrols').css('top',$controls_height + $(options.id+' .headline p').height() - 30); }); } //RUN AT SLIDE-CHANGE function mbr_switch(mbr_targetkeyvisual) { $(options.id+' .keyvisualslides li:visible').fadeOut(80, function(){$(options.id+' .keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').fadeIn(80, switch_run);}); function switch_run() { if (options.floating_imgs == false) { //Trigger the next slide for loading $(options.id).onDemandLoader(options.id+' .keyvisualslides li:nth-child('+mbr_targetkeyvisual+') .slide_main img'); } $(options.id+' .keyvisualpager li a').removeClass('keyvisualactive'); $(options.id+' .keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); /* if (options.floating_imgs == true) { window.setTimeout(function() { //set height for floating container first $(options.id+' .keyvisualslides li:nth-child('+mbr_targetkeyvisual+') .slide_main').css('height',$(options.id+' .keyvisualslides li:nth-child('+mbr_targetkeyvisual+') .slide_main img').height()); $(options.id+' .keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').css('height',$(options.id+' .keyvisualslides li:nth-child('+mbr_targetkeyvisual+') .slide_main img').height()); }, 500); } */ window.setTimeout(function() { //height of .slide_main container $slide_main_height = $(options.id+' .keyvisualslides li:nth-child('+mbr_targetkeyvisual+') .slide_main').height(); //calculated height for controls $controls_height = $slide_main_height / 2; if (options.floating_imgs == false) { //clear old height-rule to set the new one later $(options.id).css('height', ''); //set new heights to prevent jumping on click and position controls $(options.id).css('height', $(options.id).height()); } if (options.manuell_pager == false) { $(options.id+' .keyvisualpager').css('top',$slide_main_height + $(options.id+' .headline p').height() - 30); } $(options.id+' .keyvisualcontrols').css('top',$controls_height + $(options.id+' .headline p').height() - 30); }, 500); } } function mbr_previous() { var mbr_total = $(options.id+' .keyvisualpager li a').length; var mbr_index = $(options.id+' .keyvisualpager li .keyvisualactive').parent().prevAll().length; var mbr_targetkeyvisual = mbr_index; if (mbr_targetkeyvisual < 1) {mbr_targetkeyvisual = mbr_total;} mbr_switch(mbr_targetkeyvisual); } function mbr_next() { var mbr_total = $(options.id+' .keyvisualpager li a').length; var mbr_index = $(options.id+' .keyvisualpager li .keyvisualactive').parent().prevAll().length; var mbr_targetkeyvisual = mbr_index + 2; if (mbr_targetkeyvisual > mbr_total) {mbr_targetkeyvisual = 1;} mbr_switch(mbr_targetkeyvisual); } $(options.id+' .keyvisualpager li a').click(function () { clearInterval(mbr_reload); var mbr_index = $(this).parent().prevAll().length; var mbr_targetkeyvisual = mbr_index + 1; mbr_switch(mbr_targetkeyvisual); mbr_reload = setInterval(mbr_next, options.interval); }); var mbr_reload = setInterval(mbr_next, options.interval); $(options.id+' .keyvisualprevious a').click(function (event) { event.preventDefault(); clearInterval(mbr_reload); mbr_previous(); mbr_reload = setInterval(mbr_next, options.interval); }); $(options.id+' .keyvisualnext a').click(function (event) { event.preventDefault(); clearInterval(mbr_reload); mbr_next(); mbr_reload = setInterval(mbr_next, options.interval); }); if (options.touchwipe == true) { //iPhone/iPad wipe-support $(options.id+' .keyvisualslides').touchwipe({ wipeLeft: function() { mbr_previous();}, wipeRight: function() { mbr_next();}, min_move_x: 20, min_move_y: 20, preventDefaultEvents: true }); } if (options.controls_animation == true) { //hover animation for controls $(document).ready(function(){ $(options.id).hover(function(){$('.keyvisualprevious',this).toggle(200);}); $(options.id).hover(function(){$('.keyvisualnext',this).toggle(200);}); }); } else { $(document).ready(function(){ $(options.id+' .keyvisualprevious').show(); $(options.id+' .keyvisualnext').show(); }); } }; })(jQuery);