Write a <img> element inside of a <li> element with Javascript - javascript

I've been working with Javascript for a little bit now. My code below has various pictures defined as an object. Now I want to put these images as <img> inside <li> tags. However, I am experiencing some difficulty with this.
for (var i = 0; i < pictures.length; i++){
var newImage = document.createElement('img')
newImage.setAttribute('class', 'image-item')
newImage.setAttribute('alt', pictures[i].name)
newImage.src = pictures[i].url
var liItem = document.createElement('li')
liItem.innerHTML = newImage
document.getElementById('pictures').appendChild(liItem)
console.log(liItem)
}
Any idea on how to resolve this? The result has to look like this:
<li><img src="picture1.jpg" alt="loremipsum"></li>
Right now console tells me the following:

Change liItem.innerHTML = newImage to liItem.appendChild(newImage)

The innerHTML property sets or returns the HTML content (inner HTML) of an element. so you should change liItem.innerHTML = newImage to liItem.appendChild(newImage)

Related

Swapping Images (Little Carousel)

I have a problem on swapping two images (from div vignette, to div gallerie).
Situation: I click on a little image, then It swap it place with the big image.
Here is the HTML
<div id="gallerie">
<img id="first" src="http://lorempicsum.com/futurama/620/350/2"><br/>
<div id="vignette">
<img class="second" src="http://lorempicsum.com/futurama/100/100/6">
<img class="second" src="http://lorempicsum.com/futurama/100/100/4">
<img class="second" src="http://lorempicsum.com/futurama/100/100/3">
<img class="second" src="http://lorempicsum.com/simpsons/100/100/2">
<img class="second" src="http://lorempicsum.com/simpsons/100/100/1">
<img class="second" src="http://lorempicsum.com/simpsons/100/100/4">
</div>
</div>
Here is the JavaScript
document.getElementById("vignette").addEventListener('click', changeSrc);
function changeSrc(e) {
var images = document.getElementsByClassName("second").src;
var first = document.getElementById("first").src;
s = e.target.src;
first = s;
console.log("click");
}
For the moment, I don't want to use jQuery.
Solution on some websites use images directly on the JS code with an "if" cascade. I don't think that's efficient for me.
I can propose to use a for loop with the "var image" but I don't know how to use the e.target.
I search to perform my code, so could you explain me why I was wrong?
Here is the JsFiddle
https://jsfiddle.net/ws3f4san/
I can give you more details if you want.
In this block of code, you're not actually setting the source, you're just overwriting the source you've stored as a string in the first variable.
var images = document.getElementsByClassName("second").src;
var first = document.getElementById("first").src;
s = e.target.src;
first = s;
first = s; will have no effect on the page since you're just changing a JS variable, not a dom element.
You need to edit the actual source attribute, you can do so by storing the dom element instead of the initial src value in the first variable, like so:
var images = document.getElementsByClassName("second").src;
var first = document.getElementById("first"); // Store the dom element, not the string value
s = e.target.src;
first.src = s; // Now assign the new value to the src attribute of your stored dom element
Edited having looked more thoroughly at what you're trying to do, you can swap the src's like this:
function changeSrc(e) {
// Get the initial dom element
var mainItem = document.getElementById("first");
// Save it's src before it's changed
var mainItemImage = mainItem.src;
// Get the clicked element
var clickedItem = e.target;
// Set the first image to the second image
mainItem.src = clickedItem.src;
// Set the second image to the first image's original value (which has now changed)
clickedItem.src = mainItemImage;
}

give div image title

is it possible to give a div an Id from image title within. so that any image that is uploaded into an empty div without an id the div.id will copy the images title
using js
example pass OSCAR up to div id
<div id="">
<img src="images/image/image.png" title="OSCAR"/>
</div>
Considering this question is not tagged jQuery and all img should have a title attribute.
http://jsfiddle.net/eC3DE/
var images = document.querySelectorAll('div > img'),
i = 0,
len = images.length,
img;
for (; i < len; i++) {
img = images[i];
img.parentNode.id = img.title;
}
Please note that you will have to run the code everytime an image is added to the DOM. If you are using a modern browser that supports the MutationObserver object, you could use it to detect when new images are added.
Include jQuery and use this code for set div id:
$(function(){
$("div > img[title]").each(function(){
var parent = this.parentNode;
if(!parent.id)parent.id=this.title;//if id is empty, set id from title
})
})
Or you can take div so:
$("img[title='OSCAR']").parent("div");

javascript to enlarge img

