Use javascript replace to change image url on page load - javascript

I have a page in a CMS that I can only edit parts of. I want to change the images it displays to larger ones. The system automatically created multiple sizes and stores them so all I would need to do is change it from /location/image-1.jpg to /location/image-2.jpg
I tried the following code unsuccessfully
<body onload="replaceScript();">
<script type="text/javascript">
function replaceScript() {
var toReplace = '-1.jpg';
var replaceWith ='-2.jpg';
document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}
</script>
Any ideas?

My guess is you've got a series of images that you want changed and its only changing one for you. A general innerHTML replace probably isn't the best way to go about changing image sources.
Try something like this:
function replaceScript() {
var images = document.querySelectorAll('img');
for(var i = 0, l = images.length; i < l; i++){
images[i].src = images[i].src.replace("-1.jpg", "-2.jpg");
}
}

Related

loads specific url's & clicks a button automatically

I'm new to javascript & i want to do this simple thing.
I want to make a script which goes to coded url's & clicks on a button each time the script is executed.
Suppose,i have these links -
I want the javascript to to go on these links after running it & trigger another small js for both links after they are fully loaded.
Here's what i tried
var linkArray = ('https://facebook.com/user1','https://facebook.com/user2');
for (var i = 0; i < linkArray.length; i++) { window.open({
url: linkArray[i]
});
}
linkArray.onload="blabla();"
function blabla()
{
var inputs = document.getElementsByClassName('_42ft _4jy0 _63_s _4jy4 _517h _51sy');for(var i=1; i<inputs.length;i++) {inputs[i].click();}
}
Can anyone please help?
Thanks in advance! :-)
Please change to this, this would works
var linkarray = ('https://facebook.com/user1', 'https://facebook.com/user2');
var linkArray = [https://facebook.com/user1,https://facebook.com/user2];
isn't valid, please set your array like this:
var linkArray = ['https://facebook.com/user1', 'https://facebook.com/user2'];

Finding the image count in a web page

I have a JS code, that gets called in different web pages of my clients. I want to fetch the total number of images. I want only those images that are visible to the user and not just any other images. This is my JS code
function getImageCount(topWindow) {
try {
var images = topWindow.document.getElementsByTagName('img');
var imageCount;
for (var i=0, length = images.length; i < length; i++) {
var image = images[i];
var clientWidth = image.clientWidth;
if(clientWidth && clientWidth > 1) {
var src = image.getAttribute('src');
if(src) {
src = src.toLowerCase();
if(src.indexOf('.jpg') !== -1 ||
src.indexOf('.jpeg') !== -1 ||
src.indexOf('.gif') !== -1 ||
src.indexOf('png') !== -1) {
imageCount = imageCount ? ++imageCount : 1;
}
}
}
}
return imageCount;
} catch (e) {
processError("getImageCount", e);
}
}
var imageCount = getImageCount(top);
I have been trying a lot to stabilize this code so that it works correctly across all different types of web pages. Basically what I want is a generic code that captures image counts correctly.
Eg:
My code gives image count as 1 for http://www.msn.com/en-us/news/other/one-free-agent-every-nfl-team-should-sign-this-offseason/ss-AAmLlC0#image
What I want is a GENERIC CODE that gives me a correct image count irrespective of where it runs. Can some one give me some detailed solutions.
I would appreciate a lot.
To simplt count all the images (<img>) on the page:
document.images.length
And to count all the "visible" images (ones with width and height):
[...document.images].filter(img => img.clientWidth && img.clientHeight).length
This will give you the number of images on the page. This does not include CSS images. since your code didn't either then I take it you want <img> ones
I didn't quite understand the meaning of irrespective of where it runs.. can you elaborate?
// Extract images
websiteImages = document.getElementsByTagName('img');
for (url in websiteImages)
console.log(websiteImages.length);
//Extract inbound and outbound links
Links = document.querySelectorAll('a');
for (link in Links)
console.log(Links[link].href);
Paste this Scripts into your console of browser
Check on the Below Link/ any Link you like
(https://news.google.com/topstories?hl=en-IN&gl=IN&ceid=IN:en&gl=IN&ceid=IN:en)
The above-mentioned script will give all the Images present in the webpages.
And the second script will give all the number of Inbound and Outbound/exit links
Just apply Some filter as per your use case and you will be good to go.
Use this simple approach for links
$$('a').length
To count the number of images on a webpage use the below code:
$$('img').length

Replace relative URL from Facebook Feed

I have a page that is pulling in a Facebook RSS feed. Unfortunately, the feed contains both relative and absolute paths. I want to give users the ability to click on any given story and read it on Facebook. One of the generated links is relative, so what should be:
http://www.facebook.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1
is converted to
http://www.shannonbaumsigns.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1&relevant_count=1
I tried the following:
<script type="text/javascript">
window.onload = function() {
var aEls = document.getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.href = aEl.href.replace("/ShannonBaumGraphics/photos/","http://www.facebook.com/ShannonBaumGraphics/photos/");
}
};
</script>
But ended up with
http://www.shannonbaumsigns.comhttp//www.facebook.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1&relevant_count=1
I know it's something simple, but I'm not strong enough with Javascript to pinpoint the problem.
you can simply assigning new url.try using this :
aEl.href ="http://www.facebook.com/ShannonBaumGraphics/photos/";
aaEl.href = aEl.href.replace('http://www.shannonbaumsigns.com/ShannonBaumGraphics/photos/','http://www.facebook.com/ShannonBaumGraphics/photos/');
// http://www.facebook.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1&relevant_count=1
Thanks for your help. It pointed me in the right direction. Part of the problem is that the site uses multiple domain names (I should have mentioned that). So I added some PHP to grab the domain name to search for the address, and then replaced it with the Facebook link.
Here's what it looks like now:
<script type="text/javascript">
window.onload = function() {
var aEls = document.getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.href = aEl.href.replace("<?php echo $_SERVER['SERVER_NAME']; ?>/ShannonBaumGraphics/photos/","www.facebook.com/ShannonBaumGraphics/photos/");
}
};
</script>
Maybe there are better approaches, but this seems to work.

