Remote Linking Images from WP Custom Fields

[doobie]

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

[doobie]

Here’s the generated HTML:

Code:

• 
• 
• 
• 

• 
• 
• 
• 

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

[doobie]

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

[Author]

Posts