查看“︁Widget:GF立绘切换”︁的源代码

<includeonly><div id="dollPicContain"></div><script type="text/javascript">(window.RLQ=window.RLQ||[]).push(["jquery",function(){
if(location.hash.indexOf("MOD")>-1){var posit=1}else{var posit=0}
var firstload = false;
var dollvoice = "<!--{$dollvoice|escape:'html'}-->"
var dollname = "[ <!--{$dollname|escape:'html'}--> ]";
var pic_data = [];
<!--{if ($pic1)}-->pic_data.push({name:"<!--{$pic1name|escape:'html'}-->", line:"<!--{$line1|escape:'html'}-->", pic:"<!--{$pic1|escape:'html'}-->", pic_d:"<!--{$pic1d|escape:'html'}-->", anime:"<!--{$pic1a|escape:'html'}-->", pic_h:"<!--{$pic1h|escape:'html'}-->", pic_d_h:"<!--{$pic1dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic2)}-->pic_data.push({name:"<!--{$pic2name|escape:'html'}-->", line:"<!--{$line2|escape:'html'}-->", pic:"<!--{$pic2|escape:'html'}-->", pic_d:"<!--{$pic2d|escape:'html'}-->", anime:"<!--{$pic2a|escape:'html'}-->", pic_h:"<!--{$pic2h|escape:'html'}-->", pic_d_h:"<!--{$pic2dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic3)}-->pic_data.push({name:"<!--{$pic3name|escape:'html'}-->", line:"<!--{$line3|escape:'html'}-->", pic:"<!--{$pic3|escape:'html'}-->", pic_d:"<!--{$pic3d|escape:'html'}-->", anime:"<!--{$pic3a|escape:'html'}-->", pic_h:"<!--{$pic3h|escape:'html'}-->", pic_d_h:"<!--{$pic3dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic4)}-->pic_data.push({name:"<!--{$pic4name|escape:'html'}-->", line:"<!--{$line4|escape:'html'}-->", pic:"<!--{$pic4|escape:'html'}-->", pic_d:"<!--{$pic4d|escape:'html'}-->", anime:"<!--{$pic4a|escape:'html'}-->", pic_h:"<!--{$pic4h|escape:'html'}-->", pic_d_h:"<!--{$pic4dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic5)}-->pic_data.push({name:"<!--{$pic5name|escape:'html'}-->", line:"<!--{$line5|escape:'html'}-->", pic:"<!--{$pic5|escape:'html'}-->", pic_d:"<!--{$pic5d|escape:'html'}-->", anime:"<!--{$pic5a|escape:'html'}-->", pic_h:"<!--{$pic5h|escape:'html'}-->", pic_d_h:"<!--{$pic5dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic6)}-->pic_data.push({name:"<!--{$pic6name|escape:'html'}-->", line:"<!--{$line6|escape:'html'}-->", pic:"<!--{$pic6|escape:'html'}-->", pic_d:"<!--{$pic6d|escape:'html'}-->", anime:"<!--{$pic6a|escape:'html'}-->", pic_h:"<!--{$pic6h|escape:'html'}-->", pic_d_h:"<!--{$pic6dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic7)}-->pic_data.push({name:"<!--{$pic7name|escape:'html'}-->", line:"<!--{$line7|escape:'html'}-->", pic:"<!--{$pic7|escape:'html'}-->", pic_d:"<!--{$pic7d|escape:'html'}-->", anime:"<!--{$pic7a|escape:'html'}-->", pic_h:"<!--{$pic7h|escape:'html'}-->", pic_d_h:"<!--{$pic7dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic8)}-->pic_data.push({name:"<!--{$pic8name|escape:'html'}-->", line:"<!--{$line8|escape:'html'}-->", pic:"<!--{$pic8|escape:'html'}-->", pic_d:"<!--{$pic8d|escape:'html'}-->", anime:"<!--{$pic8a|escape:'html'}-->", pic_h:"<!--{$pic8h|escape:'html'}-->", pic_d_h:"<!--{$pic8dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic9)}-->pic_data.push({name:"<!--{$pic9name|escape:'html'}-->", line:"<!--{$line9|escape:'html'}-->", pic:"<!--{$pic9|escape:'html'}-->", pic_d:"<!--{$pic9d|escape:'html'}-->", anime:"<!--{$pic9a|escape:'html'}-->", pic_h:"<!--{$pic9h|escape:'html'}-->", pic_d_h:"<!--{$pic9dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic10)}-->pic_data.push({name:"<!--{$pic10name|escape:'html'}-->", line:"<!--{$line10|escape:'html'}-->", pic:"<!--{$pic10|escape:'html'}-->", pic_d:"<!--{$pic10d|escape:'html'}-->", anime:"<!--{$pic10a|escape:'html'}-->", pic_h:"<!--{$pic10h|escape:'html'}-->", pic_d_h:"<!--{$pic10dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic11)}-->pic_data.push({name:"<!--{$pic11name|escape:'html'}-->", line:"<!--{$line11|escape:'html'}-->", pic:"<!--{$pic11|escape:'html'}-->", pic_d:"<!--{$pic11d|escape:'html'}-->", anime:"<!--{$pic11a|escape:'html'}-->", pic_h:"<!--{$pic11h|escape:'html'}-->", pic_d_h:"<!--{$pic11dh|escape:'html'}-->"});<!--{/if}-->
<!--{if ($pic12)}-->pic_data.push({name:"<!--{$pic12name|escape:'html'}-->", line:"<!--{$line12|escape:'html'}-->", pic:"<!--{$pic12|escape:'html'}-->", pic_d:"<!--{$pic12d|escape:'html'}-->", anime:"<!--{$pic12a|escape:'html'}-->", pic_h:"<!--{$pic12h|escape:'html'}-->", pic_d_h:"<!--{$pic12dh|escape:'html'}-->"});<!--{/if}-->

var homepic = [
    
];
ar initial_scale = ($("#dollPicContain").width()< $("#dollPicContain").height()) ?　(1.5 * $("#dollPicContain").width() / $("#dollPicContain").height()) : 1.5;
var initial_x = ($("#dollPicContain").width() - $("#dollPicContain").height() * initial_scale) / 2;
var initial_y = (initial_scale > 1) ? 0 : ($("#dollPicContain").height() * (1 - initial_scale) / 2);
const initial_para = {x: initial_x, y: initial_y, scale: initial_scale}
var pic_position_before = {x: 0, y: 0};
var pic_position_after = {x: 0, y: 0};
var pic_position_change = {x: 0, y: 0};
var pic_move = {x: initial_para.x, y: initial_para.y};
var pic_on_dragging = false;
var pic_scale = initial_para.scale;

creat_doll_div();

function stop() {return false;}
document.getElementById("dollPicContain").oncontextmenu = stop;


function load_pics(){
    for(i in pic_data){
        var img = new Image();
        $(img).attr({"src": pic_data[i]["pic"]});
        var img_2 = new Image();
        $(img_2).attr({"src": pic_data[i]["pic_d"]});
        var img_3 = new Image();
        $(img_3).attr({"src": pic_data[i]["pic_h"]});
        var img_4 = new Image();
        $(img_4).attr({"src": pic_data[i]["pic_d_h"]});
    }
}

function creat_doll_div(){
    let html_text = `
        <div id="dollPicDiv">
            <div id="dollPicBg"><\/div>
            <img id="dollPicImg" src=${pic_data[posit]["pic"]} \/>
            <div id="dollControlBtn">
                <div id="dollDragBtn" class="dollPicBtn" state="off"><\/div>
                <div id="dollPicPositionRe" class="dollPicBtn"><\/div>
                <div id="dollPicDownload" class="dollPicBtn">
                    <a target="_blank" href=${pic_data[0]["pic"]} \/>
                <\/div>
                <div id="dollPicExpand" class="dollPicBtn" state="off"><\/div>
            <\/div>
            <div id="dollLineDiv"><div id="dollLineName">${dollname}<\/div>${(dollvoice.length > 5) ? `<div id="dollLineVoice">[ ▶ ]<\/div>` : ``}<div id="dollLineWord">${pic_data[0]["line"]}<\/div>
            <\/div>
        <\/div>`;

    $("#dollPicContain").append(html_text);
    pic_position_reset(0);
    // switch skins need this button
    let skin_btn_text = `<div id="dollSkinBtnDiv">`;
    
    for(i in pic_data){
        if(i == posit) skin_btn_text += `<div class="dollSkinBtn skinChosen" index="${i}" >${pic_data[i]["name"]}`;
        else skin_btn_text += `<div class="dollSkinBtn" index="${i}" >${pic_data[i]["name"]}`;

        if(Number(pic_data[i]["anime"]) == 0) skin_btn_text += `<\/div>`;
        else if(Number(pic_data[i]["anime"]) == 1) skin_btn_text += `<div class="dollSkinAnimeL"><\/div><\/div>`;
        else if(Number(pic_data[i]["anime"]) == 2) skin_btn_text += `<div class="dollSkinAnimeA"><\/div><\/div>`;
    }

    skin_btn_text += `<div id="dollSkinBtnSpace"><\/div>`;
    skin_btn_text+=`<div id="dollSkinSwitchBtnDestroy" class="dollSkinSwitchBtn" dict="Normal-Destroy" state="Normal">
                        <div class="dollSkinSwitchBtnSlide"><\/div>
                        <div id="dollSkinSwitchNormal" class="dollSkinSwitchBtnL">正常<\/div>
                        <div id="dollSkinSwitchDestroy" class="dollSkinSwitchBtnR">重创<\/div>
                    <\/div>`;

    if(pic_data[0]["pic_h"]){
        skin_btn_text+=`<div id="dollSkinSwitchBtnHexie" class="dollSkinSwitchBtn" dict="Formal-Hexie" state="Formal">
                            <div class="dollSkinSwitchBtnSlide"><\/div>
                            <div id="dollSkinSwitchFormal" class="dollSkinSwitchBtnL">正式<\/div>
                            <div id="dollSkinSwitchHexie" class="dollSkinSwitchBtnR">和谐<\/div>
                        <\/div>`;
        skin_btn_text += `<\/div>`;
    } else skin_btn_text += `<\/div>`;
    
    $("#dollPicDiv").append(skin_btn_text);
    skin_switch_btn_event("#dollSkinSwitchBtnHexie");
    skin_btn_size();

    // creat the select to offer changing home background options
    let select_text = `<select id="dollHomePic" style="display:none;"><\/select><div id="dollHomeDiv" class="dollPicBtn" state="off"><\/div>`;
    $("#dollPicDiv").append(select_text);
    for(i in homepic){
        let option_text = `<option value=${homepic[i].pic}>${homepic[i].name}<\/option>`;
        $("#dollHomePic").append(option_text);
    }

    $("#dollHomePic").change(function(){ $("#dollPicBg").css({"background-image": "url(" + this.value + ")"}); });
}

// if there is lots of skin, make it smaller to contain them all in the div.
function skin_btn_size(){
    if(pic_data.length >= 8 && $("#dollPicExpand").attr("state") == "off"){
        let long = (16 - pic_data.length)< 2 ? 2 : 16 - pic_data.length;
        let margin_long = (30 - ((pic_data.length - 6) > 10 ? 10 : (pic_data.length - 6)) * 3);
        $(".dollSkinBtn").css({"padding": long + "px 2px", "margin": long + "px 0px"});
        $("#dollSkinSwitchBtn").css({"margin-top": margin_long + "px"});
    }
}

// the skin btn are so tight and ugly. undo.
function un_skin_btn_size(){
    if(pic_data.length<= 13){
        $(".dollSkinBtn").css({"padding": "", "margin": ""});
        $("#dollSkinSwitchBtn").css({"margin-top": ""});
    }
}

// show dollHomePic select show or hide @click
$("#dollHomeDiv").click(function(){
    if($(this).attr("state") == "off"){
        $(this).attr("state", "on");
        $(this).css({"background-image": "url(/images/9/97/Home_hide.png)"});
        $(this).prev("#dollHomePic").fadeIn(50);
        $(this).prev("#dollHomePic").animate({"width": "150px", "right": "50px"}, 200);
    } else {
        $(this).attr("state", "off");
        $(this).css({"background-image": "url(/images/0/03/Home_show.png)"});
        $(this).prev("#dollHomePic").fadeOut(150);
        $(this).prev("#dollHomePic").animate({"width": "40px", "right": "10px"}, 200);
    }
});

// play voice
if(dollvoice.length > 5){
    var voice_jp = new Audio;
    voice_jp.setAttribute("src", dollvoice);
    voice_jp.setAttribute("controls", "controls");
    voice_jp.setAttribute("preload", "preload");
    
    $("#dollLineVoice").click(function(){
        voice_jp.currentTime = 0;
        voice_jp.play();
    });
}

// skin chose button @click
$(".dollSkinBtn").click(function(){
    if(!firstload) load_pics();
    $(".dollSkinBtn").removeClass("skinChosen");
    $(this).addClass("skinChosen");
    
    if($(this).text().indexOf("默认立绘") != -1 || $(this).text().indexOf("心智升级") != -1) $("#dollLineVoice").show();
    else $("#dollLineVoice").hide();

    let index = Number($(this).attr("index"));
    
    $("#dollLineWord").stop().fadeOut(90);
    setTimeout(() => { $("#dollLineWord").html(pic_data[index]["line"]); }, 95);
    setTimeout(() => { $("#dollLineWord").stop().fadeIn(100); }, 100);
    
    $("#dollSkinSwitchBtnHexie").remove();
    if(pic_data[index]["pic_h"]){
        skin_btn_text =`<div id="dollSkinSwitchBtnHexie" class="dollSkinSwitchBtn" dict="Formal-Hexie" state="Formal">
                            <div class="dollSkinSwitchBtnSlide"><\/div>
                            <div id="dollSkinSwitchFormal" class="dollSkinSwitchBtnL">正式<\/div>
                            <div id="dollSkinSwitchHexie" class="dollSkinSwitchBtnR">和谐<\/div>
                        <\/div>`;
        $("#dollSkinBtnDiv").append(skin_btn_text);
        skin_switch_btn_event("#dollSkinSwitchBtnHexie");
        skin_btn_size();
    }

    doll_img_switch();
});

// hexie/destroy skin chose button @click
function skin_switch_btn_event(target){
    if(!target && !firstload) load_pics();
    if(!target) target =  ".dollSkinSwitchBtn";
    $(target).click(function(){
        let status = $(this).attr("dict").split("-");

        if($(this).attr("state") == status[0]){
            $(this).attr("state", status[1]);
            $(this).children(".dollSkinSwitchBtnSlide").stop().animate({"right": "0px", "left": "50%"}, 300);
            setTimeout(() => {
                $(this).children(".dollSkinSwitchBtnL").css({"color": "#eaeaea"});
                $(this).children(".dollSkinSwitchBtnR").css({"color": "#292929"});
            }, 100);
        } else {
            $(this).attr("state", status[0]);
            $(this).children(".dollSkinSwitchBtnSlide").stop().animate({"left": "0px", "right": "50%"}, 300);
            setTimeout(() => {
                $(this).children(".dollSkinSwitchBtnL").css({"color": "#292929"}, 300);
                $(this).children(".dollSkinSwitchBtnR").css({"color": "#eaeaea"}, 300);
            }, 100);
        }
        
        doll_img_switch();
    });
}
skin_switch_btn_event("#dollSkinSwitchBtnDestroy");

// doll img switch function
function doll_img_switch(){
    let index = Number($($(".skinChosen")[0]).attr("index"));

    let hex_state = "Formal";
    if($("#dollSkinSwitchBtnHexie")) hex_state = $("#dollSkinSwitchBtnHexie").attr("state");
    let des_state = $("#dollSkinSwitchBtnDestroy").attr("state");

    let target = {"pic": pic_data[index]["pic"], "pic_d": pic_data[index]["pic_d"]};
    if(hex_state == "Hexie") target = {"pic": pic_data[index]["pic_h"], "pic_d": pic_data[index]["pic_d_h"]};
    
    let target_src = target["pic"]; 
    if(des_state == "Destroy") target_src = target["pic_d"];

    $("#dollPicDownload").children("a").attr("href", target_src);
    $("#dollPicImg").stop().fadeOut(190);
    setTimeout(() => { $("#dollPicImg").attr("src", ""); $("#dollPicImg").attr("src", target_src); }, 195);
    setTimeout(() => { $("#dollPicImg").stop().fadeIn(200); }, 200);
}

$("#dollPicImg").click(function(){ $("#dollDragBtn").click();});
// drag and scale mode switch button @click
$("#dollDragBtn").click(function(){
    if($(this).attr("state") == "off"){
        $(this).attr("state", "on");
        $(this).css("background-image", "url(/images/a/ad/IconDollDigoutUn.png)");
        $("#dollPicImg").css("cursor", "crosshair");
        $("#dollPicBg").css("cursor", "crosshair");
        $("#dollPicImg").unbind("click");
        // animation for hiding buttons
        $("#dollSkinBtnDiv").stop().animate({"left": "-200px"}, 500);
        $("#dollLineDiv").stop().animate({"bottom": "-200px"}, 500);
        if($("#dollHomeDiv").attr("state") == "on") $("#dollHomeDiv").click();

        $("#dollPicDiv").mousedown(function(event){
            pic_on_dragging = true;
            pic_position_before.x = event.clientX;
            pic_position_before.y = event.clientY;
            
            pic_position_change.x = 0
            pic_position_change.y = 0
        });
        $("#dollPicDiv").mousemove(function(event){
            if(pic_on_dragging){
                pic_position_after.x = event.clientX;
                pic_position_after.y = event.clientY;
                pic_move.x += pic_position_after.x - pic_position_before.x;
                pic_move.y += pic_position_after.y - pic_position_before.y;
                pic_position_change.x += pic_position_after.x - pic_position_before.x;
                pic_position_change.y += pic_position_after.y - pic_position_before.y;
                pic_position_before.x = pic_position_after.x;
                pic_position_before.y = pic_position_after.y;

                $("#dollPicImg").css("top", String(pic_move.y) + "px");
                $("#dollPicImg").css("left", String(pic_move.x) + "px");
            }
        });
        $("#dollPicDiv").mouseup(function(){
            pic_on_dragging = false;
        });

        // this for click and trigger the dragbtn
        $("#dollPicImg").click(function(){
            if(pic_position_change.x == 0 && pic_position_change.y == 0 && $("#dollDragBtn").attr("state") == "on") $("#dollDragBtn").click();
            pic_position_change.x = 0
            pic_position_change.y = 0
        });
        
        if(document.querySelector("#dollPicDiv").addEventListener){
            document.querySelector("#dollPicDiv").addEventListener('wheel', doll_pic_scale);   
        }
    } else {
        $(this).attr("state", "off");
        $(this).css("background-image", "url(/images/7/7d/IconDollDigout.png)");
        if($("#dollPicExpand").attr("state") == "off") $("body").css("overflow", "auto");
        $("#dollPicImg").css("cursor", "auto");
        $("#dollPicBg").css("cursor", "auto");

        // animation for hiding buttons
        if(window.innerWidth<= 600) $("#dollSkinBtnDiv").stop().animate({"left": "2px"}, 500);
        else $("#dollSkinBtnDiv").stop().animate({"left": "15px"}, 500);
        $("#dollHomePic").stop().animate({"right": "2px"}, 500);
        $("#dollLineDiv").stop().animate({"bottom": "20px"}, 500);

        document.querySelector("#dollPicDiv").removeEventListener("wheel", doll_pic_scale);
        $("#dollPicDiv").unbind("mousedown").unbind("mousemove").unbind("mouseup");
        setTimeout(function(){
            $("#dollPicImg").click(function(){ $("#dollDragBtn").click();});
        }, 100);        
    }
});

// for a easy and feasible way to remove eventListener @mousewheel
function doll_pic_scale(event){
    event.preventDefault();
    var box = document.querySelector("#dollPicImg").getBoundingClientRect();
    event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40)); 
    if (event.wheelDelta > 0) {
        pic_scale += 0.1;
        if(pic_scale >= 10) pic_scale = 10;
        parament = pic_scale / (pic_scale - 0.1) - 1;
        pic_move["x"] = pic_move["x"] - (event.clientX - box.left) * parament;
        pic_move["y"] = pic_move["y"] - (event.clientY - box.top) * parament;
    } else {
        pic_scale -= 0.1;
        if(pic_scale<= 0.2) pic_scale = 0.2;
        parament = pic_scale / (pic_scale + 0.1) - 1;
        pic_move["x"] = pic_move["x"] - (event.clientX - box.left) * parament;
        pic_move["y"] = pic_move["y"] - (event.clientY - box.top) * parament;
    }

    $("#dollPicImg").css("top", String(pic_move["y"]) + "px");
    $("#dollPicImg").css("left", String(pic_move["x"]) + "px");
    $("#dollPicImg").css("height", String(100 * pic_scale) + "%");
}

// reset the position of pic, and paramas reinitial (different between expanded or not) @click
$("#dollPicPositionRe").click(function(){pic_position_reset(100)});


// to move the pic to the right position, creat a function
function pic_position_reset(time){
    if($("#dollPicExpand").attr("state") == "off"){
        let target_width = ($("#dollPicContain").width()< 200) ? window.innerWidth - 20 : $("#dollPicContain").width();
        let initial_scale = (target_width< $("#dollPicContain").height()) ?　(1.5 *target_width / $("#dollPicContain").height()) : 1.5;
        let initial_x = (target_width - $("#dollPicContain").height() * initial_scale) / 2;
        let initial_y = (initial_scale > 1) ? 0 : ($("#dollPicContain").height() * (1 - initial_scale) / 2);
        pic_move = {x: initial_x, y: initial_y};
        pic_scale = initial_scale;
    } else {
        pic_scale = (window.innerWidth< window.innerHeight) ? (window.innerWidth / window.innerHeight) : 1;
        pic_move.x = (pic_scale< 1) ? 0 : (window.innerWidth - window.innerHeight) / 2;
        pic_move.y = (pic_scale == 1) ? 0 : (window.innerHeight - window.innerWidth) / 2;
    }
    pic_position_before = {x: 0, y: 0};
    pic_position_after = {x: 0, y: 0};
    
    $("#dollPicImg").stop().animate({
        "top": String(pic_move["y"]) + "px", 
        "left": String(pic_move["x"]) + "px", 
        "height": String(100 * pic_scale) + "%"
    }, time);
}

// to expand the dollpicdiv or unexpand, and other measures @click
$("#dollPicExpand").click(function(){
    if($(this).attr("state") == "off"){
        $(this).attr({"state": "on"});
        $(this).css("background-image", "url(/images/e/e1/IconDollExpandUn.png)");
        expand_function();
    } else {
        $(this).attr("state", "off");
        $(this).css("background-image", "url(/images/f/f6/IconDollExpand.png)");
        $('#content').css('grid-template-areas', '');
        $('.mw-indicators.mw-body-content').css('display', '');

        $("#dollPicDiv").css({"position": "relative", "border": "", "z-index":""});
        $("#dollPicDiv").stop().animate({"height": $("#dollPicContain").height() + "px", "width": $("#dollPicContain").width() + "px"}, 450);

        $("#dollPicPositionRe").click();
        $("#dollPicImg").stop().animate({
            "left": initial_para.x + "px", 
            "top": initial_para.y + "px", 
            "height": String(100 * initial_para.scale) + "%"}, 450);

        setTimeout(function(){
            $("#mw-navigation").fadeIn(200)
            $(".comment-replybox").fadeIn(200)
            $("body").css({"overflow": "auto"});
            $(".backToTop").css({"right": ""});
        }, 400);

        $("#dollPicPositionRe").click();
        setTimeout(() => { skin_btn_size();}, 450);
    }
});

function expand_function(){
    // some gfwiki'ui is really disgusting, although it's joking, but i need to hide them
    $("#mw-navigation").hide();
    $(".comment-replybox").hide();
    $("body").css({"overflow": "hidden"});
    $(".backToTop").css({"right": "-500px"});
    // 隐藏#content的其他子元素以兼容固定H1和TOC的新布局
    $('#content').css('grid-template-areas', '"bc"');
    $('.mw-indicators.mw-body-content').css('display', 'none');

    // main commands to control the div and pic moving
    $("#dollPicDiv").css({"position": "fixed", "left": "0px", "top": "0px", "border": "none", "z-index":"100"});
    $("#dollPicDiv").stop().animate({"width": window.innerWidth + "px", "height": window.innerHeight + "px"}, 600);

    // although it's not very good, but i made it anyway
    var scale = (window.innerWidth< window.innerHeight) ? (window.innerWidth / window.innerHeight) : 1;
    var move_x = (scale< 1) ? 0 : (window.innerWidth - window.innerHeight) / 2;
    var move_y = (scale== 1) ? 0 : (window.innerHeight - window.innerWidth) / 2;
    $("#dollPicPositionRe").click();
    $("#dollPicImg").stop().animate({ "left": move_x + "px", "top": move_y + "px", "height": String(100 * scale) + "%"}, 600);

    setTimeout(() => { un_skin_btn_size();}, 600);
}

// if the size of window changed , trigger this
$(window).resize(function() {
    if($("#dollPicExpand").attr("state") == "on"){
        expand_function();
    }
});
}])</script></includeonly><noinclude>{{#widget:DollPage/Pic}}</noinclude>