plugins - need to update plug-in to work with jquery 1.4.3 -
i've been using excellent plug-in called imageswitch avaliable from: http://www.hieu.co.uk/blog/index.php/imageswitch/
ive been using succseusfully in site did few months agao needs update, needed switch jquery 1.4.3 use html5 .data()
the imageswitch plug-in not work under version of jquery, i'm not @ sure start looking fix plug-in use 1.4.3
so asking here if knows can find version works 1.4.3 maybe else has run same problem , has copy of updated script.
heres code in case simple fix:
* jquery.imageswitch * version: 1.0.2 * http://www.hieu.co.uk/imageswitch/ * * copyright (c) 2009 hieu pham - http://www.hieu.co.uk * common development , distribution license (cddl) * http://www.opensource.org/licenses/cddl1.php * * date: 13/03/2009 * revision: 50 */ //this function preload image before using in function (function($){ $.fn.imageswitch = function(arguements, funtionhandle) { var defaults = { type: "fadein", // type of effect run function newimage: "", //the new image loaded in effectoriginal: true, speed: 1000, //speed of effect startleft: 50, //the position effect start compare original position (-) starttop: 0, startopacity: 0, //which start opacity endleft: -50, //the position effect end compare original position (-) endtop: 0, endopacity: 0, //which start opacity direction: "rightleft", //which way image sroll door1: "", //the image door 1 door2: "" //the image door 2 }; var args = $.extend(defaults, arguements); var obj = this; // way reference obj in case need pass in event handle //to specific obj id effect associate var effectid = 0; var effectimageid;//the id of effect image layer : #grpeffectimg + effectid var effectdivid1;//the id of effect div layer : #grpeffectdiv2 + effectid var effectdivid2;//the id of effect div layer : #grpeffectdiv2 + effectid var endfunction = function(){ obj.data("imageswitch", -1); }; if($.isfunction(funtionhandle)){ endfunction = function(){ funtionhandle(); obj.data("imageswitch", -1); }; } //----------------------------------------------------------------------------------------------------------- //the original image fade out when new image fade in var fadeimage = function(){ //generate effect map, move effect map overlay original map obj.parent().append("<img class='grpeffectimg' id='"+effectimageid.replace("#","")+"'/>"); $(effectimageid).attr("src", obj.attr("src")); $(effectimageid).css("position", "absolute"); $(effectimageid).css("top", obj.position().top); $(effectimageid).css("left", obj.position().left); $(effectimageid).css("opacity", 1); //change image of original map obj.attr("src", args.newimage); //need special when user want keep no effect orignal if(args.effectoriginal){ //set start opacity, effect fade out set in start @ 1, vice versa original obj.css("opacity", args.startopacity); //fade in original image obj.animate({"opacity":1}, args.speed); } //start effect animation $(effectimageid).animate({"opacity":0}, args.speed, function(){ //remove effect image when finish effect $(effectimageid).remove(); endfunction(); }); }; //----------------------------------------------------------------------------------------------------------- //the new image fly startposition startopacity var fly = function(flyin){ //generate effect map, move effect map overlay original map $("body").append("<img class='grpeffectimg' id='"+effectimageid.replace("#","")+"'/>"); $(effectimageid).css("position", "absolute"); if(flyin){ //as new image fly in, set effect image src = new image $(effectimageid).attr("src", args.newimage); $(effectimageid).css("top", obj.offset().top + args.starttop); $(effectimageid).css("left", obj.offset().left + args.startleft); $(effectimageid).css("opacity", args.startopacity); endtop = obj.offset().top; endleft = obj.offset().left; //change opacity base on input endopacity = 1; }else{ //as old image fly out, set effect image src = new image //the effect image on top of old image , hide old image //so set old image new src $(effectimageid).attr("src", obj.attr("src")); obj.attr("src", args.newimage); $(effectimageid).css("top", obj.offset().top); $(effectimageid).css("left", obj.offset().left); $(effectimageid).css("opacity", 1); endtop = obj.offset().top + args.endtop; endleft = obj.offset().left + args.endleft; //change opacity base on input endopacity = args.endopacity; } //let effect start fly in $(effectimageid).animate({"opacity":endopacity, "top":endtop, "left": endleft}, args.speed, function(){ obj.attr("src", args.newimage); $(effectimageid).remove(); endfunction(); }); }; //----------------------------------------------------------------------------------------------------------- //the new image scoll in , kick old image out. //with setting scollin = false, original image scroll out , reveal new image var scroll = function(scrollin){ //save original status set in end var backup = obj.clone(true); //create viewport obj.wrap("<div id='grpviewport-"+ effectid+"'></div>"); $("#grpviewport-" + effectid).css("overflow","hidden"); $("#grpviewport-" + effectid).width(obj.width()); $("#grpviewport-" + effectid).height(obj.height()); //generate effect map, move effect map overlay original map $("#grpviewport-" + effectid).append("<img class='grpeffectimg' id='"+effectimageid.replace("#","")+"'/>"); $(effectimageid).css("position", "absolute"); //find effect image start var starttop = 0; var startleft = 0; switch(args.direction){ case "rightleft": startleft = -obj.width(); break; case "leftright": startleft = obj.width(); break; case "topdown": starttop = -obj.height(); break; case "downtop": starttop = obj.height(); break; } //in scroll in using start position, else, set 0 scroll out //also need o set destination of animate different if(scrollin){ $(effectimageid).attr("src", args.newimage); $(effectimageid).css("top", starttop); $(effectimageid).css("left", startleft); $(effectimageid).css("opacity", args.startopacity); endtop = 0; endleft = 0; //don't change opacity if scroll in endopacity = 1; }else{ $(effectimageid).attr("src", obj.attr("src")); $(effectimageid).css("left", 0); $(effectimageid).css("top", 0); obj.attr("src", args.newimage); endtop = starttop; endleft = startleft; //change opacity base on input endopacity = args.endopacity; } //we need treat absolute position different //in case there're text arround image, bit mess if(obj.css("position")!="absolute") { $("#grpviewport-" + effectid).css("position","relative"); obj.css("position","absolute"); } else { $("#grpviewport-" + effectid).css("position","absolute"); $("#grpviewport-" + effectid).css("left",obj.css("left")); $("#grpviewport-" + effectid).css("top",obj.css("top")); obj.css("top",0); obj.css("left",0); } //if effect original image, move if(args.effectoriginal && scrollin) { //move original image along obj.animate({"top": - starttop, "left": - startleft}, args.speed); } //start effect $(effectimageid).animate({"opacity":endopacity,"top":endtop,"left":endleft}, args.speed, function(){ //finish effect, , replace viewport area backup.attr("src",args.newimage); //also remove attr imageswitch backup.removeattr("imageswitch"); backup.data("imageswitch", -1); $("#grpviewport-" + effectid).replacewith(backup); endfunction(); }); }; //----------------------------------------------------------------------------------------------------------- //a door come out create effect door close.then open new image var singledoor = function(){ //save original status set in end var backup = obj.clone(true); //create viewport obj.wrap("<div id='grpviewport'></div>"); $("#grpviewport").css("overflow","hidden"); $("#grpviewport").width(obj.width()); $("#grpviewport").height(obj.height()); //generate effect map, move effect map overlay original map $("#grpviewport").append("<div class='grpeffectdiv' id='"+effectdivid1.replace("#","")+"'/>"); $(effectdivid1).attr("src", args.newimage); $(effectdivid1).css("position", "absolute"); $(effectdivid1).css("background-color", "#fff"); if(args.door1.length>0){ $(effectdivid1).css("background", args.door1); } $(effectdivid1).width(obj.width()); $(effectdivid1).height(obj.height()); //find effect image start var starttop = 0; var startleft = 0; switch(args.direction){ case "rightleft": startleft = -obj.width(); break; case "leftright": startleft = obj.width(); break; case "topdown": starttop = -obj.height(); break; case "downtop": starttop = obj.height(); break; } $(effectdivid1).css("top", starttop); $(effectdivid1).css("left", startleft); //we need treat absolute position different if(obj.css("position")!="absolute") { $("#grpviewport").css("position","relative"); obj.css("position","absolute"); } else { $("#grpviewport").css("position","absolute"); $("#grpviewport").css("left",obj.css("left")); $("#grpviewport").css("top",obj.css("top")); obj.css("top",0); obj.css("left",0); } //start close door $(effectdivid1).animate({"top":0,"left":0}, args.speed, function(){ //finish first effect change image , open door obj.attr("src", args.newimage); //start open door $(effectdivid1).animate({"top":starttop,"left":startleft}, args.speed, function(){ //reset style backup.attr("src",args.newimage); //also remove attr imageswitch backup.removeattr("imageswitch"); backup.data("imageswitch", -1); $("#grpviewport").replacewith(backup); endfunction(); }); }); }; //----------------------------------------------------------------------------------------------------------- //same single door effect, there 2 door var doubledoor = function(){ //save original status set in end var orgposition = obj.css("position"); var orgleft = obj.css("left"); var orgtop = obj.css("top"); //create viewport obj.wrap("<div id='grpviewport'></div>"); $("#grpviewport").css("overflow","hidden"); $("#grpviewport").width(obj.width()); $("#grpviewport").height(obj.height()); //generate effect map, move effect map overlay original map $("#grpviewport").append("<div class='grpeffectdiv' id='"+effectdivid1.replace("#","")+"'/>"); $(effectdivid1).css("position", "absolute"); $(effectdivid1).css("background-color", "#fff"); if(args.door1.length>0){ $(effectdivid1).css("background", args.door1); } $(effectdivid1).width(obj.width()); $(effectdivid1).height(obj.height()); //we need second door $("#grpviewport").append("<div class='grpeffectdiv1' id='"+effectdivid2.replace("#","")+"'/>"); $(effectdivid2).css("position", "absolute"); $(effectdivid2).css("background-color", "#fff"); if(args.door2.length>0){ $(effectdivid2).css("background", args.door2); } $(effectdivid2).width(obj.width()); $(effectdivid2).height(obj.height()); //find effect image start var starttop = 0; var startleft = 0; switch(args.direction){ case "rightleft": startleft = -obj.width(); break; case "leftright": startleft = obj.width(); break; case "topdown": starttop = -obj.height(); break; case "downtop": starttop = obj.height(); break; } $(effectdivid1).css("top", starttop); $(effectdivid1).css("left", startleft); $(effectdivid2).css("top", -starttop); $(effectdivid2).css("left", -startleft); //set background door effect different if(!args.effectoriginal){ $(effectdivid1).css("background","#fff url("+args.newimage+") no-repeat "+ -startleft/2 +"px "+ -starttop/2+"px"); $(effectdivid2).css("background","#fff url("+args.newimage+") no-repeat "+ startleft/2+"px "+ starttop/2 +"px"); } //we need treat absolute position different if(obj.css("position")!="absolute") { $("#grpviewport").css("position","relative"); obj.css("position","absolute"); } else { $("#grpviewport").css("position","absolute"); $("#grpviewport").css("left",orgleft); $("#grpviewport").css("top",orgtop); obj.css("position","absolute"); obj.css("top",0); obj.css("left",0); } //start close door $(effectdivid1).animate({"top":starttop/2,"left":startleft/2}, args.speed, function(){ //finish first effect change image , open door obj.attr("src", args.newimage); //if effectoriginal isn't on mean 2 door stick new image, stop here. else carry on if(!args.effectoriginal){ obj.css("position", orgposition); obj.css("top", orgtop); obj.css("left", orgleft); $("#grpviewport").replacewith(obj); }else{ //start open door $(effectdivid1).animate({"top":starttop,"left":startleft}, args.speed, function(){ //reset style obj.css("position", orgposition); obj.css("top", orgtop); obj.css("left", orgleft); $("#grpviewport").replacewith(obj); }); } }); $(effectdivid2).animate({"top":-starttop/2,"left":-startleft/2}, args.speed, function(){ //finish first effect change image , open door obj.attr("src", args.newimage); //if effectoriginal isn't on mean 2 door stick new image, stop here. else carry on if(!args.effectoriginal){ endfunction(); }else{ //start open door $(effectdivid2).animate({"top":-starttop,"left":-startleft}, args.speed, function(){ //run end effect endfunction(); }); } }); }; //----------------------------------------------------------------------------------------------------------- //the new image flip of old 1 top //if flipin false, old image flip reveal new 1 var flip = function(flipin){ var backup = obj.clone(true); if(obj.css("z-index") == 'auto') { obj.css("z-index", 100); } //if (position different absolute , relative should relative) if(obj.css("position") != "absolute"){ obj.css("position", "relative"); } //generate effect map, move effect map overlay original map $("body").append("<img class='grpeffectimg' id='"+effectimageid.replace("#","")+"'/>"); $(effectimageid).css("position", "absolute"); $(effectimageid).css("top", obj.offset().top); $(effectimageid).css("left", obj.offset().left); if(flipin){ $(effectimageid).css("opacity", args.startopacity); //so layer under original image $(effectimageid).css("z-index", obj.css("z-index")-1); $(effectimageid).attr("src", args.newimage); }else{ $(effectimageid).css("opacity", 1); //this layer on top original image $(effectimageid).css("z-index", obj.css("z-index")+1); //turn in fake old image $(effectimageid).attr("src", obj.attr("src")); obj.attr("src", args.newimage); } //find effect layer stop if(math.abs(args.endtop)<obj.height() && math.abs(args.endleft)<obj.width()){ endtop = obj.offset().top; endleft = obj.offset().left + obj.width(); }else{ endtop = obj.offset().top + args.endtop; endleft = obj.offset().left + args.endleft; } endopacity = 1; //let effect start, $(effectimageid).animate({"opacity":endopacity, "top":endtop, "left": endleft}, args.speed, function(){ //now effect image out, move again if(flipin) { $(effectimageid).css("z-index", 101); }else{ endopacity = args.endopacity; $(effectimageid).css("z-index", 2); } $(effectimageid).animate({"opacity":endopacity, "top":obj.offset().top, "left": obj.offset().left}, args.speed, function(){ //restore image original backup.attr("src", args.newimage); //also remove attr imageswitch backup.removeattr("imageswitch"); backup.data("imageswitch", -1); obj.replacewith(backup); $(effectimageid).remove(); endfunction(); }); }); }; return this.each(function(){ obj = $(this); if(!obj.imageanimating()) { effectid = obj.attr('id').replace(':', '_'); //mark effect running obj.data("imageswitch", 1); effectimageid = "#grpeffectimg-" + effectid;//the id of effect image layer : #grpeffectimg- + effectid effectdivid1 = "#grpeffectdiv1-" + effectid;//the id of effect div layer : #grpeffectdiv1- + effectid effectdivid2 = "#grpeffectdiv2-" + effectid;//the id of effect div layer : #grpeffectdiv2- + effectid var tempimg = new image(); tempimg.src = args.newimage; $.imagepreload(args.newimage,function(){ switch(args.type){ case "fadein": fadeimage(); break; case "flyin": fly(true); break; case "flyout": fly(false); break; case "flipin": flip(true); break; case "flipout": flip(false); break; case "scrollin": scroll(true); break; case "scrollout": scroll(false); break; case "singledoor": singledoor(); break; case "doubledoor": doubledoor(); break; } }); } }); }; })(jquery); //check if effect running (function($){ $.fn.imageanimating = function(){ if(this.data("imageswitch")>0){ return true; }else{ return false; } }; })(jquery); //stop specific effect if it's running (function($){ $.fn.imagestop = function(clearqueue, gotoend, endfunction){ return this.each(function(){ if($(this).imageanimating()){ var effectid = $.data(this,"imageswitch"); $("#grpeffectimg-"+effectid).stop(clearqueue, gotoend); $("#grpeffectdiv-"+effectid).stop(clearqueue, gotoend); $("#grpeffectdiv1-"+effectid).stop(clearqueue, gotoend); $(this).stop(clearqueue, gotoend); $("#grpeffectimg-"+effectid).remove(); $("#grpeffectdiv-"+effectid).remove(); $("#grpeffectdiv1-"+effectid).remove(); if($.isfunction(endfunction)){ endfunction(); } } }); }; })(jquery); //stop effect running (function($){ $.imagestopall = function(clearqueue, gotoend, endfunction){ $(".grpeffectimg").stop(clearqueue, gotoend); $(".grpeffectdiv").stop(clearqueue, gotoend); $(".grpeffectdiv1").stop(clearqueue, gotoend); $(this).stop(clearqueue, gotoend); $(".grpeffectimg").remove(); $(".grpeffectdiv").remove(); $(".grpeffectdiv1").remove(); $.data(this, "imageswitch", -1); if($.isfunction(endfunction)){ endfunction(); } }; })(jquery); //preload specific image (function($){ $.imagepreload = function(filename, endfunction){ var tempimage = new image(); tempimage.src = filename; if($.isfunction(endfunction)){ $(tempimage).load(endfunction()); } }; })(jquery);
this doesn't work, can try jquery-compat. tries create backward compatibility jquery 1.4 1.3 (it's gotta worth something, john resig wrote :):
Comments
Post a Comment