SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist spoondevil's Avatar
    Join Date
    Jun 2001
    Location
    Harlow, Essex, UK
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Change Image Without Reloading Page

    On my website, I have a products listing page. Some of the items have more than 1 image saved against them and I would like to use a script so the user can click between images and they load up in the page without actually having to reload the whole page.

    At the moment, they are loading in an iframe, but if the user views 2 or 3 of the pictures and then clicks back on their browser, it just goes through the pictures they've already seen.

    The nuymber of and names of the pictures are in a MySQL database and the page is written in PHP/HTML, but I think this script will need to be in JS and have a while loop to give it the names of the files.

    Or...

    Is there just a JS bolt on so it will define an <div> area on the screen and load images into that?

    The page in question is http://www.aircooledparts.co.uk/deta...ubcID=10&pID=1

    Any help would be great.

    Ian

  2. #2
    SitePoint Evangelist priti's Avatar
    Join Date
    Aug 2006
    Location
    India
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spoondevil View Post
    On my website, I have a products listing page. Some of the items have more than 1 image saved against them and I would like to use a script so the user can click between images and they load up in the page without actually having to reload the whole page.

    At the moment, they are loading in an iframe, but if the user views 2 or 3 of the pictures and then clicks back on their browser, it just goes through the pictures they've already seen.

    The nuymber of and names of the pictures are in a MySQL database and the page is written in PHP/HTML, but I think this script will need to be in JS and have a while loop to give it the names of the files.

    Or...

    Is there just a JS bolt on so it will define an <div> area on the screen and load images into that?

    The page in question is http://www.aircooledparts.co.uk/deta...ubcID=10&pID=1

    Any help would be great.

    Ian
    Ajax might be helpful.

  3. #3
    SitePoint Enthusiast vic_msn's Avatar
    Join Date
    Mar 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Just change the src of the large image with the new image.

    Code:
    var imageElm     = document.getElementById('MySuperImage');
        imageElm.src = 'NewImageSrc.jpg';
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



Bookmarks

Posting Permissions

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