Grow your CSS skills. Land your dream job.

Remote Linking Images from WP Custom Fields

  • # December 8, 2009 at 8:24 pm

    Hey all,

    Here’s one that I can’t figure out. Still very much a beginner, so go easy on me…

    The example page is: http://shipkifarm.com/dev/contact

    What I have at the moment is 8 images generated by WordPress Custom Fields; 4 thumbnails and their corresponding images. The 4 bigger images are all positioned absolutely so they sit on top of each other. The 4 thumbnails are just below and are floated <li>’s. When I click on the thumbnail, I want to add the class of "current", which sets the opacity of the image to 1.0, and remove the class of "current" from the currently visible image, which sets the opacity to 0.0.

    What I’d like to do is remotely link the thumbnails (each of which have an anchor tag) to their corresponding images. Each set of 4 images is in its own <ul>.

    The jQuery that I’m trying to work out is:

    Code:
    jQuery(“#contactThumb li a”).click(function() {
    var jQueryThumbRel = jQuery(this).attr(“rel”);

    var jQueryImageRel = jQuery(“#contactImage li img”).find(jQueryThumbRel);

    jQuery(“#contactImage .current”).removeClass(“current”);

    jQuery(jQueryImageRel).addClass(“current”);

    return false;
    });

    The part that doesn’t work is the jQueryImageRel returns [object] [Object] when alerted. One more detail is that I’m using the rel’s of the thumbnails to match to the id’s of the images.

    What am I missing?

    Many thanks!

    -Jacob

    # December 9, 2009 at 12:29 pm

    Here’s the generated HTML:

    Code:
    • First Squash Harvest
    • Winter CSA Boxes
    • First Squash Harvest
    • Winter CSA Box
    • First Squash Harvest
    • Winter CSA Boxes
    • First Squash Harvest
    • Winter CSA Box

    and the css:

    Code:
    div#contactWrapper {
    margin: -5px auto 0;
    width: 340px;
    position: relative;
    }
    div#contactImage {
    position:relative;
    width: 300px;
    height: 400px;
    }
    #contactImage img {
    margin: 0 20px;
    opacity: 1.0;
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    }
    #contactImage .current {
    opacity: 1.0;
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    }
    #contactImage ul {
    margin: 0 15px;
    }
    #contactImage ul li {
    position: absolute;
    }
    div#contactThumb {}
    #contactThumb img {
    border: 1px solid black;
    padding: 2px;
    background: #384350;
    }
    #contactThumb ul {
    margin: 0 35px;
    }
    #contactThumb ul li {
    float:left;
    margin: 10px 5px;
    }

    Thanks!

    -Jacob

    # December 9, 2009 at 2:01 pm

    Here’s what was figured out (with a bit of help):

    Code:
    $(“#contactImage li img”).css(‘opacity’, ‘0.0’);
    $(“#contactImage li img:eq(2)”).css(‘opacity’, ‘1.0’);
    $(“#contactThumb li a”).click(function() {
    var jQueryThumbRel = parseInt($(this).attr(“rel”)) – 1;

    $(“#contactImage li img”).css(‘opacity’, ‘0.0’);

    $(“#contactImage li img:eq(” + jQueryThumbRel + “)”).css(‘opacity’, ‘1.0’);

    return false;
    });

    Wha’d’ya think?

    -Jacob

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".