add a image from a url to a gallery html using js

Question

Hi i am new to javascript and have looked but can't seem to solve my problem. I am looking to ask the user for a url to an image and add it to a gallery made using html and another js document. The gallery is fine just need to figure out a way to add a new img tag with the url inside it.

This is what i have so far:

function getUrl() {
var url = prompt('Enter image URL');

if (url) { // Do string and URL validation here and also for image type
    return url;
} else {
    return getUrl();
}`.slider image.src = getUrl();`



    <form action="" method="post" class="contact" id="contact" onsubmit="return getUrl()">
    <label for="name">Add Image url:</label>
        <input type="submit" value="submit">
    </form>

<div class="slider">
    <img src="gallery/img1.jpg" alt="image 1" />
    <img src="gallery/img2.jpg" alt="image 2" />
    <img src="gallery/img3.jpg" alt="image 3" />
    <img id="image"/>

    <button class="prev">&#60;</button>
    <button class="next">&#62;</button>
 </div>

If you can help in anyway that would be great, thanks.

edit: My question was i wanted to add img tags to a gallery already in the html code but by not changing the src of any photos already there and just adding the tag each time a photo was added with the url of the photo.

Possible duplicate of [JavaScript change img src attribute without jQuery](http://stackoverflow.com/questions/9731728/javascript-change-img-src-attribute-without-jquery) — Esteban Rincon, Dec 04 '16 at 17:17

score 1 · Accepted Answer · answered Dec 04 '16 at 17:13

Create a new image tag and insert before the prev button into the slider by

    var slider = document.getElementsByClassName("slider")[0];
      slider.insertBefore(img,document.getElementsByClassName("prev")[0]);

Note: Javascript doesn't requires a form submit to execute. we can make it ru on any event like onclick onmouseover

DEMO:-

function getUrl() {
var url = prompt('Enter image URL');

if (url) { // Do string and URL validation here and also for image type
    var img = document.createElement("img");
    img.src = url;

    var slider = document.getElementsByClassName("slider")[0];
      slider.insertBefore(img,document.getElementsByClassName("prev")[0]);
} else {
    return getUrl();
}//`.slider image.src = getUrl();`
}

    <label for="name">Add Image url:</label>
        <input type="submit" value="submit" onclick="getUrl();">

<div class="slider">
    <img src="https://www.gravatar.com/avatar/69cf2e00c81bc89731652db2b9ca1dbf?s=32&d=identicon&r=PG&f=1" alt="image 1" />
    <img src="https://www.gravatar.com/avatar/69cf2e00c81bc89731652db2b9ca1dbf?s=32&d=identicon&r=PG&f=1" alt="image 2" />
    <img src="https://www.gravatar.com/avatar/69cf2e00c81bc89731652db2b9ca1dbf?s=32&d=identicon&r=PG&f=1" alt="image 3" />
    <img id="image"/>

    <button class="prev">&#60;</button>
    <button class="next">&#62;</button>
 </div>

It worked man thanks very much, not alone that but i understand what you did also so thanks for that. — John OKeeffe, Dec 04 '16 at 17:22

score 0 · Answer 2 · answered Dec 04 '16 at 16:34

0

Is this what you mean?

Var img = Document.createElement("img");
Img.src = 'your url';

Var div = document.getElementById("imagesDiv");
Div.appendChild(img);

answered Dec 04 '16 at 16:34

Dani Sh90

176
1
9

Thanks for the reply i am looking to add a image into the slider div below the images already there and putting the src= "imputed url". I am new to this so this is why i am finding it hard to do it. Thanks again. – John OKeeffe Dec 04 '16 at 16:47
Sorry I might still be not understanding what you want, but in case you want to append the url to an image that's already under the three images, just use : var img = document.getElementById("image"); Img.src = "your url"; @JohnOKeeffe – Dani Sh90 Dec 04 '16 at 16:53

score 0 · Answer 3 · answered Dec 04 '16 at 17:32

Try this:

$('.slider').append(
                     $('<img></img>').
                     attr('src', yourUrl).
                     attr('alt', yourAlt)
                    );

Just don't forget add link to jQuery in the header of your html page, like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

add a image from a url to a gallery html using js

3 Answers3