I'm trying to keep the filenames but remove the filepaths from the image elements on my page, and I've managed to figure out the following based on what I've already gathered from similar questions.
I'm able to remove just the filepaths, but I can't figure out why the source of the first image is being copied into the other two images.
Here's what I've put together so far
HTML
<img src="/path/to/image.gif" />
<img src="/different/path/to/picture.jpg" />
<img src="another/path/to/graphic.png" />
JS
var abc = $('img').attr('src');
var def = abc.split('/').pop();
$('img').attr('src', def);
RESULT
<img src="image.gif">
<img src="image.gif">
<img src="image.gif">
http://jsfiddle.net/aztdeu0w/
You arent iterating through all the img elements, try the following:
$('img').each(function(){
var imgName = $(this).attr('src').split('/').pop();
$(this).attr('src', imgName);
});
That way you will loop through all the images and replace accordingly the src attribute.
This is how jQuery works. The $ selector grabs an array of items (containing 0-N matched elements) and then applies your operations to those elements. For some operations though- read operations like attr('src') it only makes sense to read a single item, so it reads the first one.
What you want is to iterative over the images and apply your regex to them one at a time. So...
$('img').each(function(index, item){
// Read/write attr here
});
Related
This question already has answers here:
Changing the image source using jQuery
(17 answers)
Closed 4 years ago.
I want to change one letter in the src of the image tag using js or jQuery.
<img src="/media/image_i/ball.png">
<img src="/media/image_i/bat.png">
I want to change that letter i in the src to a number.
Eg.it should look like this -
<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">
EDIT- When i used the solutions everything was working, but it was changing the "src" of all image tags to same as first image, so the second image which is "bat.png" is getting changed to "ball.png", so same image is displaying two times.
Thank you!
You can simply get the src attribute of the images, loop it over and replace the _i with _4 using JQuery. To check the below snippet works, you need to use inspect element of the browser and check the src attribute.
$(document).ready(function(){
$('img').each(function(){
var src = $(this).attr('src');;
$(this).attr('src', src.replace('_i','_4'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">
You can do this job using regex.
$(document).ready(function(){
var src = $('img').attr('src');
var newsrc = src.replace(/_./g, '_4');
$('img').attr('src', newsrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_i/ball.png">
You can develop it further.
For more : https://stackoverflow.com/a/2912904/5792209
First, you'll need to identify the particular img element you need to modify. This can be done in a variety of ways, like giving the img in question an id or a class that is unique. If the image is the only one using the src you've specified in your question, you can use that (and that's what I'm doing in the code that follows).
After getting the proper reference to the element, use the .attr() method to get/set the current src value and the standard String.replace method to swap the values:
var current = $("img[src='/media/image_i/ball.png']");
current.attr("src", current.attr("src").replace("_i", "_4"));
If this is all you need to do, JQuery is overkill. Standard JavaScript is just as simple:
var el= document.querySelector("img[src='/media/image_i/ball.png']");
el.src = el.src.replace("_i", "_4");
Assuming I have a theme switcher, and there're multiple images/icons
<img src="images/icons/icon-1.png">
<img src="images/icons/icon-2.png">
<img src="images/icons/icon-3.png">
<img src="images/icons/icon-4.png">
And also I have another set of these icons with a different color/path
<img src="images/icons/blue/icon-1.png">
<img src="images/icons/blue/icon-2.png">
<img src="images/icons/blue/icon-3.png">
<img src="images/icons/blue/icon-4.png">
the below jQuery code working perfectly when I click to change theme color for 'once'
$('img').attr('src', $('img').attr('src').replace('images/icons', 'images/icons/blue'));
If I clicked again to choose another color say 'red', the path become like this
<img src="images/icons/red/blue/icon-1.png">
while it's supposed to be like this
<img src="images/icons/red/icon-1.png">
how I can make 'replace method' to find & overwrite old path WITHOUT change file name 'icon-1.png' for example, as it's a dynamic icons.
Thanks in advance.
Is the name always the same? in that case you can use the following code
$('img').attr('src', function(i, src){
return 'images/icons/blue/' + src.split("/").pop()
});
You need to loop and replace the src of each element.
$('img').attr('src', function(i, src){
return src.replace('images/icons', 'images/icons/blue')
});
When you use the getter version of .attr() it will return the attribute value of the first element in the matched element set, so the same value will get set for all elements.
Just get the filename from the source first, then rewrite the whole source. Assuming that you send as "theme" to changeTheme function, something from the following values: "images/icons", "images/icons/blue", "images/icons/red", etc. this will do the trick.
function changeTheme(theme) {
var img=$(img);
var filename=img.attr('src').split('/');
filename=filename[filename.length-1];
img.attr('src',theme+"/"+filename);
}
Or if you don't minde storing the file name as a data attribute to the image, you can change the second and third lines of the functions, with something along the lines of:
var filename=img.data("filename"); //assuming you are storing the file name in data-filename attribute
I got a (maybe a bit silly) question.
I'm making a photo gallery using javascript. I need to give every image some information (a id), so i can ask javascript what image is currently open.
Example:
I got a array of some images. Those images have a id 1, 2 and 3. When I'm using the gallery to slide through the images, I want to know what image Im looking at.
It can be done by giving the images alt the information I need. So I can go like;
var id = document.getElementById("image").alt;
But I though this wasn't the way to do it. Is there a simple solution for this problem?
I assume you have multiple <img> elements. You could give each of them the same class value so you can easily get a reference to all of them. You could then use data- attributes for any data you want to assign to them.
<img class="gallery-image" data-id="1" ...
<img class="gallery-image" data-id="2" ...
<img class="gallery-image" data-id="3" ...
JavaScript
var images = document.getElementsByClassName('gallery-image');
for (var i = 0; i < images.length; i++) {
var id = images[i].getAttribute('data-id');
...
}
You can add/remove a custom attribute using jquery to your image to indicate it's active:
$(..).attr('c-active', true);
will result:
<img src=".." c-active/>
Setting it to false will remove that attribute.
Since the attribute isn't a standard html syntax, some framework / browser might not be happy about it.
You can also use jquery data:
$(..).data('c-active',true);
$(..).data('c-active',false);
Or just keep a simple javascript variable to indicate which image id is active (but you will have to update this everytime the image slides)
var activeId = 5;
I'm working on a greasemonkey script to format some raw numbers by thousands. The format function is just fine. Problem is: some numbers are placed on img tags, for instance:
<div class = "opinion">
<img class ="icon-like" alt="img" src="like.png">1148597
<img class="icon-dislike" alt="img" src="dislike.png">600000000
</div>
Since img tags by definition has no child nodes, what is the best way to iterate over the imgs to place the formatted number back on them? If I use .innerHTML, the img tag is removed, displaying just the formatted numbers.
tnx in advance.
Just call nextSibling on the image, then use textContent to actually get the text:
var images = document.querySelectorAll('.opinion img');
Array.prototype.forEach.call(images, function (el) {
var text = el.nextSibling.textContent;
// Use the text associated with the image...
});
Here's the fiddle: http://jsfiddle.net/TYGAq/
Actually what i'm doing is to find the <img> image tags and get its src attribute to change them.
I already got upto this point but the problem more is: To get the edited the html source back (to put into the database.)
To say more brief & clearly, i'm about to grab some Dynamic Html Containers and then change the image paths and save the whole source chunk back.
For brief example if i search inside $(div.container).html() on this:
<div class="container">
<..> .. </..>
<..>
<img src="images/apple.jpg" />
<..>
<img src="images/banana.jpg" />
</..>
</..>
</div>
Firstly, lets say <..> represent any of not previously knowable html tags.
Then i will get:
var dom_contents = $("div.container").html();
Now i got the original html source inside the target container <div>
Then lets say i need to change each <img src with sample/ for its folder. It will then be fruits/apple.jpg and fruits/banana.jpg.. etc.
I still getting some of the stuffs like:
$("div.container).each(function() {
var arr = $(this).find("img");
for (var i=0; i<arr.length; i++) {
var img_src = $(arr[i]).attr("src");
/*
* I NEED TO CHANGE THE IMAGE SRC HERE
*/
}
});
** Finally, i need to save this the whole edited html source into the database. **
So how do i change the <img src='' .. and
How do i get this whole edited html source, back from the jQuery?
Amend the source attribute for each image as follows. You don't need to write the html back. The source html will be updated:
$("div.container").each(function() {
$(this).find("img").each(function() {
$(this).attr("src", "/image/url/file.png");
});
});
To get the html source of the container, use the following:
$("div.container").html();
This will set the attribute:
$(arr[i]).attr("src", mynewsrcvalue);
Once you're done just send the innerHTML (or .html()) back in an AJAX request. But if you want this stuff in a database, why not just manipulate the source on the server side in the first place?