Ben 11

Looking for some assistance with this script.

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

The following script does this.

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

However, I would like to modify the script so that this happens automatically, on page load, to all groups of related images, without me having to define the REL.

These pages are auto generated by another piece of software. The images are placed there automatically. Im trying to use Jquery to group them.

Any assistance would be greatly appreciated.

2 answers

o.k.w 2355
1
point
This was chosen as the best answer

Ben, I finally understood what you are trying to achieve. Here's the code to show the first image with a background and hide the rest of each REL group.

<!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() {
    var currentRel = '';
    $(".photo img").each(function(index){
        var rel = $(this).attr('rel');
        if(rel != currentRel) {
            matchImg(rel);
            currentRel = rel;
        }
    });
});

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" />
<img rel="su" src="http://sstatic.net/su/img/logo.png" alt="5" />
<img rel="su" src="http://sstatic.net/su/img/logo.png" alt="6" />
<img rel="sf" src="http://sstatic.net/sf/img/logo.png" alt="5" />
<img rel="sf" src="http://sstatic.net/sf/img/logo.png" alt="6" />
</div>
</body>
</html>
Answered almost 7 years ago by o.k.w
  • Nice job :) Mottie almost 7 years ago
  • Oh, but I think it might be better to wrap the first image in the group so you can set a background image to that element doing something like this: $(sel + ":first").wrap('<span class="group"></span>'); I'm also wondering if the page will have the rel tags sorted, if not, the script might end up wrapping too many spans around the image. Mottie almost 7 years ago
  • @Fudgey, 'wrap' is a good idea, or adding a new css class can do as well (image elements can have background too). As for whether the images of the same 'rel' values will be grouped together, I've thought about it too. The above code will still work, just not as efficient. One way is to keep track of processed images. We'll see how Ben respond. :) o.k.w almost 7 years ago
  • Instead of assuming that the like "rel" values will be in contiguous runs if `<img>` tags, the code could first go through all the images and build a set of the different "rel" values that are actually on the page. Then, the loop above would iterate through that set and find `<img>` tags with each "rel". The first would be made visible, and the rest would be hidden (or whatever). Mike McNally almost 7 years ago
  • @O.K.W. , fantastic job! Just tested it and it works great. Once I finish the project I am working on, I will throw in a credit for you, for all your help. I really appreciate it. If you like, I can email you when I'm done. Thanks again :) Ben almost 7 years ago
  • @Ben, glad it worked for you. Will be good if you can let me know the url of the completed project, that's all I ask for, no other credit required :) o.k.w almost 7 years ago
Mottie 1134
2
points

Hi,

I know o.m.w. helped you with this before... did you try just calling the function outside of the button click function?

Change it from this:

$(function() {
  $("input[type='button']").click(function(){
    $(".photo img").show().css('background','transparent'); //restore visibility
    matchImg($("#relval").val());
  });
});

to this:

$(function() {
  $(".photo img").show().css('background','transparent'); //restore visibility
  matchImg($("#relval").val());
});

and have the #reval be a hidden input with your rel tags?

Answered almost 7 years ago by Mottie
  • Thanks Fudgey, for helping on this :) o.k.w almost 7 years ago