Determining if a specific image/link is on a page

Question

I'm trying to create an onkeydown event, that will automatically move an image gallery on a specific site to the next image, or back. Problem is, the link structure isn't structured efficiently.

So basically, I"m trying to find within the userscript whether the image that you would click to go back or to go forward exists on a page, with if statements, to determine whether the back/forward action (left arrow / right arrow on keyboard respectively) can actually be done.

How would I go about determining whether said image(s) exist on the page?

score 0 · Answer 1 · answered Sep 24 '12 at 04:29

Assuming you're using jquery, something as simple as:

$('img[src="/path/to/left-arrow-picture.jpg"]')

would do, or if they have a specific class on them,

$('img.prevclass')

would work. If you're in plain javascript only, you can simulate this with

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++) {
   if (i.src == '/path/to/left-arrow-picture.jpg') {
       ...
   }
}

RobG · Answer 2 · 2012-09-24T04:47:32.443

Usually all the images for a gallery are held in an array, so a typical behaviour is to loop around so when it's at the last image and the user wants to go to the next one, the gallery goes to the first, and vice versa, e.g.

var currentImage = 0;
var numberOfImages = imageArray.length;

if ( <user wants next image> ) {
  currentImage = ++currentImage % numberOfImages;

} else if ( <user wants previous image> ) {
  currentImage = (--currentImage + numberOfImages) % numberOfImages; 
}

I don't know how you've implemented the gallery, but you should be able to apply the above logic somehow.

Alertnatively, if you're looking for an image with a particular src value, loop over them as suggested by MarcB. Note that there is no need for getElementsByTagName, there is a document.images collection ready to go.

Note also that in some browsers, the src property will be the full path but in other (older) browsers just the attribute value. So better just to match on the actual image name.

This is a `userscripts` question, so the OP didn't implement the gallery and probably has no control over the target page. As the question currently stands, the only browser should be Chrome (Firefox if it's mis-tagged). For other browsers, like Opera, the OP is usually savvy enough to state such. — Brock Adams, Sep 24 '12 at 09:51

score 0 · Answer 3 · answered Sep 24 '12 at 10:20

First, determine the CSS path or the src attribute for the image. (The src may not be present, if the site uses sprites. Or, it might not be unique.)

You can right-click on the image and choose Inspect Element, and use the dev tools or Firebug to help determine this.
Link to the target page, or paste in appropriate HTML snippets, if you want our help choosing the selector(s).

Then you can use code like this:

Plain javascript:

var lftArrwImg  = document.querySelector ("#galleryControls div.foo a img");
if (lftArrwImg) {
    // DO YOUR LEFT ARROW STUFF HERE.
}

Or:

var lftArrwImg  = document.querySelector ("img[src='/some_path/left_arrow.gif']");
if (lftArrwImg) {
    // DO YOUR LEFT ARROW STUFF HERE.
}

jQuery:

if ( $("#galleryControls div.foo a img").length ) {
    // DO YOUR LEFT ARROW STUFF HERE.
}

Or:

if ( $("img[src='/some_path/left_arrow.gif']").length ) {
    // DO YOUR LEFT ARROW STUFF HERE.
}

Beware that some sites might have the image always present, but hide it when it's not applicable.

Determining if a specific image/link is on a page

3 Answers3