Forums

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:

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:


<div id=\"contactWrapper\">
<div id=\"contactImage\">
	<ul>
		<li><img src=\"squashharvest2.jpg\" alt=\"First Squash Harvest\" title=\"First Squash Harvest\" id=\"3\" width=\"300\" height=\"300\"></li>
		<li><img src=\"winterbox2.jpg\" alt=\"Winter CSA Boxes\" title=\"Winter CSA Boxes\" id=\"2\" width=\"300\" height=\"400\"></li>
		<li><img src=\"squashharvest1.jpg\" alt=\"First Squash Harvest\" title=\"First Squash Harvest\" class=\"current\" id=\"1\" width=\"300\" height=\"300\"></li>
		<li><img src=\"winterbox1.jpg\" alt=\"Winter CSA Box\" title=\"Winter CSA Box\" id=\"4\" width=\"300\" height=\"400\"></li>
	</ul>
</div>
<div id=\"contactThumb\">
	<ul>
		<li><a href=\"#\" rel=\"1\"><img src=\"squashharvest1-150x150.jpg\" alt=\"First Squash Harvest\" title=\"First Squash Harvest\" width=\"50\" height=\"50\"></a></li>
		<li><a href=\"#\" rel=\"2\"><img src=\"winterbox2-150x150.jpg\" alt=\"Winter CSA Boxes\" title=\"Winter CSA Boxes\" width=\"50\" height=\"50\"></a></li>
		<li><a href=\"#\" rel=\"3\"><img src=\"squashharvest2-150x150.jpg\" alt=\"First Squash Harvest\" title=\"First Squash Harvest\" width=\"50\" height=\"50\"></a></li>
		<li><a href=\"#\" rel=\"4\"><img src=\"winterbox1-150x150.jpg\" alt=\"Winter CSA Box\" title=\"Winter CSA Box\" width=\"50\" height=\"50\"></a></li>
	</ul>
</div>
</div>

and the css:


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):

$(\"#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

treehouse : what would you like to learn today?

Forums

Remote Linking Images from WP Custom Fields