/* * jquery.slider.js * @author : Mike Kamminga * * Set-up instructions: * * In every page where the slider appears, include the plugin files: * js/slider/jquery.slider.js * js/slider/jquery.slider.css * * Public Methods: * * do_walk(image_id, object); // this methods needs to be used in combination with an event like click or hover * * Initiate the slider like this: * * 1. Create a placeholder div in your page *
* * 2. In your JS, on document ready, initiate the plugin: * $('#slider').w3_slider({options}); * * Button controls can be binded like this: * * var image_id = 2 - this is an index from the images array passed to the init function. * * $('#button_id').bind({ * mouseenter : function(){ * $('#slider').w3_slider('do_walk',7, $(this)); * } * }); * * note: when buttons are hovered, the autocycle will stop, and continue on mouseout. * * The following are the default plugin options that can be extended: * * width : '100%', // width of the slider wrapper * height : '200px', // height of the slider * ctrl_width : '800', // width of the controls container (left/right button) * slider_bg : '#f60', // background color for the slider wrapper * controls : true, // display controls left/right - true/false * images : [], // object with the images, ['relative/path/to/image.jpg'] * img_width : 1280, // width of the slider images * slide_speed : 500, // animation speed for sliding * interval : 6000, // time between the slides * auto : true, // automatically start cycling - true/false * btn_hover_class // class added to buttons */ (function(c){if(!c.w3)c.w3={};c.w3.slider=function(b,e){var a=this;a.$el=c(b);a.el=b;a.$el.data("w3.slider",a);a.init=function(){a.options=c.extend({},c.w3.slider.defaultOptions,e);a.autocycle_stop=!1;a.walk_in_progress=!1;a.current_image=0;a.total_images=a.options.images.length-1;a.set_wrapper();a.add_controls();a.set_image(a.options.images);a.options.auto&&a.start_auto_cycle();c(window).resize(function(){a.wd=a.get_dimensions(a.$el);image_offset=(a.wd.width-a.options.img_width)/2;image_holder.css({left:image_offset+ "px"})})};a.set_wrapper=function(){a.$el.html("");a.$el.css({background:a.options.slider_bg,height:a.options.height,position:"relative",overflow:"hidden"});a.wd=a.get_dimensions(a.$el)};a.add_controls=function(){var d=c("
"),g=c("
"),b=c("
");click_area=c("
");d.css({width:a.options.ctrl_width+"px",height:a.options.height,position:"relative",left:"50%","margin-left":"-"+a.options.ctrl_width/2+"px","z-index":"980"});click_area.css({width:a.options.ctrl_width+ "px",height:a.options.height,position:"absolute",left:"0",top:"0","z-index":"990",cursor:"pointer"});g.css({position:"absolute",left:"0px",top:"42px",background:"url(images/left_arrow.png) no-repeat","z-index":"1000",width:"53px",height:"131px",cursor:"pointer"});b.css({position:"absolute",right:"0px",top:"42px",background:"url(images/right_arrow.png) no-repeat","z-index":"1000",width:"53px",height:"131px",cursor:"pointer"});g.bind({click:function(){a.walk("left")}});b.bind({click:function(){a.walk("right")}}); d.bind({mouseenter:function(){a.cycle_pause()},mouseleave:function(){a.cycle_resume()}});d.append(g,b,click_area);a.$el.append(d)};a.set_image=function(d){image_holder=c('');image_offset=(a.wd.width-a.options.img_width)/2;image_holder.css({position:"absolute",left:image_offset+"px",top:"0"});a.$el.append(image_holder);if(a.options.images[a.current_image].button)a.current_button=a.options.images[a.current_image].button,c(a.current_button).addClass(a.options.btn_hover_class)}; a.walk=function(d,b){if(typeof d=="number")a.current_image=d;else if(d==="right")a.current_image0?a.current_image-=1:a.current_image=a.total_images;var e=a.options.images[a.current_image].img;document.createElement("img").src=a.options.images[a.current_image].img;c(a.current_button).removeClass(a.options.btn_hover_class);if(a.options.images[a.current_image].button)a.current_button=a.options.images[a.current_image].button, c(a.current_button).addClass(a.options.btn_hover_class);d==="left"?image_holder.animate({left:a.wd.width+"px"},a.options.slide_speed,function(){image_holder.attr("src",e);click_area.bind({click:function(){window.location=a.options.images[a.current_image].url}})}).animate({left:"-"+a.options.img_width+"px"},0).animate({left:image_offset},a.options.slide_speed,function(){a.walk_in_progress=!1;b&&b()}):image_holder.animate({left:"-"+a.options.img_width},a.options.slide_speed,function(){image_holder.attr("src", e);click_area.bind({click:function(){window.location=a.options.images[a.current_image].url}})}).animate({left:a.wd.width+"px"},0).animate({left:image_offset},a.options.slide_speed,function(){a.walk_in_progress=!1;b&&b()})};a.get_dimensions=function(a){var b={};b.width=a.width();b.height=a.height();return b};a.start_auto_cycle=function(){a.autocycle=setTimeout(function(){a.autocycle_stop!=!0&&a.walk("right",a.start_auto_cycle)},a.options.interval)};a.cycle_pause=function(){clearTimeout(a.autocycle); a.autocycle_stop=!0};a.cycle_resume=function(){a.autocycle_stop=!1;clearTimeout(a.autocycle);a.start_auto_cycle()};f.do_walk=function(b,c){a.cycle_pause();if(typeof b!="number"||b>a.total_images)b=0,console.log("the provided image was either not an int or the number was to large");if(!a.walk_in_progress&&a.current_image!=b)a.walk(b),a.walk_in_progress=!0;c.bind({mouseleave:function(){a.cycle_resume()}})};f.do_cycle_pause=function(){a.cycle_pause()};f.do_cycle_resume=function(){a.cycle_resume()};a.init()}; c.w3.slider.defaultOptions={width:"100%",height:"200px",ctrl_width:"800",slider_bg:"#f60",controls:!0,images:[],img_width:1280,slide_speed:500,interval:6000,auto:!0,btn_hover_class:"abc"};c.fn.w3_slider=function(b){if(e[b])return e[b].apply(this,Array.prototype.slice.call(arguments,1));else if(typeof b==="object"||!b)return e.init.apply(this,arguments);else c.error("Method "+b+" does not exist on jQuery.tooltip")};var f={},e={init:function(b){return this.each(function(){new c.w3.slider(this,b)})}, do_walk:function(b,c){f.do_walk(b,c)}}})(jQuery);