CODEWITHSUNDEEP
jqueryimage
M.K. Safi
M.K. Safi

Reputation: 7019

jQuery: Select Images That are Linking to Image Files

How can I select images that are wrapped in tags under the condition that the tag href is to a gif, jpg, png, bmp, or some other image file type.

The reason I want to select these images is to add the overlay text "Click to Enlarge" to each image.

Upvotes: 2

Views: 7357

Answers (4)

DarthJDG
DarthJDG

Reputation: 16591

Try this:

$('a[href$=".gif"], a[href$=".jpg"], a[href$=".png"], a[href$=".bmp"]').children('img');

The above selector is not case sensitive though, you might be better off selecting all links with images in them and filtering through them manually, like @reporter suggested.

Upvotes: 14

Jo-Herman Haugholt
Jo-Herman Haugholt

Reputation: 462

Depending on what you want;

$("img");

This will select all images on the page.

$("img[src$='.gif']");

This selects all GIF files (assuming the url ends with .gif)

$("img[src$='.gif'], img[src$='.png']");

This selects all GIF and PNG files.

$("img.thumb");

And finally this one will select all images with the 'thumb' class.

Upvotes: 2

Reporter
Reporter

Reputation: 3948

    //find all images
    $("#YourContainerTag").find("img").each(function()
    {
      //read the parent
      var parentLinkObject = $(this).parent();
      if (parentLinkObject.name == "a")
      {
        //read the attribute 'href'
        hrefAttribute = $(parentLinkObject).attr("href");
        //look for graphical file types
        ...     
      }
     //what ever you want to do
     ...
    });

Upvotes: 1

Nick Larsen
Nick Larsen

Reputation: 18877

Why don't you just select all <img /> elements. If you need something else, you should provide an example or list of the elements and what you need selected.

$('img');

Upvotes: 0

Related Questions