Hey guys
First, please see this post on Doctype
I've been trying to get an answer to this, but have not been successful. The script that the first poster provided works great but, I need this to happen automatically, for all groups of matching Rel's.
Any assistance would be greatly appreciated.
EDIT: For those of you unable to follow the link above, here is the script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>match rel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("input[type='button']").click(function(){
$(".photo img").show().css('background','transparent'); //restore visibility
matchImg($("#relval").val());
});
});
function matchImg(relVal){
var sel = ".photo img[rel='" + relVal + "']";
if ($(sel).length > 0) { //check matching rel
$(sel + ":gt(0)").hide(); //hide all except first
$(sel + ":first").css('background','red'); //set background to first
}
}
</script>
<style type="text/css">
.photo img {
padding: 5px;
float: left;
}
</style>
</head>
<body>
<div class="photo">
<img rel="dt" src="http://doctype.com/images/logo-small.png" alt="1" />
<img rel="dt" src="http://doctype.com/images/logo-small.png" alt="2" />
<img rel="dt" src="http://doctype.com/images/logo-small.png" alt="3" />
<img rel="so" src="http://sstatic.net/so/img/logo.png" alt="4" />
<img rel="so" src="http://sstatic.net/so/img/logo.png" alt="5" />
</div>
<p style="clear: both;">
Enter 'dt' or 'so' <input type="text" value="dt" id="relval" />
<input type="button" value="match" />
</p>
</body>
</html>
Basically, I'm taking a grid-layout of photos and modifying them. Some photos are related and some are not. The ones that are related will have matching Rel attributes. I would like jquery to recognize a group of related images (with the same rel), hide all of the images except the first and apply a background image to the container of the first photo (not finalized yet but, it will likely be a div or li).
This script already does this.
However, I need the script to do this automatically, with all matching rel groups, without me having to enter in the rel attribute.