1

初めてのウェブサイトを開発中で、インタラクティブなフォト ギャラリーを構築しました。背後にある主なアイデアは、1 つの大きな画像が表示され、ユーザーがこれをクリックすると次の画像に変わるということです。下にはサムネイル カルーセルもあり、これを使用してメイン画像に変更することもできます。私はこれを私が望むようにほとんど機能させています（スタイルなどのいくつかのマイナーポイントを差し引いたものです）。その後、iPhone でサイトを使用してみましたが、フォト ギャラリーがデスクトップのように機能しないことがわかりました。画像をクリックすると、リストの次の画像ではなく、同じ画像でページがリロードされるようです。

私がコーディングすることにした方法は、画像が次のようなアンカータグに含まれていることです。

<a class="nextphoto" href="" onclick="return false;">

クリックすると、jQuery はイベントをキャッチし、適切なパラメーターを JavaScript 関数に渡します。この関数は、ドキュメントを新しい写真で更新します。この関数はchangePhoto()を呼び出し、XMLHttpRequest を作成して、すべての画像名と代替情報を格納する XML ファイルを取得します。

現在の状態のフォト ギャラリーを表示するには、http://www.mwlets.co.uk/properties.htmlにアクセスしてください。

私は当初、これは Javascript、jQuery、または xml をサポートしていない iPhone の問題だと思っていましたが、これらすべての実際の例を見つけることができるようです。xml ファイルから情報を取得する w3schools の例も試してみましたが、うまくいきました。

私のJavaScriptコードは次のとおりです。

    $(document).ready(function(){
      $("a.nextphoto").bind("click",function()
        {
          var imgID = document.getElementById("mainphoto").name;
          imgID++;
          changePhoto(imgID,false);
        });
});

$(document).ready(function(){
      $("a.prevphoto").bind("click",function()
        {
          var imgID = document.getElementById("mainphoto").name;
          imgID--;
          changePhoto(imgID,false);
        });
});

$(document).ready(function(){
      $("a.thumbnail").bind("click",function()
        {
          var currentID = document.getElementById("mainphoto").name;
          var thumbID = $(this).attr("name");
          if(currentID != thumbID)
            {
              changePhoto(thumbID,false);
            }
        });
});

function changePhoto(newimgID,slideshow)
    {
      var imgsrc = "http://www.mwlets.co.uk/Images/Mayfield/Large/to_let_mayfield_ashbourne_derbyshire_"
    var xmlhttp, images, imageName, imageAlt, imgalt;

 if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  }
 else
  {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

 xmlhttp.onreadystatechange=function()
  {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      images = xmlhttp.responseXML.documentElement.getElementsByTagName("IMAGE");

        if(newimgID > images.length)     
          {
              newimgID = 1;
          }
        if(newimgID < 1)
          {
            newimgID = images.length;
          }

      document.getElementById("mainphoto").name=newimgID;
      document.getElementById("photoindex").innerHTML=newimgID;

      imageName=images[newimgID - 1].getElementsByTagName("NAME");
      imgsrc += imageName[0].firstChild.nodeValue;
      document.getElementById("mainphoto").src=imgsrc;

      imageAlt=images[newimgID - 1].getElementsByTagName("ALT");
      imgalt = imageAlt[0].firstChild.nodeValue;
      document.getElementById("mainphoto").alt=imgalt;
      document.getElementById("captiontext").innerHTML=imgalt;   
    }
  }

 xmlhttp.open("GET","http://mwlets.co.uk/Images/Mayfield/image_list.xml",true);
 xmlhttp.send();

}

個人的には、理論的にはすべてのコンポーネントが iPhone で動作するはずだと考えています。誰かが潜在的な理由を提案できれば、それは素晴らしいことです。

また、これはおそらくこれをコーディングする最も適切な方法ではないことも認識しています。適切なアプリケーションで Javascript、jQuery、および Ajax を試すのはこれが初めてです。これを行う別の方法についての提案をお待ちしています。私の主な要件は、現時点でサイト上で行っていること (デスクトップから見た場合) を実行すること、クロスブラウザー/プラットフォームであり、画像をすばやく取得できることです。このコードを適切に分解して、JS を使用しないブラウザーで画像を一種のフレーム スタイル ギャラリーとして表示できるようにする予定です。

前もって感謝します、

マット

4

1 に答える 1

0

href が空であるため、Safari はページを更新しています (これは標準的な Safari の動作だと思います)。jQuery 経由でクリック イベントを設定してみてください (その場合、アンカー タグを使用する必要はないかもしれません)。つまり、$("#picturelementid").click(関数{});

于 2012-04-16T19:04:36.127 に答える