Question

I am developing my first website and I have built an interactive photo gallery. The main idea behind is that there is one large image displayed, if a user clicks this it changes to the next image. There is a also a thumbnail carousel below and this can be used to change to main image as well. I pretty much have this working as I would like (minus a few minor points with style etc). I then tried using the site on my iPhone and found that the photo gallery did not work as it had done on my desktop. What seems to happen is that when I click an image it reloads the page with the same image, not the next one in the list.

The way I have decided to code is that, the images are contained in anchor tags like:

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

When clicked jQuery catches the event and passes the appropriate parameters to the javascript function that updates the document with the new photo. This function called changePhoto() and creates an XMLHttpRequest to get the XML file that stores all the image names and alt information.

To view the photo gallery in its current state go to http://www.mwlets.co.uk/properties.html

I initially thought this would be a problem with iPhone not supporting javascript, jQuery or xml, but I seem to be able to find working examples of all of these things. I even tried the w3schools example of pulling information from an xml file and that worked fine.

My javascript code is:

    $(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();

}

Individually I believe all the components should theoretically work on an iPhone. If anyone can suggest potential reasons why not that would be great.

I also realise that this is probably not the neatest way to code this. It is my first attempt at Javascript, jQuery and Ajax in a proper application. I’m open to suggestions for alternative ways to do this. My main requirements are that it sort of does what it’s doing on the site (as viewed from a desktop) at the moment, it is cross-brower/platform and is quick to retrieve the images. I am planning to gracefully degrade this code so that browsers without JS can view the images as a kind of frame style gallery.

Thanks in advance,

Matt

Answer 1

Safari is refreshing the page because of the empty href (I believe that’s standard Safari behavior). Try setting the click event via jQuery (you may not have to use anchor tags then). i.e $(“#picturelementid”).click(function{});