Grow your CSS skills. Land your dream job.

Problems with simple image loading script

  • # August 23, 2012 at 5:50 pm

    I am trying to implement a simple script of image thumbnails, that when clicked, display a larger image.

    I am trying to do this without using an existing plugin.

    Here is my current code.

    $(‘#thumbnails ul li’).click(function() {
    $(‘#main’).attr(‘src’, $(this).attr(‘src’).replace(‘small/’, ‘large/’));});​

    Can someone please let me know what I am doing wrong? I have also upload the whole code here… http://jsfiddle.net/PjrFe/

    Thanks in advance guys.

    # August 23, 2012 at 7:41 pm

    I’ve done one that breaks it down a little more: http://jsfiddle.net/PjrFe/19/

    I’m sure this can be made more efficient by somebody that knows what they’re doing, but at least it works!

    # August 23, 2012 at 8:35 pm

    Thanks TheDoc, yes that does seem to work. I also figured it out…

    $(‘#thumbnails ul li’).click(function(){
    $(‘#main’).attr(‘src’,$(this).find(‘img’).attr(‘src’).replace(‘small/’, ‘large/’));
    });

    It turns out I was just missing the .find element.

    Thanks anyway ;)

    I just need to make it fade in more smoothly now.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".