Ben 11

Hey guys, quick question . . .

I had asked previously how to have jquery perform a specific action, when it found matching rel attributes.

Looking for some further assistance with this. 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.

Basically, 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).

Any help with this would be greatly appreciated.

1 answer

o.k.w 2355
2
points
This was chosen as the best answer

Am not too sure how you want to hide the images, do their grid cell remain? Anyway here's one way of implementing it.

<!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>

UPDATE:
To have the images filtered on page load based on a pre-determined text e.g. 'mytext', replace the code of $(function().. with this:

$(function() {
    matchImg('mytext');
});
Answered almost 7 years ago by o.k.w
  • Thanks o.k.w. I'll have to play with that. How would I get it to do that automatically (with out the field). Ben almost 7 years ago
  • @Ben, I'm not sure exactly how you want to trigger the filtering of the images, hence I encapsulated the codes in the matchImg(relVal) method. I can only assist further if you can elaborate on it. E.g. upon clicking/hovering on some elements? or..??? o.k.w almost 7 years ago
  • @O.K.W., Basically, I don't want to have to specify the Rel attribute I would like matched. I would like Jquery to perform this function on any/all images that have the same Rel attribute, automatically. Each page will have multiple groups of Rel attributes. Ben almost 7 years ago
  • @Ben, I'm still not very clear about this. If matching is done for all image sets, and they are all hidden except the first one of each sets, why do you want the hidden images at all? o.k.w almost 7 years ago
  • @O.K.W. , These pages are auto generated by another piece of software. The images are placed there automatically. Im trying to use Jquery to group them Ben almost 7 years ago