0
で動作するように更新する必要があります今更新を必要とするagao、jquery 1.4.3に切り替える必要があったので、html5 .data（）を使用することができましたから、私は優れたプラグインと呼ばれるimageswitchのavaliableを使用してきたプラグインのjQuery 1.4.3
imageswitchプラグインはjqueryのこのバージョンでは動作しません。 1.4.3で使用するプラグインを修正するためにどこから始めるべきなのか確信してください
ここで私はどこにav 1.4.3で動作するバージョンは、他の誰かが同じ問題に遭遇し、更新されたスクリプトのコピーを持っている可能性があります。
相続人の場合では、コードの簡単な修正：
* jQuery.ImageSwitch
* Version: 1.0.2
* http://www.hieu.co.uk/ImageSwitch/
*
* Copyright (c) 2009 Hieu Pham - http://www.hieu.co.uk
* COMMON DEVELOPMENT AND DISTRIBUTION LICENSE (CDDL)
* http://www.opensource.org/licenses/cddl1.php
*
* Date: 13/03/2009
* Revision: 50
*/
//This function to preload the image before using it in the function
(function($){
$.fn.ImageSwitch = function(Arguements, FuntionHandle) {
var defaults = {
Type: "FadeIn", // Type of effect to run the function
NewImage: "", //The new image will be loaded in
EffectOriginal: true,
Speed: 1000, //Speed of the effect
StartLeft: 50, //The position the effect start compare to the original position could be (-)
StartTop: 0,
StartOpacity: 0, //Which start opacity it would be
EndLeft: -50, //The position the effect end compare to the original position could be (-)
EndTop: 0,
EndOpacity: 0, //Which start opacity it would be
Direction: "RightLeft", //Which Way the image will be sroll
Door1: "", //The image for the door 1
Door2: "" //The image for the door 2
};
var Args = $.extend(defaults, Arguements);
var Obj = this; // Just a way to reference to this obj in case we need to pass in another event handle
//To specific which obj ID the effect will associate to
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 will be fade out when the new image will fade in
var FadeImage = function(){
//Generate the effect map, move the effect map overlay the 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 the original map
Obj.attr("src", Args.NewImage);
//Need something special when user want to keep no effect for the orignal
if(Args.EffectOriginal){
//Set the start opacity, as the effect will fade out we set in start at 1, vice versa for the original
Obj.css("opacity", Args.StartOpacity);
//Fade in the original image
Obj.animate({"opacity":1}, Args.Speed);
}
//Start effect animation
$(EffectImageId).animate({"opacity":0}, Args.Speed, function(){
//Remove the effect image when finish the effect
$(EffectImageId).remove();
EndFunction();
});
};
//-----------------------------------------------------------------------------------------------------------
//The new image will fly from the startPosition with the StartOpacity
var Fly = function(FlyIn){
//Generate the effect map, move the effect map overlay the original map
$("body").append("<img class='GrpEffectImg' id='"+EffectImageId.replace("#","")+"'/>");
$(EffectImageId).css("position", "absolute");
if(FlyIn){
//As the new image will fly in, so we set the 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 the opacity base on the input
EndOpacity = 1;
}else{
//As the old image will fly out, so we set the effect image src = new image
//The effect image will be on top of the old image and hide the old image
//So we could set the old image with the 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 the opacity base on the input
EndOpacity = Args.EndOpacity;
}
//Let the 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 will scoll in and kick the old image out.
//With the setting ScollIn = false, The original image will scroll out and reveal the new image
var Scroll = function(ScrollIn){
//Save the original status so we could set it in the end
var backup = Obj.clone(true);
//Create a viewport for it
Obj.wrap("<div id='GrpViewport-"+ EffectID+"'></div>");
$("#GrpViewport-" + EffectID).css("overflow","hidden");
$("#GrpViewport-" + EffectID).width(Obj.width());
$("#GrpViewport-" + EffectID).height(Obj.height());
//Generate the effect map, move the effect map overlay the original map
$("#GrpViewport-" + EffectID).append("<img class='GrpEffectImg' id='"+EffectImageId.replace("#","")+"'/>");
$(EffectImageId).css("position", "absolute");
//Find where the 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 the Start position, else, Set it to 0 so it could scroll out
//Also need o set the destination of the 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 the opacity if it 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 the opacity base on the input
EndOpacity = Args.EndOpacity;
}
//We need to treat absolute position different
//In some case there're text arround the image, it could be a bit mess up
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 the original image, then move it as well
if(Args.EffectOriginal && ScrollIn)
{
//Move the original image along
Obj.animate({"top": - StartTop,
"left": - StartLeft}, Args.Speed);
}
//Start the effect
$(EffectImageId).animate({"opacity":EndOpacity,"top":EndTop,"left":EndLeft}, Args.Speed,
function(){
//Finish the effect, and replace the viewport with this area
backup.attr("src",Args.NewImage);
//Also remove the Attr for imageswitch
backup.removeAttr("imageswitch");
backup.data("imageswitch", -1);
$("#GrpViewport-" + EffectID).replaceWith(backup);
EndFunction();
});
};
//-----------------------------------------------------------------------------------------------------------
//A door come out create an effect door close.then open the new image
var SingleDoor = function(){
//Save the original status so we could set it in the end
var backup = Obj.clone(true);
//Create a viewport for it
Obj.wrap("<div id='GrpViewport'></div>");
$("#GrpViewport").css("overflow","hidden");
$("#GrpViewport").width(Obj.width());
$("#GrpViewport").height(Obj.height());
//Generate the effect map, move the effect map overlay the 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 where the 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 to 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 the Door
$(EffectDivId1).animate({"top":0,"left":0}, Args.Speed, function(){
//Finish the first effect change the image and open the door
Obj.attr("src", Args.NewImage);
//Start open the door
$(EffectDivId1).animate({"top":StartTop,"left":StartLeft}, Args.Speed, function(){
//Reset style
backup.attr("src",Args.NewImage);
//Also remove the Attr for imageswitch
backup.removeAttr("imageswitch");
backup.data("imageswitch", -1);
$("#GrpViewport").replaceWith(backup);
EndFunction();
});
});
};
//-----------------------------------------------------------------------------------------------------------
//Same with single door but with this effect, there will be 2 door
var DoubleDoor = function(){
//Save the original status so we could set it in the end
var orgPosition = Obj.css("position");
var orgLeft = Obj.css("left");
var orgTop = Obj.css("top");
//Create a viewport for it
Obj.wrap("<div id='GrpViewport'></div>");
$("#GrpViewport").css("overflow","hidden");
$("#GrpViewport").width(Obj.width());
$("#GrpViewport").height(Obj.height());
//Generate the effect map, move the effect map overlay the 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 the 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 where the 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 the background for the door effect so it look 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 to 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 the Door
$(EffectDivId1).animate({"top":StartTop/2,"left":StartLeft/2}, Args.Speed, function(){
//Finish the first effect change the image and open the door
Obj.attr("src", Args.NewImage);
//If EffectOriginal isn't on mean two door stick into the new image, then 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 the 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 the first effect change the image and open the door
Obj.attr("src", Args.NewImage);
//If EffectOriginal isn't on mean two door stick into the new image, then stop here. Else carry on
if(!Args.EffectOriginal){
EndFunction();
}else{
//Start open the door
$(EffectDivId2).animate({"top":-StartTop,"left":-StartLeft}, Args.Speed, function(){
//Run the end effect
EndFunction();
});
}
});
};
//-----------------------------------------------------------------------------------------------------------
//The new image will flip from the back of the old one to the top
//If FlipIn is false, then the old image will flip to the back reveal the new one
var Flip = function(FlipIn){
var backup = Obj.clone(true);
if(Obj.css("z-index") == 'auto') {
Obj.css("z-index", 100);
}
//if (position different then absolute and relative then it should be relative)
if(Obj.css("position") != "absolute"){
Obj.css("position", "relative");
}
//Generate the effect map, move the effect map overlay the 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 this layer will be under the original image
$(EffectImageId).css("z-index", Obj.css("z-index")-1);
$(EffectImageId).attr("src", Args.NewImage);
}else{
$(EffectImageId).css("opacity", 1);
//This layer will be on top the original image
$(EffectImageId).css("z-index", Obj.css("z-index")+1);
//Turn in to the fake old image
$(EffectImageId).attr("src", Obj.attr("src"));
Obj.attr("src", Args.NewImage);
}
//Find where the 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 the effect start,
$(EffectImageId).animate({"opacity":EndOpacity, "top":EndTop,
"left": EndLeft}, Args.Speed,
function(){
//Now the effect image is out, move it back 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 the image to the original
backup.attr("src", Args.NewImage);
//Also remove the Attr for 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 the effect is 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 a IS effect is running
(function($){
$.fn.ImageAnimating = function(){
if(this.data("imageswitch")>0){
return true;
}else{
return false;
}
};
})(jQuery);
//Stop a specific the IS 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 all the IS 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 a specific image
(function($){
$.ImagePreload = function(FileName, EndFunction){
var TempImage = new Image();
TempImage.src = FileName;
if($.isFunction(EndFunction)){
$(TempImage).load(EndFunction());
}
};
})(jQuery);
手の込んだことができます：それは（それのお奨めは何か、ジョンResig氏はそれを書いたの:)価値が1.3にjQueryの1.4から下位互換性を作成しようか！ – Marcie