Develop Reference

jQuery search and replace part of img src

On every page I have a featured image that has an image like this:
<img class="js-image-replace" src="http://www.example.com/category_name/320/89645428_89645427.jpg" />
The /320/ is referencing the size of the image, and I want it to be /660/
How would I search for the 320 and replace it with 660?
All my attempts overwrite the entire string.

If you can guarantee that this value would be the first set of integers that you would encounter within the string, then you could use the following expression to replace it :
<script>
$(function(){
$('.js-image-replace').each(function(){
// Get your image src
var source = $(this).attr('src');
// Replace the first set of integers in your URL with 660
$(this).attr('src',source.replace(/\/\d+\//,'/660/'));
});
})
</script>
Otherwise,
Example
You can see a working example of this in action here and output below :

Fetching an image from array of images and redirect it to another page to display

I am working in jsp... I have a page called first.jsp in it I am displaying bunch of images by using following code:
<img src="a\<%out.println(s5[j]);%> " width="200" height="200" onclick="myfunction()" id="abc" />
Here a is folder's name where all images resides. Now s5[j] is array of image files which I am accessing using for loop.. (image tag is within for loop)
Now my question is that I want to access one of the image which user has clicked to select and forward it to second.jsp page which display that particular image.
I want to do this by javascript by onclick() function which I have displayed in code line.. But when I do that by document.getelmentbyid("abc").src it displays only first image regardless of any other images user selcted...
What to do???

If i understood your question that image tag is in a loop. In a page you can not have elements with same id. ID should be unique to the page. You can give a css class to those image and you can try
$('.classname').click(function(){
// this will return you an array . you can check which is clicked here and send it to next page
});

You can't get clicked image src with ID attribute, insted use this.src
var myfunction = function(){
var src = this.src
//rest of the code here
}

Your question is bit of unclear what do you mean by forwarding image to second.jsp page.But have look at below
1 you can't give id to multiple img tags. so just remove id and use class instead
<img src="a\<%out.println(s5[j]);%> " width="200" height="200" onclick="myfunction()" class="abc" />
2 in myFunction() write down :
function myFunction(){
//this refrence to img tag
var img = this;
// do wahtever you want to do
var src = img.src;
}

JS: Getting an image based on the page URL

Please forgive my ignorance; I'm an HTML guy and JS is pretty alien to me. I'm trying to create a function that would display an image based on the page URL.
For example: "page_001-e.html" would display "page_001.jpg"
I've managed to butcher this together so far.
<script type="text/javascript">
document.write("<img src=\"photos/full/"+location.pathname.substring(location.pathname.lastIndexOf("/") + 1)+".jpg"+"\" />");
</script>
Which returns:
<img url="photo_000-e.html.jpg" />
I need to trim -e.html from the result. I'm working in a multilingual site so I can't rely on the -e to be a constant as it's the language indicator.
From Googling, it looks like I could use str.replace or maybe slice but what I don't know is how to use them nor where to go from here.
I'd appreciate any help, or any advice if I'm looking at this the wrong way.

You can get the URL to the image with the following code, assuming there will always be a single dash:
<script type="text/javascript">
var img_url = window.location.href.split("-")[0] + ".jpg";
</script>
Now, you need to figure out where you want to place it. I recommend making an Image object, and then appending it to a particular area in the DOM.
<script type="text/javascript">
// Get the image URL
var img_url = window.location.href.split("-")[0] + ".jpg";
// Create an image (not visible anywhere)
var img = document.createElement("img");
// Set the Image to load from your new URL
img.src = image_url;
// Add it to your HTML
document.getElementById("some_id").appendChild(img);
</script>
<div id="some_id">
</div>
In the above code, the javascript will add the image to the div with ID "some_id".

You can use the below code to trim the value
location.pathname.substring(location.pathname.lastIndexOf("/") + 1).replace(location.pathname.substring(location.pathname.lastIndexOf("/") + 1).lastIndexOf("-"),"")

try with .replace ?
var path = location.pathname.replace('.html','.jpg');
document.write(path);

automatically make an image source (src=" ") a snapshot from its link with HTML, CSS, and/or javascript

In my HTML document I want to create a placeholder for an image but leave the source 'To be determined' so to speak so that when I put a link on the image it will acquire a snapshot from the target website to use as the image source. If you don't quite understand what I'm saying it is as follows:
I want to create a linked Image
<img src="source">
and I want to use javascript to replace the 'source' with a snapshot of the '#' page.
I would like to use this so that on my website I can link to Youtube videos (using the link in the embed codes) and automatically acquire a thumbnail for the link without any work more than inputting the link/URL.
I am not very javascript savy so any help with that portion will be much appreciated, although I am trying to do this with very minimal Javascript if possible. All answers are much appreciated and if any more information is needed just ask.

If you want to put YouTube screenshot I recommend using jQuery with jYouTube and here how I put it together:
JAVASCRIPT:
// Run when page is load
$(function(){
// Find all <a> inside element with youTube class name
$(".youTube a").each(function(){
// Get reference to found <a> link
var lnk = $(this);
// Get YouTube thumb image for <a>'s href attribute
var url = $.jYoutube(lnk.attr("href"));
// Now update inside image's src attribute with thumbs image
lnk.children('img').attr("src", url);
});
});
HTML
<div class="youTube">
<img src="#" /><br />
<img src="#" /><br />
<img src="#" /><br />
</div>
Also I put it in jsfiddle for easy demo: http://jsfiddle.net/snyew/
I hope this helps :-)

It takes an Image object.
yourImg = document.getElementById("image_id");
var newImg = new Image();
newImg.src = //URL of the image to be acquired
yourImg.src = newImg.src;

Assuming you want to do this for every link with just an image as child, you can do:
$('a').each(function() {
if($(this).children('img').length == 1 && $(this).children().length == 1) {
// get snapshot
var snapshotImgURL = getSnapShotOf($(this).attr('href')); // replace this with your AJAX call to get the snapshot
// set it to the image
$(this).children('img').attr('src', snapshotImgURL);
}
});
The above assumes you are ok with using jQuery on the project.

prepend img src url

I'm creating an App using html 5 phonegap and one portion of the App is drawing an rss feed in. One problem i've run into is that the feed has images in it and the url for the images is set to be draw from the server the feed is located on. For example the entire img code is:
<img src="/files/2012/01/brazilsal.jpg" />
Now since those images aren't native it won't work on the app.
So i need to prepend the src to be
<img src="http://management.bu.edu/files/2012/01/brazilsal.jpg" />.
I also need it to not affect any other image on the app.
Any ideas on how to do this in javascript or jquery?

Select the images using the attribute starts with selector [attr^=value], then set it's src value using $.fn.attr.
$('img[src^="/files"]').attr(function(i,src){
return "http://management.bu.edu" + src;
});

You need js-uri.
Simple example:
var rssUri = new URI("http://management.bu.edu/data.rss");
var imgUri = new URI("/files/2012/01/brazilsal.jpg");
var fullImgUri = imgUri.resolve(rssUri);
alert(fullImgUri); // http://management.bu.edu/files/2012/01/brazilsal.jpg