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 — Esteban Rincon
– Esteban Rincon, Commented Dec 4, 2016 at 17:17

jafarbtech · Accepted Answer · 2016-12-04 17:13:10Z

1

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>

answered Dec 4, 2016 at 17:13

jafarbtech

7,0551 gold badge41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John OKeeffe Over a year ago

It worked man thanks very much, not alone that but i understand what you did also so thanks for that.

Dani Sh90 · Accepted Answer · 2016-12-04 16:34:31Z

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 4, 2016 at 16:34

Dani Sh90

1761 silver badge9 bronze badges

2 Comments

John OKeeffe Over a year ago

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.

Dani Sh90 Over a year ago

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

Leonid Z · Accepted Answer · 2016-12-04 17:32:51Z

0

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>

answered Dec 4, 2016 at 17:32

Leonid Z

1617 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related