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.
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>