We Keep Coding

Generating info from an image's name

I've tried searching for an answer around the web but couldn't find any so apologies in advance..
Let's say I have a folder called 'designs' with images
design1_main_front.png
design1_mockup-black.png
design1_mockup-white.png
design2_main_front.png
design2_mockup-black.png
design2_mockup-yellow.png
design2_mockup-red.png
All I want is to retrieve the ones with '_front' one by one and add them to a class
Add the ones with '_front' to an 'img' tag
Add the ones with 'mockup' to a select-options tag in a way that if I click the dropdown and click on a color's name, the img src changes to the designx_mockup-"color".png
(the color name should be retrieved from the image's title)
I hope it was clear enough to understand, I would appreciate your help

First start by adding an image element for both of the front images. Each of the image tags should have an id.
<img src="some_image.jpg" id="image_one">
Then create a select box and set the value for each option to the file name you want
<select onchange="updateImage(this);">
<option value="design1_mockup-black.png" >Black</option>
</select>
The update image function will take in the dom node of the event (the option). You can then get the value and set the image to the new file.

Img file name as title & alt attribute from CSS

I want to know if we can write dynamically ALT & title attribute's value same as the img file name? I think it will possible by using css content property but dont know much about it.
like <img src="file_name.jpg" alt="File Name" title="File Name">
If it is possible then also I want both the attributes having the clean & formatted values like I dont want _ underscore. may be it can be remove as well from CSS?

$('img').attr({ //change multiple attributes
title: $(this).attr('src').replace('_', '').replace('.jpg', ''), //to the src attr without _ and .jpg
alt: $(this).attr('src').replace('_', '').replace('.jpg', '')
});
You can't use content because:
CSS has a property called content. It can only be used with the pseudo
elements :after and :before. It is written like a pseudo selector
(with the colon), but it's called a pseudo element because it's not
actually selecting anything that exists on the page but adding
something new to the page.
This will put text in front or after an element, but does not change it's properties!

Getting data- value from sender in Polymer

I'm trying to create a lightbox component in Polymer, with it's child items being multiple <img> tags. These will have an src, which is a thumbnail and a data-fullimage attribute, which will contain the path to the full size image.
In the Polymer component, I've set the on-click tag on the image content selector, and any Javascript calls using sender.xyz return the content tag, not the image tag, thus not allowing me to retrieve the path to the full image. Is there any way to get the data-fullimage of the image that is clicked, or even the src value if need be?
Polymer Component
imageClick: function(event, detail, sender)
{
console.log(sender);
}
Implementation
<paper-lightbox>
<img src="img/one.png" data-fullimage="img/one-large.png"></img>
<img src="img/two.png" data-fullimage="img/two-large.png"></img>
</paper-lightbox>

No need to put click handlers on the img tags. Moreover this doesn't work, because they are not bound to functions in the paper-lightbox element. What you want is
event.path[0].getAttribute("data-fullimage")
But this only works if your light DOM elements consist of exactly one element. If your light DOM elements are more complex, but it should be possible to click them anywhere, use this expression instead
event.path[[].indexOf.call(event.path, sender) - 1].getAttribute("data-fullimage")

Try this
HTML:
<paper-lightbox>
<img src="img/one.png" on-tap="{{imageTap}}" data-fullimage="img/one-large.png"></img>
<img src="img/two.png" on-tap="{{imageTap}}" data-fullimage="img/two-large.png"></img>
</paper-lightbox>
JS:
imageTap: function(sender){
var fullImage = sender.target.attributes["data-fullimage"];
}

Replace image source with RegExp where another attribute comes first

I have this for exapmple
<img style="height:375; width:500;" src="../img/ris1_1.jpg" ALIGN="center">
<img src="img/ris1_2.jpg" style="height:375; width:500;" ALIGN="center">
I used this RegExp to replace src tag:
(?<=(<img src=['"]))[^"']+
But it finds only imgs where src comes right after
Also I need to replace only relative paths, not absolute. So if I have absolute path in src I must not replace it.
P.S. Yeah! I've done, thanks Shomz for that! Just do this:
tag.replace(/(img[^>]*src=['"])+(?!http:\/\/)\s*([^'"]*)/gi,"$1http://mydomain.com/$2");

If tag is your tag, you can do:
tag.replace(/(img[^>]*src=['"])+(\s*)[^'"]*/g, '$1REPLACED.jpg');
UPDATE
To omit absolute urls, use this regex (img[^>]*src=['"])+(?!http:\/\/)\s*[^'"]*.

Instead of just selecting with the search string only the value of src attribute of an img element, use the capturing search string (<img.*?src=['"])[^"']+ and start the replace string with \1 to keep everything from <img to " or ' on replace.
Of course you could simply use search string (?<=src=['"])[^"']+ if the src attribute is not used in any other element than img.
The suggestion by Tony is also good. With searching for (<img)(.+?)( src=["'][^"']+["']) and using as replace string \1\3\2 it is possible to first standardize all img elements by moving src attribute to first position after <img.

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');