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 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My html gallery won't work. :(

    Hey guys.

    I'm trying to use this code for a gallery:

    http://workshop.rs/2010/07/create-im...uery/#more-144

    And here's my crappy version:

    http://www.gilad91.limewebs.com/illustrator.html

    I copy/pasted the code and still managed to screw it up... Basically, can anyone tell me why my big picture doesn't change when I click the thumbnails?

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,402
    Thanks
    11
    Thanked 298 Times in 297 Posts
    I don't see the JQuery library included?

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    Dave

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello Rubella,
    tracknut is right, that won't run unless you link to some version or other of jQuery.

    You've also left out a closing tag or two. Check the validator.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I'll try that.

    EDIT: I did the validating thing and I don't understand any of it! It says I have unclosed tags but I don't know how I'm supposed to close them, since that the way the teacher said to do it.

    I pasted in the jQuery code but I think I did it in the wrong place because it hasn't made any difference.
    Last edited by Rubella; 02-03-2011 at 06:29 AM.

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just bumping this in case there's anyone on now who can help. I thinK I posted this thread kinda late last night.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,402
    Thanks
    11
    Thanked 298 Times in 297 Posts
    That JQuery link needs to be included in your header section (ie, between the <head> and </head> lines. Let us know if that doesn't fix it....

    Dave

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello. I put it just before the end of the head part and it didn't do anything. I'm not really sure how this gallery is supposed to work. How does it know which large image to put there when all I've done is click a small thumbnail of it and not mentioned the large one anywhere in the code?

    Or is that part of the reason it doesn't work?
    Last edited by Rubella; 02-03-2011 at 10:30 PM.

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,402
    Thanks
    11
    Thanked 298 Times in 297 Posts
    You might go back through the instructions on how to set up that gallery. I'm reading through it, and for example they say that every image/thumbnail pair must be named something_large.jpg and something_thumb.jpg. The "large" and "thumb" are critical parts of the naming convention, as it's what the JQuery routine is using to map from one to the other. Perhaps that's the only reason yours isn't working, I'm not sure, but it certainly is different from what you did. Try that and see if it works.

    Dave

  • #9
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    You might go back through the instructions on how to set up that gallery. I'm reading through it, and for example they say that every image/thumbnail pair must be named something_large.jpg and something_thumb.jpg. The "large" and "thumb" are critical parts of the naming convention, as it's what the JQuery routine is using to map from one to the other. Perhaps that's the only reason yours isn't working, I'm not sure, but it certainly is different from what you did. Try that and see if it works.

    Dave
    Truth be told, I didn't look at the instructions. I thought I could just copy the code and it would all be fine. :P I'll go back and actually read it now. If that turns out to be the only reason it's not working, I apologise in advance for wasting your time.

  • #10
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I renamed them and still no change.

  • #11
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,402
    Thanks
    11
    Thanked 298 Times in 297 Posts
    Hmm.. no thumbmnails at all now, did you rename the files to the same names as are referenced in the html? I.e. they now look like: images/illustrator/img_03_thumb.jpg - I don't remember what they were before, but I don't remember that directory name at the front of them?

    Dave

  • #12
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh...yeah, I put them in a different folder because I'll have to do this again for another gallery as well, and I can't have 2 files with the same name in one folder.

    Anyway, I put them back and it still doesn't appear to be working.

  • #13
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,402
    Thanks
    11
    Thanked 298 Times in 297 Posts
    I noticed in their example, they put the JS code all the way at the bottom, try it that way, I did a quick test and it looks good. So find this:
    Code:
    $('#thumbs').delegate('img','click', function(){
    	    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    	    $('#description').html($(this).attr('alt'));
    	});
    and pull it out from where it is, and insert this at the bottom of the file just before the </body>:
    Code:
    <script>
    $('#thumbs').delegate('img','click', function(){
    	    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    	    $('#description').html($(this).attr('alt'));
    	});
    </script>

  • #14
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    AAAAAGGGGHHHH IT WORKSSSS

    You made it work!!!! Thank you so much!!!! Now I jsut need to make some of them smaller and not gifs, since those don't seem to show. Dude, this assignment is worth 75% of my grade. You've just made it so much more likely that I'll pass.


  •  

    Posting Permissions

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