We Keep Coding

Sharepoint image referencing

I can't seem to find the correct encapsulating or prefix syntax for referencing an image located in xxxx site collection.
Right now I have three variations of one image that will be applied to the footer. And these variants are selected based on the site collection, so I can't directly set the image to the masterpage (Unless I want to make three masterpages, which is just overkill for a single image).
I have tried going about this using Javascript to set the source of an img element and CSS to set the url of a container element's background-image. Both are failing me.
In Javascript, I have tried setting the src attribute of my element to:
"<SharePoint:ProjectProperty Property='SiteUrl' runat='server' />/_catalogs/masterpage/Images/myimage.gif;"
"<% $SPUrl:~sitecollection/_catalogs/masterpage/Images/myimage.gif %>";
"~sitecollection/_catalogs/masterpage/Images/myimage.gif";
and repeated the same with CSS for background-image property to a div element. But all I ever get is errors or it doesn't translate the sharepoint code.
Does anyone have any idea what else I can try?

check these URLs for reference -
http://www.vrdmn.com/2011/08/javascript-lmenubaseurl-varaible-for.html
http://johnliu.net/blog/2012/2/3/sharepoint-javascript-current-page-context-info.html
http://blogbaris.blogspot.com/2013/01/getting-web-url-with-sharepoint-2010.html
and try the below method to get the URL.
<%script type="text/javascript">
var url = "<%= SPContext.Current.Site.Url %>";
</script>
Hope this helps!

Where exactly is this image stored? Is it in the default "Images" library of a publishing site? If so, you've got the wrong path. It would be "/PublishingImages/myimage.gif".

Replace images with jQuery in userscript

I'm currently working on a userscript, but I have a problem.
I'm trying to replace an image with another one.
I thought I could do it this way:
$(".subforumicon.ajax_mark_read").each(function() {
$(this).html($(this).html().replace(/http:\/\/x\.hackforums\.net\/images\/modern_pl\/minion.gif/g, "http://megaviews.net/hf/designcostumizer/themes/green/minion.png"));
});
However, this will do nothing. When I paste this code in the javascript console, it just displays all img-tags with this picture:
I don't want to replace everything by using $("body").html(), as this can cause problems with the website (somehow).
Before I started working with jQuery, I used document.body.innerHTML, what caused issues on the page, but with document.getElementById() it worked, so I don't think it was my fault. ;)
I'm quite new to jQuery, so could somebody please explain me why my above code doesn't work?

It does not work because the selected elements are img and there is nothing below the img elements.. as .html() selects or sets the INSIDE content (like innerHTML). not outerHTML so you cannot access the attributes of the img element itself by this mean.
You should work on the img's src attribute as already proposed in other posts.

Use .prop()
you need $('img') as you are changing image src only.
so replace img attribute src only.
why traverse through all full html you need to focus on src property only.
$('img').prop('src', function (_, old_src) {
return old_src.replace(/http:\/\/x\.hackforums\.net\/images\/modern_pl\/minion.gif/g, "http://megaviews.net/hf/designcostumizer/themes/green/minion.png");
});
or better if you want to change all images attribute src
$('img').prop('src','http://x.hackforums.net/images/modern_pl/minion.gif');

javascript or jquery method of getting the source of an image if.. matching a certain pattern

I have a very old site with lots of files, for years it was put together and orgainized by year and in a particular fashion. Well I am upgrading the site. But in one section an "Articles" section I have close to 1,000 files, that I don't want to go through and manually edit one or two images per.
So I am hoping i can figure out a way to match the source tag where when the source is ../imgs/ I can find the actual file name being used and just change the source. My problem is finding the source attribute matching it to the dired and then getting the image name off the end of it. when the full path could be like
../imgs/i2012/image-file.png, ../imgs/i2011/image-file.png, ../imgs/i2010/image-file.png, ../imgs/i20xx/image-file.png "image-file.png" just being an arbitrary example
Its hard to visualize a image tag, so I am adding one here for reference..
<img src="../imgs/i2012/example-image.png" alt="example-image" vspace="5" hspace="5" align="left" />
And to try and re-elaborate, not all images on the site stopped working, and all else, but the ones that have use an image source attribute similar to the above, but the i20xx and file name are different. So. I am trying to figure out how to take that image src tag. Find if it has ../imgs/ in it, and and if it does, I'd like to grab the "example-image.png" from it, so I can apply a new URL overall to the src attribute in the end using JS, which changing it isn't my problem, matching it so I can then get the file, and change the url appending that file to the url is my problem

You can use the attribute starts with selector to match any images with a source starting with
../imgs/, and then iterate over those images, getting the filename into an array:
var images = [];
$('img[src^="../imgs/"]').each(function(i, el) {
images.push( $(el).attr('src').split('/').pop() );
});

find relative path of a image tag javascript

I go through many problems regarding this,But couldn't find clear answer.
I have image tag like this
<img src="images/abc.jpg"/>
But when I called in side javascript,
var imgs = document.getElementsByTagName("img");
alert(imgs[0].src);
it shows the src as "http://localhost/myProject/images/abc.jpg"
But I need only get the relative path ("images/abc.jpg")some how.
Some body help me...

You may try to get the element src attribute value, not the src property:
imgs[0].getAttribute("src"); // "images/abc.jpg"

You can use document.location.href to split out the relative path of the image.

Cloning in-memory image in JavaScript /jQuery

This is probably a really simple one but I couldn't find the answer.
I have the following JavaScript/jQuery code where I am trying to create loading messages:
// preload an image to use for dynamic loading icon whenever requested
$(document).ready(function() {
var loadingIcon = document.createElement('img');
loadingIcon.src = '../images/ajax-loader.gif';
window.loadingIcon = loadingIcon; // chache in global var
});
I wanted to cache the image on load so I'm not requesting it each time I want a loading message. Am I actually acheiving this with the above code?
The idea is that there's a lot of dynamic content on the page, and at any time I might have several different loading icons active.
I add the loading icon wherever with:
$('#myElem').appendChild(window.loadingIcon);
This doesn't actually work though, when I try to show a new loading icon, it just moves the previous one, so I can't have more than one on the page at a time.
I'm assuming I need to clone the element?
I tried to wrap the element in a jQuery object to use clone with $(window.loadingIcon).clone() but that didn't work (the function errored).

You could clone the element, yes. But you can just as well create a new <img> element. If the image src has already been loaded by the browser, the image data will be cached and no further network-load will occur. You don't need to cache the element itself to cache the resource it's pointed at.

Try creating the image as a jQuery object:
var $loadingIcon = $('<img src="../images/ajax-loader.gif" />');
And then you should be able to clone it when you need to use it:
$('#myElem').append( $loadingIcon.clone() );

javascript has a native cloneNode method, at least in IE7, which is all I have at the moment. I'm pretty sure it's cross browser.
this should do what you want:
$('#myElem').appendChild(window.loadingIcon.cloneNode());