0

I have a very basic understanding of javascript and have managed to create a bookmarklet to go up one subdirectory and replace the directory name.

Code:

javascript:(function(){var pathArray=window.location.pathname.split('/');var newPathname=pathArray[0]+"/"+pathArray[1]+"/"+pathArray[2]+"/"+pathArray[3]+"/"+pathArray[4]+"/s2450-k/";document.location.href=newPathname;})()

Basically, what it does, is to break down the URL for images on Blogspot, Picasaweb or Google+ albums and replace it with the largest size (up to 2450x2450)

So the image URL:

http://www.website.com/SubD1/SubD2/SubD3/SubD4/s640/blah.JPG

gets converted to:

http://www.website.com/SubD1/SubD2/SubD3/SubD4/s2450-k/

Now, This works only if I use the "Open image in new Tab" option before using the bookmarklet since I am using document.location.

I would like to view the images directly on the webpage/blog, without having to open each image separately.

I'm looking for help in figuring out how to specifically identify tags and run the above function on the page inline via a bookmarklet, instead of having to open each image separately first?

Also, I am not sure how one would go about making changes only to the images I'm interested in, rather than all images on the page since stuff like logo and background would break if I do this blindly. Not that I mind of course, but my secondary aim here, is to learn how to identify which is which and make this seamless.

Maybe once I run the bookmarklet, I could capture onclick and somehow apply the function only on the element under the mouse cursor?

user1948345
  • 1

2 Answers2

1

You can select only the images that you want to change using CSS attribute selectors, then you can loop through these and apply you function to only the relevant images.

var images = document.querySelectorAll('img[src*="http://common.part.of.image.src"]')

Array.prototype.forEach.call(images, function (img) {
    img.src = yourFunctionThatChangesUrls(img.src)
})

document.querySelectorAll is available in modern browsers, and allows you to select all elements on the page that match the given selector.

Assuming that the images you are trying to alter have some part of the url in common you can use the *= attribute selector. This means [src*="foo"] will match anything with a src that contains foo anywhere, there are others that might be useful.

Once you have your images you can then just use your function on each of the matched elements.

Oliver Nightingale
  • 1,805
  • 1
  • 17
  • 22
0

Exists the document.getElementByTagName('img') that returns all the <img>s on the page; the attribute src now can be modified with the routine you wrote in your question (obviously you have to check that the URL is of your interest maybe with a regex on the domain part).

gipi
  • 2,432
  • 22
  • 25