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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Photo gallery thumbnails issue

    Hello,

    This is my first post to this forum so if I'm not posting this in the proper place, I apologize. I'm pretty much a beginner in learning CSS/HTML. I'm currently trying to add a simple photo gallery to a page I'm creating for a website and I'm having an issue with the thumbnails. The thumbnails are working as they should, correctly linking to the image, but the thumbnails images keep changing when clicked? I'm not sure why and can't seem to figure out a solution. Any help would be appreciated!

    Code:
    <script type='text/javascript'>
    function changeimg( number, src ) {
    //Get big picture source
    var big_picture = document.getElementById( "big_picture" ).src;
    
    //Change big picture source
    document.getElementById( "big_picture" ).src = src;
    
    //Replace clicked picture with big picture
    document.getElementById( "small_picture" + number ).src = big_picture;
    
    }
    
    </script>
    
    <style>
    #big_picture {
    width:100%;
    
    padding-bottom:25px;
    }
    .small_picture {
    width:45.25px;
    height:48.277px;
    margin-left:70px;
    
    }
    </style>
    
    <img id='big_picture' src="Logo1image.jpg" />
    
    <img id='small_picture1' class='small_picture'
    src="TK_Thumb1.jpg"  onClick='changeimg( 2, this.src="Logo1image.jpg");' style="padding-left:0px;" />
    
    <img id='small_picture2' class='small_picture' src="TK_Thumb2.jpg" onClick='changeimg( 2, this.src="Logo2image.jpg");' style="padding-left:20px;" />
    
    <img id='small_picture3' class='small_picture' src="TK_Thumb3.jpg" onClick='changeimg( 2, this.src="Logo3image.jpg");' style="padding-left:20px;" />
    
    <img id='small_picture4' class='small_picture'src="TK_Thumb4.jpg" onClick='changeimg( 2, this.src="Logo4image.jpg");' style="padding-left:20px;"  />

  • #2
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,960
    Thanks
    120
    Thanked 76 Times in 76 Posts
    This is for javascript part of forum, anyway this does not make any sence:

    Code:
    function changeimg( number, src )
    
    onClick='changeimg( 2, this.src="Logo2image.jpg");'
    it would mybe make sence:

    Code:
    onClick='changeimg( 2, "Logo2image.jpg");'
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • Users who have thanked BubikolRamios for this post:

    mpeters1790 (11-20-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That actually worked! Thank you so much!

    -- I also changed all the numbers within the parentheses to 0.
    Last edited by mpeters1790; 11-20-2012 at 03:36 PM.


  •  

    Posting Permissions

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