Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts

    Changing img src

    Code:
    <img src = "/images/boats/large/my-red-pepper---8019812411a.jpg" width = "690" height = "350" id = "main_image"  />    <div id = "gallery_thumbs">
        <img src = "/images/nav_left.png" alt = "Back" id = "nav_back"  />        <div id = "inner_thumbs">
            <div style="width:10000px" id="sliding_thumbs">
            <a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019812411a.jpg"  /></a>
    <a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019712411a.jpg"  /></a>
    <a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019412411a.jpg"  /></a>
    <a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019312411a.jpg"  /></a>
    
    <a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019212411a.jpg"  /></a>
    <a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019512411a.jpg"  /></a>
    <a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019612411a.jpg"  /></a>
    <a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/big_my-red-pepper---12411-main.jpg"  /></a>
            </div>
            </div>
    Why isn't this working? document.getElementById('main_image').src=this.href;return false;
    I originally had this:

    Code:
    $('#sliding_thumbs a').click(function()
        {
            $('#main_image').attr('src',this.href);
            return false;
        })
    but that didn't work so I put the onclick inline and it still isn't working but I can't fathom why. I have confirmed that the #main_image is being detected correctly (by alerting the src) and that the this.href part contains the url of an image but nothing happens. There is no error and the large image doesn't load in the same window (so the return false part is working!)

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    I think, perhaps, it's referring to the main_image the way you have "this.href "in there

    here's another way
    Code:
    $('#sliding_thumbs a').click(function(e)
        {
            e.preventDefault();
            var myurl= $(this).attr('href');
            $('#main_image').attr('src',myurl);
        });
    also if your defining this before page load in the head, use

    Code:
    $(document).ready(function(){
    $('#sliding_thumbs a').click(function(e)
        {
            e.preventDefault();
            var myurl= $(this).attr('href');
            $('#main_image').attr('src',myurl);
        });
    });

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if for some reason it doesnt like displaying the new image, you could try recreating it.

    Code:
    $(document).ready(function(){
    $('#sliding_thumbs a').click(function(e)
        {
            e.preventDefault();
            var myurl= $(this).attr('href');
            var origIMG = $('#main_image')
            var newIMG = origIMG.clone().attr("src",myurl)
           origIMG.replaceWith(newIMG)
        });
    });

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by NancyJ View Post
    Why isn't this working?
    The way you are doing it is very messy imo. If it's not working then there is a problem somewhere else in your code.

    The demo below shows that the concept of what you are trying to do does work.

    In the "real world" I would put all the <img> id's and hrefs in an array and then loop through the array on the server to create the html dynamically. That way, if you need to change anything, you need to make the change in just one location and not potentially several.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div>
                <a href = "num1.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" >
                    <img src="num1.jpg" alt="" />
                </a>
                <a href = "num2.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" >
                    <img src="num2.jpg" alt="" />
                </a>
                <a href = "num3.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" >
                    <img src="num3.jpg" alt="" />
                </a>
            </div>
            <div>
                <img id="main_image" src="" alt="" />
            </div>
        </body>
    </html>

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts
    I am only changing it in one place, the html is generated by php But that isn't really relevant to the question.

    I've found the problem - it was staring me right in the face - all the links go the large image that was already there. That's what I get for working late.


  •  

    Posting Permissions

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