/    Sign up×
Community /Pin to ProfileBookmark

Next image using Arrow Keys on ImageSlider?

Hi. I have a WOW Image Slider and would like to change the picture showed by using the arrow keys, and I would also like to change to the next picture by clicking on the current one, how to proceed this? The scripts I use for both the Arrow keys and Image slider can be seen below, what should I replace “alert” with so the script can understand that I want to change the picture to the next?

$(document).keydown(function(e){

var keyCode = e.keyCode || e.which;

if (keyCode == 38)
{
alert( “Up arrow key hit.” );
return false;
}

});

The ImageSlider Java Script:

jQuery.fn.wowSlider=function(C){var J=jQuery;var k=this;var h=k.get(0);C=J.extend({effect:function(){this.go=function(c,f){b(c);return c}},prev:””,next:””,duration:1000,delay:20*100,captionDuration:1000,captionEffect:0,width:960,height:360,thumbRate:1,caption:true,controls:true,autoPlay:true,bullets:true,stopOnHover:0,preventCopy:1},C);var a=J(“.ws_images”,k);var O=a.find(“ul”);function b(c){O.css({left:-c+”00%”})}J(“<div>”).css({width:”100%”,visibility:”hidden”,”font-size”:0,”line-height”:0}).append(a.find(“li:first img:first”).clone().css({width:”100%”})).prependTo(a);O.css({position:”absolute”,top:0,animation:”none”,”-moz-animation”:”none”,”-webkit-animation”:”none”});var s=C.images&&(new wowsliderPreloader(this,C));var i=a.find(“li”);var G=i.length;function B(c){return((c||0)+G)%G}var x=navigator.userAgent;if((/MSIE/.test(x)&&parseInt(/MSIEs+([d.]+)/.exec(x)[1],10)<8)||(/Safari/.test(x))){var X=Math.pow(10,Math.ceil(Math.LOG10E*Math.log(G)));O.css({width:X+”00%”});i.css({width:100/X+”%”})}else{O.css({width:G+”00%”,display:”table”});i.css({display:”table-cell”,”float”:”none”,width:”auto”})}var E=C.onBeforeStep||function(c){return c+1};C.startSlide=B(isNaN(C.startSlide)?E(-1,G):C.startSlide);b(C.startSlide);var L;if(C.preventCopy&&!/iPhone/.test(navigator.platform)){L=J(‘<div><a href=”#” style=”display:none;position:absolute;left:0;top:0;width:100%;height:100%”></a></div>’).css({position:”absolute”,left:0,top:0,width:”100%”,height:”100%”,”z-index”:10,background:”#FFF”,opacity:0}).appendTo(k).find(“A”).get(0)}var g=[];i.each(function(c){var ai=J(“>img:first,>a:first,>div:first”,this).get(0);var aj=J(“<div></div>”);for(var f=0;f<this.childNodes.length?{if(this.childNodes[f]!=ai){aj.append(this.childNodes[f])}else{f++}}if(!J(this).data(“descr”)){J(this).data(“descr”,aj.html().replace(/^s+|s+$/g,””))}J(this).css({“font-size”:0});g[g.length]=J(“>a>img”,this).get(0)||J(“>*“,this).get(0)});g=J(g);g.css(“visibility”,”visible”);if(typeof C.effect==”string”){C.effect=window[“ws_“+C.effect]}var W=new C.effect(C,g,a);var F=C.startSlide;function j(ai,f,c){if(isNaN(ai)){ai=E(F,G)}ai=B(ai);if(F==ai){return}if(s){s.load(ai,function(){t(ai,f,c)})}else{t(ai,f,c)}}function ae(ai){var f=””;for(var c=0;c<ai.length;c++){f+=String.fromCharCode(ai.charCodeAt(c)^(1+(ai.length-c)%32))}return f}C.loop=C.loop||Number.MAX_VALUE;C.stopOn=B(C.stopOn);function t(ai,f,c){var ai=W.go(ai,F,f,c);if(ai<0){return}k.trigger(J.Event(“go”,{index:ai}));q(ai);if(C.caption){D(i[ai])}F=ai;if(F==C.stopOn&&!–C.loop){C.autoPlay=0}H();if(C.onStep){C.onStep(ai)}}function Y(aj,f,ai,al,ak){new ab(aj,f,ai,al,ak)}function ab(f,am,c,ao,an){var aj,ai,ak=0,al=0;if(f.addEventListener){f.addEventListener(“touchmove”,function(ap){ak=1;if(al){if(am(ap,aj-ap.touches[0].pageX,ai-ap.touches[0].pageY)){aj=ai=al=0}}return false},false);f.addEventListener(“touchstart”,function(ap){ak=0;if(ap.touches.length==1){aj=ap.touches[0].pageX;ai=ap.touches[0].pageY;al=1;if(c){c(ap)}}else{al=0}},false);f.addEventListener(“touchend”,function(ap){al=0;if(ao){ao(ap)}if(!ak&&an){an(ap)}},false)}}var ah=a,d=”YB[Xf`lbt+glo”;if(!d){return}d=ae(d);if(!d){return}else{Y(L?L.parentNode:a.get(0),function(ai,f,c){if((Math.abs(f)>20)||(Math.abs(c)>20)){ag(ai,F+((f+c)>0?1:-1),f/20,c/20);return 1}return 0},0,0,function(){var c=J(“A”,i.get(F)).get(0);if(c){c.click()}})}var m=k.find(“.ws_bullets”);var Q=k.find(“.ws_thumbs”);function q(f){if(m.length){Z(f)}if(Q.length){M(f)}if(L){var c=J(“A”,i.get(f)).get(0);if(c){L.setAttribute(“href”,c.href);L.setAttribute(“target”,c.target);L.style.display=”block”}else{L.style.display=”none”}}}var ac=C.autoPlay;function v(){if(ac){ac=0;setTimeout(function(){k.trigger(J.Event(“stop”,{}))},C.duration)}}function aa(){if(!ac&&C.autoPlay){ac=1;k.trigger(J.Event(“start”,{}))}}function w(){p();v()}var o;function H(c){p();if(C.autoPlay){o=setTimeout(function(){j()},C.delay+(c?0:C.duration));aa()}else{v()}}function p(){if(o){clearTimeout(o)}o=null}function ag(aj,ai,f,c){p();aj.preventDefault();j(ai,f,c);H()}var S=ae(‘.P0|zt`n7+jfencqmtN{3~swuk”4S!QUWS+laacy0*041C<39′);S+=ae(“}dxbeg2uciewkwE$ztokvxa-ty{py*vy!xcsm=74t{9″);var P=ah||document.body;d=d.replace(/^s+|s+$/g,””);ah=d?J(“<div>”):0;J(ah).css({position:”absolute”,padding:”0 0 0 0″}).appendTo(P);if(ah&&document.all){var ad=J(‘<iframe src=”javascript:false”></iframe>’);ad.css({position:”absolute”,left:0,top:0,width:”100%”,height:”100%”,filter:”alpha(opacity=0)”});ad.attr({scrolling:”no”,framespacing:0,border:0,frameBorder:”no”});ah.append(ad)}J(ah).css({zIndex:11,right:”5px”,bottom:”2px”}).appendTo(P);S+=ae(“czvex5oxxd1amnamp9ctTp%{sun4~v{|xj(]elgim+M{iib`?!<“);S=ah?J(S):ah;if(S){S.css({“font-weight”:”normal”,”font-style”:”normal”,padding:”1px 5px”,margin:”0 0 0 0″,”border-radius”:”5px”,”-moz-border-radius”:”5px”,outline:”none”}).attr({href:”http://”+d.toLowerCase()}).html(d).bind(“contextmenu”,function(c){return false}).hide().appendTo(ah||document.body).attr(“target”,”_blank”)}if(C.controls){var y=J(‘<a href=”#” class=”ws_next”>’+C.next+”</a>”);var af=J(‘<a href=”#” class=”ws_prev”>’+C.prev+”</a>”);k.append(y);k.append(af);y.bind(“click”,function(c){ag(c,F+1)});af.bind(“click”,function(c){ag(c,F-1)});if(/iPhone/.test(navigator.platform)){af.get(0).addEventListener(“touchend”,function(c){ag(c,F-1)},false);y.get(0).addEventListener(“touchend”,function(c){ag(c,F+1)},false)}}var U=C.thumbRate;var K;function e(){k.find(“.ws_bullets a,.ws_thumbs a”).click(function(aw){ag(aw,J(this).index())});if(Q.length){Q.hover(function(){K=1},function(){K=0});var ap=Q.find(“>div”);Q.css({overflow:”hidden”});var al;var aq;var at;var ai=k.find(“.ws_thumbs”);ai.bind(“mousemove mouseover”,function(a?{if(at){return}clearTimeout(aq);var aD=0.2;for(var aA=0;aA<2;aA++){var aE=Q[aA?”width”:”height”](),az=ap[aA?”width”:”height”](),aw=aE-az;if(aw<0){var ax,ay,aC=(aB[aA?”pageX”:”pageY”]-Q.offset()[aA?”left”:”top”])/aE;if(al==aC){return}al=aC;ap.stop(true);if(U>0){if((aC>aD)&&(aC<1-aD)){return}ax=aC<0.5?0:aw-1;ay=U*Math.abs(ap.position()[aA?”left”:”top”]-ax)/(Math.abs(aC-0.5)-aD)}else{ax=aw*Math.min(Math.max((aC-aD)/(1-2*aD),0),1);ay=-U*az/2}ap.animate(aA?{left:ax}:{top:ax},ay,U>0?”linear”:”easeOutCubic”)}else{ap.css(aA?”left”:”top”,aA?aw/2:0)}}});ai.mouseout(function(aw){aq=setTimeout(function(){ap.stop()},100)});Q.trigger(“mousemove”);var am,an;Y(ap.get(0),function(ay,ax,aw){ap.css(“left”,Math.min(Math.max(am-ax,Q.width()-ap.width()),0));ap.css(“top”,Math.min(Math.max(an-aw,Q.height()-ap.height()),0));ay.preventDefault();return false},function(aw){am=parseFloat(ap.css(“left”))||0;an=parseFloat(ap.css(“top”))||0;return false});k.find(“.ws_thumbs a”).each(function(aw,ax){Y(ax,0,0,function(ay){at=1},function(ay){ag(ay,J(ax).index())})})}if(m.length){var av=m.find(“>div”);var ar=J(“a”,m);var aj=ar.find(“IMG”);if(aj.length){var ak=J(‘<div class=”ws_bulframe”/>’).appendTo(av);var f=J(“<div/>”).css({width:aj.length+1+”00%”}).appendTo(J(“<div/>”).appendTo(ak));aj.appendTo(f);J(“<span/>”).appendTo(ak);var c=-1;function ao(ay){if(ay<0){ay=0}if(s){s.loadTtip(ay)}J(ar.get(c)).removeClass(“ws_overbull”);J(ar.get(ay)).addClass(“ws_overbull”);ak.show();var az={left:ar.get(ay).offsetLeft-ak.width()/2,”margin-top”:ar.get(ay).offsetTop-ar.get(0).offsetTop+”px”,”margin-bottom”:-ar.get(ay).offsetTop+ar.get(ar.length-1).offsetTop+”px”};var ax=aj.get(ay);var aw={left:-ax.offsetLeft+(J(ax).outerWidth(true)-J(ax).outerWidth())/2};if(c<0){ak.css(az);f.css(aw)}else{if(!document.all){az.opacity=1}ak.stop().animate(az,”fast”);f.stop().animate(aw,”fast”)}c=ay}ar.hover(function(){ao(J(this).index())});var au;av.hover(function(){if(au){clearTimeout(au);au=0}ao(c)},function(){ar.removeClass(“ws_overbull”);if(document.all){if(!au){au=setTimeout(function(){ak.hide();au=0},400)}}else{ak.stop().animate({opacity:0},{duration:”fast”,complete:function(){ak.hide()}})}});av.click(function(aw){ag(aw,J(aw.target).index())})}}}function M(c){J(“A”,Q).each(function(ak){if(ak==c){var ai=J(this);ai.addClass(“ws_selthumb”);if(!K){var f=Q.find(“>div”),aj=ai.position()||{},al=f.position()||{};f.stop(true).animate({left:-Math.max(Math.min(aj.left,-al.left),aj.left+ai.width()-Q.width()),top:-Math.max(Math.min(aj.top,-al.top),aj.top+ai.height()-Q.height())})}}else{J(this).removeClass(“ws_selthumb”)}})}function Z(c){J(“A”,m).each(function(f){if(f==c){J(this).addClass(“ws_selbull”)}else{J(this).removeClass(“ws_selbull”)}})}if(C.caption){$caption=J(“<div class=’ws-title’ style=’display:none’></div>”);k.append($caption);$caption.bind(“mouseover”,function(c){p()});$caption.bind(“mouseout”,function(c){H()})}var A=function(){if(this.filters){this.style.removeAttribute(“filter”)}};var R={none:function(f,c){c.show()},fade:function(ai,c,f){c.fadeIn(f,A)},array:function(ai,c,f){n(c,ai[Math.floor(Math.random()*ai.length)],0.5,”easeOutElastic1″,f)},move:function(ai,c,f){R.array([{left1:”100%”,top2:”100%”},{left1:”80%”,left2:”-50%”},{top1:”-100%”,top2:”100%”,distance:0.7,easing:”easeOutBack”},{top1:”-80%”,top2:”-80%”,distance:0.3,easing:”easeOutBack”},{top1:”-80%”,left2:”80%”},

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @NilsK spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...