<!DOCTYPE HTML PUBLIC "HTML 3.2">

<!-- IBM HomePage Builder for Windows  version 2.0.3 -->

<!-- 21:41 2012/11/20 -->


<HTML>

<HEAD>

<meta http-equiv="Content-type"
         content="text/html; charset=Shift_JIS">

<TITLE>loupe hanatabi</TITLE>

<SCRIPT LANGUAGE="JavaScript">

function navi_modoru(){

     parent.location="../../index.html"

}

</SCRIPT>

</HEAD>


<BODY bgcolor="#bebebe">

<!--

<FORM NAME="myform" ACTION="" METHOD="GET">

<INPUT TYPE="button" NAME="button" VALUE="戻る" onClick="navi_modoru()">

</FORM>

-->


<H1 align="center"><EM><FONT color="#8000ff">keitai hanatabi ルーペ花旅</FONT>　　</EM></H1>

<!--<H2 align="center">Yutaka Tawara</H2>-->

<A href="../../index.html"><H2><FONT><B>もどる</FONT></H2></A>


<!-- zuumIn,zoomOut,next by ChatGPT 2024.3.8-->


<FONT size="5"><A href="loupe_hanatabi2.html"><font color=green size="5">花旅２<FONT color="red"></font></A>

　
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>画像のズーム</title>

<style>

    .image-container {

        text-align: center;

    }

    img {

        max-width: 100%;

        max-height: 400px;

        transition: transform 0.5s ease;

    }

</style>


</head>

<body>


<p id="currentIndex"></p>

<div style="text-align: left; margin-top: 20px;">

    <button onclick="nextImage()">next</button>

    <button onclick="backImage()">back</button>

<br>

    <button onclick="zoomIn()">ズームイン</button>

<br>

    <button onclick="zoomOut()">ズームアウト</button>

</div>


<div class="image-container">

    <img id="zoomImage" src="" alt="Zoom Image">

</div>


<script>

