Grow your CSS skills. Land your dream job.

Quick question – change link on click

  • # April 23, 2010 at 12:01 pm

    Hey all,

    My photo gallery consist of small thumbnails and one main image displayed that swaps when clicking the thumbs.
    Here is my html

    Code:

    I added a zoom, hence the link surrounding the main image.

    My jQuery for swapping the #main_view looks like this

    Code:
    jQuery(“ul.thumb li img”).click(function() {

    var mainImage = jQuery(this).attr(‘src’);
    jQuery(“#main_view”).attr(‘src’,mainImage);
    return false;

    });

    Because I added the zoom effect I will need to change the link href along with the #main_view source. My newbie skills though adding

    Code:
    jQuery(“.zoomThis”).attr(‘href’,mainImage)

    would be enough but apparently I was once again wrong. (sigh)

    Any ideas how to get this working?

    Thank you

    # April 24, 2010 at 4:34 am

    Try this:

    Code:
    jQuery(“ul.thumb li img”).click(function() {

    var mainImage = jQuery(this).attr(‘src’);
    jQuery(“#main_view”).attr(‘src’,”large-images/” + mainImage);
    return false;

    });

    And then put the larger images in that folder.

    # April 26, 2010 at 4:40 am

    Thanks for your reply, but I don’t think I made myself clear.

    Changing the src of the image works fine, but I want to change the href of my (.zoomThis) link too… Any ideas?

    # April 29, 2010 at 1:47 am

    Couldn’t you do it by using the same method; just change src to href?

    Code:
    $(“ul.thumb li img”).click(function() {

    var mainImage = jQuery(this).attr(‘src’);
    $(“#main_view”).attr(‘href’, mainImage);
    return false;

    });

    # April 30, 2010 at 10:34 am

    Nope, it doesn’t work… :|

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

You must be logged in to reply to this topic.

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