iPhone Safariでajax/javascriptフォトギャラリーが動作しない

Question

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

私はコードに決めた道は、というイメージが似アンカータグに含まれている

：jQueryのイベントをキャッチして、ドキュメントを更新するJavaScript関数に適切なパラメータを渡しクリック

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

新しい写真。この関数はchangePhoto（）を呼び出し、XMLHttpRequestを作成して、すべてのイメージ名とalt情報を格納する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を持たないブラウザが画像を一種のフレームスタイルギャラリーとして見ることができるようにする予定です。事前に

おかげで、

マット

Answer 1

Safariがあるため、空のHREF（私はそれが標準のSafariの行動だと考えている）のページを更新しています。 jQuery経由でクリックイベントを設定してみてください（アンカータグを使用する必要はありません）。すなわち$（ "＃picturelementid"）をクリックします（function {}）。