I've got some problems while trying to change the size of an image when 'mouseover' occurs.
I know it can be done by css, but I need to realize it by js.
JS Codes:
// id is passed to this function.
...
var content = document.getElementById("content");
var li;
// generate lists of img from db.
li = document.createElement("li");
li.innerHTML = '<img src="' + id + '" />';
content.appendChild(li);
addDomListener(li, 'mouseover', function(){
li.style.height = '600px';
li.style.width = '800px';
});
HTML codes:
<div>
<ul id="content">
</ul>
</div>
seems right, but it doesn't work. I suspect the problem is 'li.style.height'. Could anyone tell me the correct way to realize it? Thx!
You were changing the height and width of li element itself, instead of the img element, for that replace your following code:
li.style.height = '600px';
li.style.width = '800px';
for this one:
li.firstChild.style.height = '600px';
li.firstChild.style.width = '800px';
You are changing the dimensions of the li element, not the image itself, so the behaviour is expected. You need to get a pointer to your image first.
In addition, you should use jQuery for manipulating the DOM and modifying an element's style on a mouse event. It will make your like much easier.
Change the size of the <img>, not of the <li>:
var li = document.createElement("li");
var img = document.createElement("img");
img.src = id;
li.appendChild(img);
content.appendChild(li);
addDomListener(li, 'mouseover', function(){
img.height = '600px';
img.width = '800px';
});

Loop and array issue

Ok, I have a literal arrays where there are some images in it. I have an empty DIV where a FOR LOOP will be carried out to display all the images in the array in the div.
var icons = [
'<img src="images/1.png" width="30" height="30"/>',
'<img src="images/2.png" width="30" height="30"/>',
'<img src="images/3.png" width="30" height="30"/>'
];
var lol = document.getElementById("div");
for (var i=0; i<icons.length; i++) {
lol.innerHTML = icons[i] ;
}
The issue is only the last image is displayed not all...
That is because you are overwriting the previous image with the current one. If you want to append/concat all images, use +=:
lol.innerHTML += icons[i];
A better way to handle this would be to use DOM handling:
var img = document.createElement("img");
img.setAttribute("src", icons[i]);
lol.appendChild(img);
Each time you do
lol.innerHTML = icons[i];
you're replacing the inner HTML of the div with icons[i]. Concatenate all your icon elements, and then set the inner HTML of the div with the result of the concatenation.
your code is overwrite the innerHTML you can append the innerHTML
try this
lol.innerHTML += icons[i];
this above code is append the innerHTML
or in jquery you can use append function
$('#div').append(icons[i]);

find <img> tag inside text string

I have an xml document (from a feed), which I'm extracting values from:
$(feed_data).find("item").each(function() {
if(count < 3) {
//Pull attributes out of the current item. $(this) is the current item.
var title = $(this).find("title").text();
var link = $(this).find("link").text();
var description = $(this).find("description").text();
Now inside "description" i need to get the img element, but this is causing me some problems. "descripttion" is a regular string element and it seems i can't call the ".find()" method on this, so what do i do?
I have tried calling .find():
var img = $(this).find("description").find("img");
But it's a no go. The img is wrapped in a span, but I can't get to this either. Any suggestions? I'd prefer to avoid substrings and regex solutions, but I'm at a loss.
I've also tried turning the "description" string into an xml object like so:
var parser = new DOMParser();
var desc = parser.parseFromString(test,'text/xml');
$(desc).find("img").each(function() {
alert("something here");
});
But that doesn't work either. It seems like it would, but I get a "document not well formed" error.
Try enclosing the contents of the description tag in a dummy div, that seemed to work better for me, and allowed jQuery's .find() to work as expected.
e.g.
$(feed_data).find("item").each(function() {
if(count < 3) {
//Pull attributes out of the current item. $(this) is the current item.
var title = $(this).find("title").text();
var link = $(this).find("link").text();
var description = '<div>' + $(this).find("description").text() + '</div>';
var image = $(description).find('img');
Hi and thanks for the prompt replies. I gave GregL the tick, as I'm sure his solution would have worked, as the principle is the same as what I ended up with. My solution looks like this:
$(feed_data).find("item").each(function() {
if(count < 3) {
//Pull attributes out of the current item. $(this) is the current item.
var title = $(this).find("title").text();
var link = $(this).find("link").text();
var description = $(this).find("description").text();
var thumbnail = "";
var temp_container = $("<div></div>");
temp_container.html(description);
thumbnail = temp_container.find("img:first").attr("src");
So wrap the string in a div, and then use "find()" to get the first img element. I now have the image source, which can be used as needed.
maybe you should try to convert the description text to html tag and then try to traverse it via jquery
$('<div/>').html($(this).find("description").text()).find('img')
note: not tested

Categories