//画像を格紊する配列の作成


 var imagesA = [


"pictures/DVC00001.JPG",

"pictures/DVC00001_2.JPG",

"pictures/DVC00002.JPG",

"pictures/DVC00003.JPG",

"pictures/DVC00003_2.JPG",

"pictures/DVC00004.JPG",

"pictures/DVC00004_2.JPG",

"pictures/DVC00005.JPG",

"pictures/DVC00006.JPG",

"pictures/DVC00006_2.JPG",

"pictures/DVC00007.JPG",

"pictures/DVC00007_2.JPG",

"pictures/DVC00007_3.JPG",

"pictures/DVC00008.JPG",

"pictures/DVC00008_2.JPG",

"pictures/DVC00008_3.JPG",

"pictures/DVC00009.JPG",

"pictures/DVC00009_2.JPG",

"pictures/DVC00009_3.JPG",

"pictures/DVC00010.JPG",

"pictures/DVC00011.JPG",

"pictures/DVC00011_3.JPG",

"pictures/DVC00012.JPG",

"pictures/DVC00012_3.JPG",

"pictures/DVC00013.JPG",

"pictures/DVC00013_3.JPG",

"pictures/DVC00014.JPG",

"pictures/DVC00014_2.JPG",

"pictures/DVC00015.JPG",

"pictures/DVC00015_2.JPG",

"pictures/DVC00015_3.JPG",

"pictures/DVC00016.JPG",

"pictures/DVC00016.JPG",

"pictures/DVC00016_2.JPG",

"pictures/DVC00016_3.JPG",

"pictures/DVC00017.JPG",

"pictures/DVC00017_2.JPG",

"pictures/DVC00018.JPG",

"pictures/DVC00018_2.JPG",

"pictures/DVC00019.JPG",

"pictures/DVC00019_2.JPG",

"pictures/DVC00020.JPG",

"pictures/DVC00021.JPG",

"pictures/DVC00021_2.JPG",

"pictures/DVC00022.JPG",

"pictures/DVC00022_2.JPG",

"pictures/DVC00023.JPG",

"pictures/DVC00023_2.JPG",

"pictures/DVC00024.JPG",

"pictures/DVC00025.JPG",

"pictures/DVC00025_2.JPG",

"pictures/DVC00026.JPG",

"pictures/DVC00026_2.JPG",

"pictures/DVC00027.JPG",

"pictures/DVC00027_2.JPG",

"pictures/DVC00028.JPG",

"pictures/DVC00028_2.JPG",

"pictures/DVC00029.JPG",

"pictures/DVC00030.JPG",

"pictures/DVC00034.JPG",

"pictures/DVC00035.JPG",

"pictures/DVC00036.JPG",

"pictures/DVC00037.JPG",

"pictures/DVC00038.JPG",

"pictures/DVC00039.JPG",

"pictures/DVC00040.JPG",

"pictures/DVC00041.JPG",

"pictures/DVC00042.JPG",

"pictures/DVC00043.JPG",

"pictures/DVC00044.JPG",

"pictures/DVC00045.JPG",

"pictures/DVC00045_2.JPG",

"pictures/DVC00046.JPG",

"pictures/DVC00046_2.JPG",

"pictures/DVC00047.JPG",

"pictures/DVC00047_2.JPG",

"pictures/DVC00048.JPG",

"pictures/DVC00049.JPG",

"pictures/DVC00049_2.JPG",

"pictures/DVC00050.JPG",

"pictures/DVC00051.JPG",

"pictures/DVC00051_2.JPG",

"pictures/DVC00052.JPG",

"pictures/DVC00052_3.JPG",

"pictures/DVC00053.JPG",

"pictures/DVC00054.JPG",

"pictures/DVC00054_2.JPG",

"pictures/DVC00055.JPG",

"pictures/DVC00056.JPG",

"pictures/DVC00057.JPG",

"pictures/DVC00058.JPG",

"pictures/DVC00059.JPG",

"pictures/DVC00060.JPG",

"pictures/DVC00061.JPG",

"pictures/DVC00062.JPG",

"pictures/DVC00063.JPG",

"pictures/DVC00064.JPG",

"pictures/DVC00065.JPG",

"pictures/DVC00066.JPG",

"pictures/DVC00067.JPG",

"pictures/DVC00068.JPG",

"pictures/DVC00069.JPG",

"pictures/DVC00070.JPG",

"pictures/DVC00071.JPG",

"pictures/DVC00072.JPG",

"pictures/DVC00073.JPG",

"pictures/DVC00074.JPG",

"pictures/DVC00075.JPG",

"pictures/DVC00076_2.JPG",

"pictures/DVC00077.JPG",

"pictures/DVC00077_2.JPG",

"pictures/DVC00078.JPG",

"pictures/DVC00079.JPG",

"pictures/DVC00080.JPG",

"pictures/DVC00080_2.JPG",

"pictures/DVC00081.JPG",

"pictures/DVC00081_3.JPG",

"pictures/DVC00082.JPG",

"pictures/DVC00082_3.JPG",

"pictures/DVC00084.JPG",

"pictures/DVC00084_2.JPG",

"pictures/DVC00085.JPG",

"pictures/DVC00085_2.JPG",

"pictures/DVC00086.JPG",

"pictures/DVC00087.JPG",

"pictures/DVC00088.JPG",

"pictures/DVC00089.JPG",

"pictures/DVC00089_2.JPG",

"pictures/DVC00090.JPG",

"pictures/DVC00090_2.JPG",

"pictures/DVC00096.JPG",

"pictures/DVC00097.JPG",

"pictures/DVC00098.JPG",

"pictures/DVC00099.JPG",

"pictures/DVC00100.JPG",

"pictures/DVC00101.JPG",

"pictures/DVC00105.JPG",

"pictures/DVC00108.JPG",

"pictures/DVC00108_2.JPG",

"pictures/DVC00109.JPG",

"pictures/DVC00110.JPG",

"pictures/DVC00111.JPG",

"pictures/DVC00112.JPG",

"pictures/DVC00112_2.JPG",

"pictures/DVC00113.JPG",

"pictures/DVC00113_2.JPG",

"pictures/DVC00114.JPG",

"pictures/DVC00114_2.JPG",

"pictures/DVC00115.JPG",

"pictures/DVC00115_2.JPG",

"pictures/DVC00116.JPG",

"pictures/DVC00116_2.JPG",

"pictures/DVC00117.JPG",

"pictures/DVC00117_2.JPG",

"pictures/DVC00118.JPG",

"pictures/DVC00118_2.JPG",

"pictures/DVC00119.JPG",

"pictures/DVC00120.JPG",

"pictures/DVC00121.JPG",

"pictures/DVC00122.JPG",

"pictures/DVC00123.JPG",

"pictures/DVC00124.JPG",

"pictures/DVC00125.JPG",

"pictures/DVC00125_2.JPG",

"pictures/DVC00126.JPG",

"pictures/DVC00126_2.JPG",

"pictures/DVC00127.JPG",

"pictures/DVC00128.JPG",

"pictures/DVC00129.JPG",

"pictures/DVC00130.JPG",

"pictures/DVC00131.JPG",

"pictures/DVC00132.JPG",

"pictures/DVC00133_2.JPG",

"pictures/DVC00134.JPG",

"pictures/DVC00135.JPG",

"pictures/DVC00136.JPG",

"pictures/DVC00138.JPG",

"pictures/DVC00139.JPG",

"pictures/DVC00140.JPG",

"pictures/DVC00141.JPG",

"pictures/DVC00142.JPG",

"pictures/DVC00142_2.JPG",

"pictures/DVC00143.JPG",

"pictures/DVC00144.JPG",

"pictures/DVC00144_2.JPG",

"pictures/DVC00145.JPG",

"pictures/DVC00146.JPG",

"pictures/DVC00147.JPG",

"pictures/DVC00148.JPG",

"pictures/DVC00149.JPG",

"pictures/DVC00150.JPG",

"pictures/DVC00151.JPG",

"pictures/DVC00151_2.JPG",

"pictures/DVC00152.JPG",

"pictures/DVC00152_2.JPG",

"pictures/DVC00153.JPG",

"pictures/DVC00153_2.JPG",

"pictures/DVC00154.JPG",

"pictures/DVC00154_2.JPG",

"pictures/DVC00155.JPG",

"pictures/DVC00156.JPG",

"pictures/DVC00157.JPG",

"pictures/DVC00158.JPG",

"pictures/DVC00159.JPG",

"pictures/DVC00160.JPG",

"pictures/DVC00161.JPG",

"pictures/DVC00161_2.JPG",

"pictures/DVC00162.JPG",

"pictures/DVC00163.JPG",

"pictures/DVC00164.JPG",

"pictures/DVC00165.JPG",

"pictures/DVC00166.JPG",

"pictures/DVC00167.JPG",

"pictures/DVC00168.JPG",

"pictures/DVC00185.JPG",

"pictures/DVC00189.JPG",

"pictures/DVC00193.JPG",

"pictures/DVC00194.JPG",

"pictures/DVC00195.JPG",

"pictures/DVC00195_2.JPG",

"pictures/DVC00196.JPG",

"pictures/DVC00196_2.JPG",

"pictures/DVC00197.JPG",

"pictures/DVC00197_2.JPG",

"pictures/DVC00198.JPG",

"pictures/DVC00198_2.JPG",

"pictures/DVC00199.JPG",

"pictures/DVC00199_2.JPG",

"pictures/DVC00200.JPG",

"pictures/DVC00200_2.JPG",

"pictures/DVC00201.JPG",

"pictures/DVC00202.JPG",

"pictures/DVC00203.JPG",

"pictures/DVC00204.JPG",

"pictures/DVC00205.JPG",

"pictures/DVC00206.JPG",

"pictures/DVC00207.JPG",

"pictures/DVC00208.JPG",

"pictures/DVC00209.JPG",

"pictures/DVC00219.JPG",

"pictures/DVC00220.JPG"


 ];

 
        // ここに表示する画像のパスを追加してくださ max 21


    var currentIndex = -1;

    var currentIndex2 = 0;


    var zoomLevel = 1;


    var zoomImage = document.getElementById("zoomImage");


    function zoomIn() {

        zoomLevel += 0.2;

        zoomImage.style.transform = "scale(" + zoomLevel + ")";

    }


    function zoomOut() {

        zoomLevel -= 0.2;

        if (zoomLevel < 0.2) {

            zoomLevel = 0.2;

        }

        zoomImage.style.transform = "scale(" + zoomLevel + ")";

    }


    function nextImage() {

        currentIndex = (currentIndex + 1) % imagesA.length;

        zoomLevel = 1; // Reset zoom level when changing images

        zoomImage.src = imagesA[currentIndex];

        zoomImage.style.transform = "scale(" + zoomLevel + ")";

    }


    function backImage() {

      if( currentIndex > 0 )

      {

        currentIndex = (currentIndex - 1) % imagesA.length;

        zoomLevel = 1; // Reset zoom level when changing images

        zoomImage.src = imagesA[currentIndex];

        zoomImage.style.transform = "scale(" + zoomLevel + ")";

      }

    }


    // 初期画像の表示

    nextImage();


</script>


</body>

</html>

<br>

<!-- ------------------------ -->


<A href="loupe_hanatabi-s.html"><H3><FONT><B>version especial 1</FONT></H3></A>

<A href="loupe_hanatabi-s2.html"><H3><FONT><B>version especial 2</FONT></H3></A>

<A href="loupe_hanatabi-s3.html"><H3><FONT><B>version especial 3</FONT></H3></A>

<A href="loupe_hanatabi-s4.html"><H3><FONT><B>version especial 4</FONT></H3></A>

<A href="loupe_hanatabi-s5.html"><H3><FONT><B>version especial 5</FONT></H3></A>

<P align="center">

<A href="loupe_hanatabi029.html"><IMG src="pictures/DVC00318.JPG"></A><BR>

<I></I>

<P align="center">


<H3 align="center"><BR>

<FONT><B><FONT color="#8000ff"><A href="loupe_hanatabi029.html">Por favor, sientase libre de visitar.</A></FONT></B></FONT></H3>

<!--<FONT><B><FONT color="#8000ff"><A href=loupe_hanatabi029.html">Por favor, sientase libre de visitar.</A></FONT></B></FONT></H3>-->

<br>

　
</BODY>

</HTML>