www.webdeveloper.com
Results 1 to 5 of 5

Thread: Lightweight Image Gallery

  1. #1
    Join Date
    Jun 2005
    Location
    Pennsylvania
    Posts
    40

    Lightweight Image Gallery

    herro everyone...

    I'm working on a website for a fencing company, and I'm in the process of making a custom image gallery so that they can showcase their projects. Right now I've got a table of thumbnails that, when clicked, make a div containing the larger image pop up. (http://www.hessiron.com/gallery.html)

    This works fine, except I want to show a loading graphic when the browser loads a new image.

    Could someone walk me through how that would work? I'm very new to javascript and I am trying to learn how the gears turn rather than just paste code in. Thanks!

    In addition, I feel like the gallery in general is awkward to use. Any UI-making tips would also be appreciated.

  2. #2
    Join Date
    Dec 2009
    Location
    Colorado
    Posts
    104
    Hey Funny Guy,
    I went to your site. Impressive, first of all. Very nice layout. I don't know why you think you need a loading image. It seemed to come up for me without any delay. In any event there is no way to do what you want with Javscript and HTML. It can be done in flash. Browsers run sequentially, one line at a time. Images come in one image at a time. There is no way to detect when an image is completely loaded. There are no events that occur.

    Best suggestion is to preload your large images with javascript when the page loads. Then they will display onClick more quickly. Like this:

    <script>
    function loadImages() {
    preload_image = new Image();
    preload_image.src="http://mydomain.com/image.gif";
    }
    </script>
    <body onLoad="loadImages()">

    With the amount of images you have this might make the page load very slowly though.

    Maybe someone else has a better solution.

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    Code:
    <SCRIPT language="JavaScript">
    <!-- Begin
    document.onreadystatechange=loadingImage();
    function loadingImage() {
    	if (document.readyState == "complete") {
        	var imgDest = document.getElementById('test');
    		imgDest.style.visibility='hidden';
    	}
    }
    function displayImg(newImg) {
     var newImgSrc=newImg.src;
     newImgSrc = newImgSrc.replace("thumb","medium").replace("gif","png");
     document.getElementById('mainpic').src ='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
     if (newImg.loaded){
         swap(newImgSrc);
     }
     else {
      newImg.loaded=new Image();
      newImgSrc.onload=swap(newImgSrc);
      newImg.loaded.src=newImgSrc;
     }
    }
    function swap(newImgSrc) {
    	var imgDest = document.getElementById('mainpic');
    	imgDest.setAttribute("src", newImgSrc);
    	imgDest.style.visibility='visible';
    }
    function hide() {
    	var imgDest = document.getElementById('mainpic');
    	imgDest.style.visibility='hidden';
    }
    // End -->
    </SCRIPT>
    replace
    displayImg(this.src)

    with
    displayImg(this)
    Code:
          <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01889.gif" onclick="displayImg(this)"/></td>
        <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01893.gif" onclick="displayImg(this)"/></td>
        <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01899.gif" onclick="displayImg(this)"/></td>
        <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01909.gif" onclick="displayImg(this)"/></td>
        <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01911.gif" onclick="displayImg(this)"/></td>
            </tr>
            <tr>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Dec 2009
    Location
    Colorado
    Posts
    104
    Very cool Vic! I'll keep this one.

  5. #5
    Join Date
    Jun 2005
    Location
    Pennsylvania
    Posts
    40
    Thanks guys, but the problem is I've only seen the loading image once. (I changed it to "placeholder.jpg") Otherwise the image behaves as it did with my first code...

    I'm trying to get something to this effect: http://gizmodo.com/5459997/this-week...-apps/gallery/

    EDIT: I might have fixed this, just had to expand "document.getElementById('mainpic').src ='placeholder.jpg';" into a new variable declaration.
    Last edited by Funny Guy; 01-29-2010 at 06:50 PM. Reason: Fix'd

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles