CODEWITHSUNDEEP
javascripthtml
4578learner
4578learner

Reputation: 1

Display the users wanted instagram photo from URL

I'm trying to make a website/page where the user can display their wanted Instagram photo from a URL, I'm still learning, and I already have a little start here:

HTML:

<img id="myImage" />
<input id="imageUrl" type="text" value="https://www.instagram.com/p/CUVZs0YP6kl/" placeholder="placeholder">
<button id="loadButton">Load image</button>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#loadButton').on('click',function(){
            $("#loadButton")[0].play();
        });
        $('#loadButton')[0].click();

    });
</script>

JavaScript:

const imageFrame = document.getElementById('myImage');
const imageUrlInput = document.getElementById('imageUrl');
const loadButton = document.getElementById('loadButton');

loadButton.addEventListener('click', loadImage);

function loadImage() {
    imageFrame.src = imageUrlInput.value;
}

But it doesn't display the image, and I want to hide the "https://www.instagram.com/p/" so the user would only have to type the "CUVZs0YP6kl" part of the link in the box to get the image displayed on the page; I don't know how I would do that in JavaScript, so I need some help.

Upvotes: 0

Views: 251

Answers (1)

Parking Master
Parking Master

Reputation: 626

Add a string:

const imageFrame = document.getElementById('myImage');
const imageUrlInput = document.getElementById('imageUrl');
const loadButton = document.getElementById('loadButton');

loadButton.addEventListener('click', loadImage);

function loadImage() {
    let instaUrl = "https://www.instagram.com/p/" + imageUrlInput.value + "/";
    imageFrame.src = instaUrl;
}
<img id="myImage" src="" alt="Image will show here..." /><br>
<input id="imageUrl" type="text" value="CUVZs0YP6kl" placeholder="URL">
<button id="loadButton">Load image</button>

Also, https:​//www.instagram.com/p/CUVZs0YP6kl/ is an HTML page displaying the image.
Not a valid image MIME type.

If you want to show the page, you can use iframe, object or embed:

const imageFrame = document.getElementById('myImage');
const imageUrlInput = document.getElementById('imageUrl');
const loadButton = document.getElementById('loadButton');

loadButton.addEventListener('click', loadImage);

function loadImage() {
    let instaUrl = "https://www.instagram.com/p/" + imageUrlInput.value + "/";
    imageFrame.src = instaUrl;
}
<iframe id="myImage" src=""></iframe><br>
<input id="imageUrl" type="text" value="CUVZs0YP6kl" placeholder="URL">
<button id="loadButton">Load image</button>

Or object:

const imageFrame = document.getElementById('myImage');
const imageUrlInput = document.getElementById('imageUrl');
const loadButton = document.getElementById('loadButton');

loadButton.addEventListener('click', loadImage);

function loadImage() {
    let instaUrl = "https://www.instagram.com/p/" + imageUrlInput.value + "/";
    imageFrame.data = instaUrl;
}
<object id="myImage" type="text/html" data=""></object><br>
<input id="imageUrl" type="text" value="CUVZs0YP6kl" placeholder="URL">
<button id="loadButton">Load image</button>

Upvotes: 1

Related Questions