Question

I have asked this question before and attempted to solve it multiple time but without luck.
Being a non-programmer with little experience in javascript,
I’d like to have a bookmarklet or something similar that help me replace all images on the page with the original (full size) image that the link of the image points to. For example, if I click on linked image, it would take me to full size image, but I want that full size image displayed on the page.

Here is an exmple of a site’s code:

<a href="http://www.diyphysics.com/wp-content/uploads/2012/02     Multiplier_schematic.jpg">
<img class="aligncenter wp-image-627" title="Multiplier_schematic" src="http://www.diyphysics.com/wp-content/uploads/2012/02/Multiplier_schematic-1024x205.jpg" alt="Schematic of Dual-Polarity High-Voltage Cockroft-Walton Multiplier by David and Shanni Prutchi" width="614" height="123"/>
</a>

I want it to be:

<img class="aligncenter wp-image-627" title="Multiplier_schematic" src="http://www.diyphysics.com/wp-content/uploads/2012/02/Multiplier_schematic.jpg" alt="Schematic of Dual-Polarity High-Voltage Cockroft-Walton Multiplier by David and Shanni Prutchi"/>

width and height restriction have been removed.

As an example, this site
http://www.pocketmagic.net/?p=802
has a lot of tiny low-resolution images displayed as links, I’d like the bookmarklet to replace all those images by the high-resolution images they are pointed to. This way I can save the page as a whole, or export it…

Thank you !

EDIT:
1. @Frosco, I tried, but I couldn’t go anywhere with my little knowledge in JS.
2. @PhD, it should be a bookmarlet with javascript: protocol. User-oriented, not for web developer.

SOLVED:
Thanks to John, I figured it out,

Here is the JS bookmarklet in case anyone interested:

javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$('a img').each(function(index) {    var currentElement= $(this);    var anchor = currentElement.parent();    var highResSource = anchor.attr("href");    var newImage = "<img src='" + highResSource + "'/>" +"</div>";    anchor.html(newImage);});});

Answer 1

Something like this should get you started:

$('a img').each(function(index) {
    var currentElement= $(this);
    var anchor = currentElement.parent();
    var highResSource = anchor.attr("href");
    var newImage = "<img src='" + highResSource + "'/>";
    anchor.html(newImage);
});​