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.
Related
I'm trying to replace the image source, but only if the image corresponds to the existing class "overview-icon--downtime". Then there's another class, "overview-icon--degraded", which I want to replace it with (or simply putting an image address, which might prove easier).
To be replaced:
<div class="page__overview">
<img class="page__overview-icon overview-icon--downtime" src="downtime_large.png">
</div>
To be replaced with:
<div class="page__overview">
<img class="page__overview-icon page__overview-icon--degraded" src="degraded_large.png">
</div>
I was thinking of this, but I'm not sure I'm heading in the right direction.
document.querySelector(".page__overview-icon overview-icon--downtime").setAttribute("img", "page__overview-icon page__overview-icon--degraded");
The image loads with the page, so I'll also need to use the AJAX at the end.
Any ideas here please? Thanks a lot in advance! :3
You are heading in the right direction.
Attributes are the things inside of the tags. In this instance, "class" and "src" are attributes of the img element.
document.querySelector will select the img element, you then need to call setAttribute('class', new class value), and setAttribute('src', new src value)
I am trying to create an animal's database, for an animal shelter. So far, what I have is a set of tables with the animal's species and when the user chooses the species it shows all animals available. Now I want the user to click on the animal chosen and more details about that animal, such has, location, gender, size, will show. Problem is, I know very little about Javascript/ HTML and I am encountering lots of issues. One of them is showing the image in this third screen of more details. What I have so far with HTML is:
<div class="row" style="text-align: center">
<img src="foto_animal" height="180">
</div>
"foto_animal" is the column in table "Animal" that holds the Image URL. Is there anything I should change with Javascript or is it just a HTML problem? Thanks in advance.
EDIT
I manage to get the URL, this is the script.js file
var populateContact = function(data) {
$('#contact_photo').text(data.foto_animal);
This is the index.html
<h2><span id="contact_photo"></h2>
It shows the URL, but now I want it to be recognize as an image.
EDIT : To have your users download the as requested i nthe comments, try adding a tag and setting it's download property.
Here is an example.
Via html, when referencing an image in src property of the <img> tag, add the file extension of your image file
assuming your foto_animal is a jpeg file and in the same location with the html files,
<img id='myImg' src="foto_animal.jpg" height=180px>
Via javascript,
You simply call the element using document.getElementByID and set the .src property
document.getElementById("myImg").src = "foto_animal.jpg";
Via jquery,
Simply use the .attr property to set src of your tag ID
$("#myImg").attr('src', 'foto_animal.jpg');
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() );
});
holder.js
I want to dynamically add a placeholder image to my page.
Inserting it like so doesn't work:
$('<li>',{class:'file-item'})
.append($('<img>',{'data-src':'holder.js/150x150'}))
.append($('<span>',{class:'file-name'}).text(file.name))
.appendTo('#file-list');
Because the holder script has already ran and isn't searching for new elements.
We can, however, run it again manually:
Holder.run()
But then it will scan all the elements that are already added.
So...is there way I can get holder.js to create and give me back a DOM element so I can add it manually without re-running the whole thing?
Pass a Node as the images property to Holder.run and you'll be able to run Holder on any individual image. Holder itself doesn't create a DOM element, it just changes the src value.
Code:
var image = $("<img>").attr({
"data-src": "holder.js/300x200"
})
Holder.run({
images: image[0]
});
image.appendTo("body");
Live example here: http://jsfiddle.net/imsky/p3DMa/
I have made my own drop down here: http://jsfiddle.net/Hunter4854/GJVjT/ I am trying to add a image to the left of the words PS3. I need to add separate images to the left of each <li>. I have tried everything i know, but can not find out the problem?
You rebuilt the custom list html in this code:
$('#test_select option').each(function(i){
html.push('<li rel="'+$(this).val() +'">'+$(this).text()+'</li>');
});
$('.custom-select ul').html(html.join(''))
so whatever predefined HTML you put was replaced by it.
To fix, you do one of the following:
you allow the predefined HTML to show
or create the image in the code