1

我正在开发我的第一个网站，并建立了一个交互式照片库。背后的主要思想是显示一个大图像，如果用户单击它，它将更改为下一个图像。下面还有一个缩略图轮播，也可以用来切换到主图像。我几乎可以按照我的意愿进行这项工作（减去一些风格等方面的小问题）。然后我尝试在我的 iPhone 上使用该网站，发现照片库不像在我的桌面上那样工作。似乎发生的情况是，当我单击图像时，它会重新加载具有相同图像的页面，而不是列表中的下一个。

我决定编码的方式是，图像包含在锚标记中，例如：

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

单击时，jQuery 捕获事件并将适当的参数传递给使用新照片更新文档的 javascript 函数。此函数调用changePhoto()并创建一个 XMLHttpRequest 来获取存储所有图像名称和 alt 信息的 XML 文件。

要查看当前状态的照片库，请访问http://www.mwlets.co.uk/properties.html

我最初认为这将是 iPhone 不支持 javascript、jQuery 或 xml 的问题，但我似乎能够找到所有这些东西的工作示例。我什至尝试了从 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(function{});

于 2012-04-16T19:04:36.127 回答