Creating a very simple game in JS

I'm currently making a game in JS, and I faced a problem.
I got an 2D array that stores an image, now I want some random pic to be changed every 1 second, everything is working but, I don't know how I can change the picture.
Do I have to print all the other images if I want to change the random cell in the array?
I'm almost sure that there's another way to change it without doing it.
I'll be glad for help, if anyone needs other explanation I'll be glad to.
You can try using something like this in your header. It should call changePic() every second, incrementing through your picture array, and setting the new picture on an image element.
//know your array sizes
var max_x = picArr.length;
var max_y = picArr[0].length;
var current_x = 0;
var current_y = 0;
function changePic()
{
if(current_y == max_y-1)
{
if(current_x == max_x-1)
{
current_x = 0;
current_y = 0;
}
else
{
current_x++;
current_y = 0;
}
}
else
current_y++;
var pic = picArr[current_x][current_y];
getElementById('randomImage').setAttribute('src', pic);
window.setTimeout(changePic, 1000);
}
setTimeout(changePic, 1000);
https://developer.mozilla.org/en/DOM/window.setTimeout
I would start out with something like
var ImageOne = new Image();
ImageOne.src = "UrlToImage";
And so on just to make sure all the images are loaded when the game starts
Thereafter I would be using jQuery:
$("#IdOfImg").attr("src", ImageOne);
You might want to try using a css class for the elements with a background image rather dan adding images to the DOM. I think a css class for back.png and one for the 1.png should do the trick.
Toggle the classes on the td elements every second.
Hope this helps.

JavaScript Timed Image Swap Need Help

So in my script I have...
<script type="text/javascript">
var images = new Array();
var numImages = 3;
var index = 0;
function setupSwapper() {
for (i = 0; i < numImages; i++) {
images[i] = new Image(266, 217);
images[i].src = "images/image" + i + ".png";
}
setTimeout("swapImage()", 5000);
}
function swapImage() {
if (index >= numImages) {
index = 0;
}
document.getElementById('myImage').src = images[index].src
index++;
setTimeout("swapImage()", 5000);
}
</script>
And then I have <body onload="setupSwapper()"> to setup the body.
and <img width=266 height=217 id="myImage" name="myImage" src="images/image0.png"></img> elsewhere in my document.
Only the initial image (image0.png) is showing up. I'm probably blind from having looked at this so long. The images are not swapping.
Use FireBug or a similar tool for debugging what's going on:
Does the img DOM element in fact gets its src changed ?
Do you see any network activity trying to load the images ? does it succeed ?
Set up breakpoints in your code and see what happens in the debugger
BTW - You can use setInterval instead of setTimeout - it sets a repeating timer
You're missing the () in the definition of "setupSwapper".
Also it's setTimeout, not setTimeOut.
Finally, get rid of the "type" attribute on your <script> tag.
You might want to start "index" at 1 instead of 0.
The way to go:
setTimeout(swapImage, 5000);
[FORGET] the type attribute has nothing to do with it
[FORGET] the index has nothing to do with it
[OPTIONAL] remove "name" attribute from the image (useless)
[OPTIONAL] close image tags like <img />
Note: 2-5 is about correctness. Only the first one is important to get it work.
Get Firebug, use it's debugger to put breakpoints inside swapImage to see if it is hit after the timeout. Another way is to use the console.* apis to see what's happening(e.g. console.log).

Categories