I have a file called src.js which has all the scripts for my html page.
now on my html page I am using this :
<script language="javascript" src="src.js">
</script>
to call the .js file to use it.
I am not sure how to set up the images links in the .js file or how to call them in the .html file
I need a simple answer please :)
You need to have a placeholder for your images in the HTML otherwise you would need to dynamically modify the HTML DOM structure.
As for using variables for image links, refer to the code below which pre-loads the images.
if (document.images)
{
preload_image_object = new Image();
// set image url
image_url = new Array();
image_url[0] = "http://mydomain.com/image0.gif";
image_url[1] = "http://mydomain.com/image1.gif";
image_url[2] = "http://mydomain.com/image2.gif";
image_url[3] = "http://mydomain.com/image3.gif";
var i = 0;
for(i=0; i<=3; i++)
preload_image_object.src = image_url[i];
}
The browser must have the document.images attribute defined.
<div id="_images"></div>
<script>
var images = { // images with properties
image1 : {url:'http://image1',property:'value'},
image2 : {url:'http://image2',props:[],else:'val'}
}
for(var i in images){
var image = new Image();
image.src = images[i].url;
// put image anywhere you want
document.getElementById('_images').appendChild(image)
}
</script>
Related
Good day! So I have been practising web development again and found Laravel to be fun to learn (and I'm enjoying it a lot) and I have decided to recreate my portfolio website with it to practice it.
So the problem is this:
I am trying to display a list of images from a folder called designImages and this will be updated every time I have a good UI design. so it makes sense to make it dynamically ready so I do not have to manually add <img> tags for every image and make my process a lot longer. I plan to just make a js file that will only be adjusted once depending on how many images are currently in the folder.
But the problem is when I display the images on my blade page, it shows the broken image icon
view it here
EDIT: When I try to inspect element, the image is not displaying and instead, shows 404 error. mywebsite.test/designImages/design-1 for example.
The code on my js file is this
const imageContainer = document.querySelector(".imageContainer");
for (let i = 1; i < 14; i++) {
const img = document.createElement("img");
img.src = "{{ asset('designImages/design-${i}.png') }}";
imageContainer.append(img);
}
and the code for the master file (app.blade.php) for my index.blade.php is:
<body>
#yield('content-5')
#stack('head')
</body>
and the index.blade.php code is this:
#section('content-5')
<div class="imageContainer">
<!-- images will come here -->
</div>
#endsection
#push('head')
<script src="{{ asset('js/imageGrid.js')}}"></script>
#endpush
Any help or tips will be greatly appreciated :)
-----EDIT-----
Fixed it! :) the updated javascript code is this:
const templateURL = "storage/designImages/design-?.png";
const imageContainer = document.querySelector(".imageContainer");
for (let i = 1; i < 14; i++) {
const img = document.createElement("img");
img.src = templateURL.replace("?", i);
imageContainer.append(img);
}
fixed it using this code:
const templateURL = "storage/designImages/design-?.png";
const imageContainer = document.querySelector(".imageContainer");
for (let i = 1; i < 14; i++) {
const img = document.createElement("img");
img.src = templateURL.replace("?", i);
imageContainer.append(img);
}
I would like display some images inside html page(offLine) using JS.
I have a folder with an index.html and a folder called "images" with JPG inside.
If I have 10 images, display 10, if I have 3 display 3 inside html
Is it possible do this?
I tried lots of tutorials but unsuccessfully.
Regards, Fernando.
I think you can't browse read file from js on your computer. However you can browse file using FileReader API of HTML5.
It's not possible to list directory contents by opening a local page in the browser. However if these files were named following a predictable pattern then you could try to display them by "guessing" the file names.
For example assuming images are named 1.jpg, 2.jpg etc. The script will try to append images 1...N as long as N.jpg exists and will terminate upon the first file name that fails to load.
var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
appendImage();
}
var tryLoadImage = function( index ){
tempImg.src = 'images/' + index + '.jpg';
}
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
document.body.appendChild( img )
tryLoadImage( index++ )
}
tryLoadImage( index );
You can load images with javascript, it will depending on how you name the files.
// create image
var img = new Image();
// add src attribute
img.src = "images/" + filename;
// when image is loaded, add it to my div
img.addEventListener("load", function(){
document.getElementById("mydiv").appendChild(this);
});
You can achieve this using ajax like in this jQuery example:
var dir = "Src/themes/base/images/";
var fileextension = ".png";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function (data) {
//List all .png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='" + dir + filename + "'>");
});
}
});
taken from:
How to load all the images from one of my folder into my web page, using Jquery/Javascript
I am trying to make a image slide show and I am passing urls of the images through a List in a Model.
List<string>
Onload I want to assign these URL values to JavaScript variables.
var image1=new Image()
var image2=new Image()
var image3=new Image()
My question is, how can I assign this list of URLs to the above variables, normally I can do this:
image1.src="value.jpg"
How can assign the value using Razor within JavaScript?
This razor code will create an image object with the index for each element in your List of strings and will set its src property.
<script>
#for (var idx = 1; idx <= Model.ListOfImages.Length; ++ i) {
<text>
var image#(idx) = new Image();
image#(idx).src = '#Model.ListOfImages[idx]';
</text>
}
</script>
Of course you will want to wrap it in the script tag. The output will be JavaScript that looks something like this:
<script>
var image1 = new Image();
image1 = 'image1.jpeg';
var image2 = new Image();
image2 = 'image1.jpeg';
var image3 = new Image();
image3 = 'image1.jpeg';
</script>
A couple of ways to solve this:
Use Razor to generate JavaScript
<script type="text/javascript">
var images = [], image;
#foreach (var image in ListOfImages)
{
image = new Image();
image.src = #image.url;
images.push(image);
}
</script>
Use Razor to generate HTML, then have JavaScript use the HTML for the slideshow
<div class="slideshow">
<ol>
#foreach (var image in ListOfImages)
{
<li><img src="#image.url"></li>
}
</ol>
Prev
Next
</div>
<script type="text/javascript">
// some imaginary jQuery plugin to create a slideshow
$(".slideshow").slideshow();
</script>
I'm partial to solution #2. I try to avoid having a server side templating language generate code in more than one language if at all possible. In solution #2, Razor is just generating HTML.
I am calling this function on add button from my PHTML. On click of add button I want to show image of selected fruit in <div>.
function moveoutid()
{
var sda = document.getElementById('availableFruits');
var len = sda.length;
var sda1 = document.getElementById('orderFruits');
for(var j=0; j<len; j++)
{
if(sda[j].selected)
{
alert(baseUrl+"/img/"+sda.options[j].value+".jpg");
var img1=document.createElement('img').src=baseUrl+"/img/"+sda.options[j].value+".jpg";
var di=document.getElementById('d');
di.appendChild(img1);
var tmp = sda.options[j].text;
var tmp1 = sda.options[j].value;
sda.remove(j);
j--;
var y=document.createElement('option');
y.text=tmp1;
try
{
sda1.add(y,null);
}
catch(ex)
{
sda1.add(y);
}
}
}
}
In this code I have created <img> tag and passing image path to src, to show selected image on web page. It is correctly taking path of images but it is not appending <img> tag and not displaying image on web page.
Your problem is, most likely, in this line:
var img1=document.createElement('img').src=baseUrl+"/img/"+sda.options[j].value+".jpg";
This creates an element, assigns the src property to it and then assigns the value of this src property to variable img1. Instead, you should do this in two lines:
var img1 = document.createElement('img');
img1.src = baseUrl+"/img/"+sda.options[j].value+".jpg";
Is it possible to assign a Javascript image object directly to the DOM? Every example I've seen has the image object being loaded and then the same file name assigned to an HTML element and my understanding is that the actual image data is coming from the browser cache in the filing system.
I want to guarantee that the image is loaded so I want to load it into a Javascript image object have the data in memory and then add it directly to the page.
Is this possible?
Cheers, Ian.
You can create the image element and append it directly to the DOM once it has loaded:
var image = new Image();
image.onload = function(){
document.body.appendChild(image);
};
image.src = 'http://www.google.com/logos/2011/guitar11-hp-sprite.png';
example: http://jsfiddle.net/H2k5W/3/
See:
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
Reference:
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
if (document.images) {
var preload_image_object = new Image();
var image_urls = new Array();
image_urls[0] = "http://mydomain.com/image0.gif";
image_urls[1] = "http://mydomain.com/image1.gif";
image_urls[2] = "http://mydomain.com/image2.gif";
image_urls[3] = "http://mydomain.com/image3.gif";
var i = 0;
for(image_url in image_urls) {
preload_image_object.src = image_url;
}
}