I am looking for a javascript function that works based around an array of dynamically generated images. At the moment I have a preview window.
When this is clicked I would like it to hide the preview window and load the first image in the array. I would the like to be able to navigate through the remaining images in the array.
If someone could point me in the right direction or if you know how to put this together it would be much appreciated. Thanks.
You could dynamicly create an image element and keep on using that, something like this? (this is using jQuery).
<button id='nextImage'>Load nect image</button>
<div id='imageContainer'><div id='previewWindow'>Preview</div></div>
//Javascript frome here (JQuery)
var images = Array();
images.push('url/to/image.jpg');
window.lastImage=-1;
$('#previewWindow').click( function() { ('#nextImage').click(); });
$('#nextImage').click( function() {
window.lastImage += 1;
if(typeof(images[window.lastImage]) == 'undefined') { return; } //if endof array
$('#previewWindow').remove(); //better is to only do this once
$('#image').remove(); //Only creating an image once is even better
$('<img />')
.attr('id', 'image')
.attr('src', images[window.lastImage])
.appendTo('#imageContainer');
});
EDIT
Just read you would like to able to click the preview window, added that.
Related
Im adding a small function to my page where when you click a button it adds the corresponding image on the page after a certain class.
I have tried several approaches to this 'basic' problem. i have been working on this problem for two days now with no luck.
After clicking my buttons to get some interaction, I quickly recieve the 'Aw, Snap!' error from google. I know my computer can handle grabbing few images and displaying them on the page.
here is a part of my code thats most likely causing the trouble. Ive tried taking this part out of my code out and it helped. I didnt get the error message anymore, but it obviously stopped performing what i wanted it to.
var elem;
function placeImg(type) {
//creates and sets attributes for an img
elem = document.createElement("img");
elem.setAttribute("src", type+".png");
elem.setAttribute("height", "50");
elem.setAttribute("width", "40");
elem.setAttribute("alt", type +' logo image');
//puts image after the class original, its an input area
//there is only one class tag with the name original
$('#original').after(elem);
}
// when an ids with these names are clicked
$("#arrow, #barber, #gas, #lion, #none").click(function() {
//checks if the current input area has a length of 12 or less
if($('#'+findCurrentEditor()).val().length <=12){
placeImg(this.id); //places the image somewhere
}
});
Id appreciate anyone willing to try and help.
Thanks!
I only help you in creating image with jQuery and add it into a div by clicking a button. The rest, you can figure it out since it just some common logic.
$(".btn").on("click", function() {
var $image = $('<img />').attr({
src: 'https://c7.staticflickr.com/6/5820/30597229222_119e91f7e4_k.jpg',
height: "300",
width: "400"
})
$("div#img-wrapper").html($image);
});
see DEMO
I show links to 240 images on a page. The real images are uploaded by users. I tried to avoid showing an empty image if users did not upload it yet. jQuery did not work for me because of conflicts, so I have to do it in pure JavaScript.
image(s) links:
<img class="photo240" src="http://www.example.com/i/%%GLOBAL__AuthorID%%/p/b01.jpg" onerror="imgError()">
My JavaScript:
function imgError()
{
alert('The image could not be loaded.');
var _aryElm=document.getElementsByTagName('img'); //return an array with every <img> of the page
for( x in _aryElm) {
_elm=_aryElm[x];
_elm.className="photo240off";
}
}
The style photo240off equals to display:none.
Right now, whenever an image misses, all the images are turned to style photo240off and I want only the missing image to be hidden. So there is something wrong with my script.
(the overall script works well, because I get the alert).
Use this to get the image with the error.
Change to:
onerror="imgError(this)"
Then the function can be:
function imgError(el) {
alert('The image could not be loaded.');
el.className = "photo240off";
}
You need to reference the image from your onerror call and change the class only for that one.
Something like this:
HTML
<img class="photo240" src="example.jpg" onerror="imgError(this)">
JS
function imgError(el) {
el.className="photo240off";
}
I build a website and i want to ask the user when each time visit the site, if he want to display images or not. and if not, i want to do not load them and display the page without any img tag
i tried this, but this is not useful because the page will be loaded
function load_img () {
if (!confirm("Do you want to load the images on your site?")) {
var images = document.getElementsByTagName("img");
var l = images.length;
for (var i=0; i<l; i++) {
images[0].parentNode.removeChild(images[0]);
}
}
}
i need some code that don't load any img tag when the page load,
and not a code that hide or remove the images after the page is loaded and the images are displayed
can someone help me please with this javascript code
thank you
You can take a look at lazyload plugin for jQuery. What this plugin does is load the image when the image is on the visible area of the page.
Their idea is to put the original URL to the image in data-original attribute and in the src attribute put some small image e.g. 1x1 transparent gif like this:
<img data-original=“img/example.jpg” src=“img/grey.gif” />
and then you are able to load all the images whenever you want to just by replacing the the src.
this is a simple javascript code that you can try:
window.onload = function() {
if( confirm('Images?') ) {
var img = document.getElementsByTagName('img');
for(i in img) {
var original = img[i].getAttribute('data-original');
if( original.length ) {
img[i].setAttribute('src', original);
}
}
}
}
You could try jquery : $("img").remove();
It would be better to solve this problem from the server side!
Make start page with a link to a version of the page with images and one without the images. You can write a server side script (PHP?) to show or hide the images. Simple removing the images could break the page design. Also removing html image tags does not do the trick. What about background images, some in css files, ...
If you like to do this an on the client side with javascript you have to remove all images and add them manually with javascript.
Using jQuery you can do:
if (confirm('Hide images?'))
{
$('img').remove();
}
Without jQuery you have to use getElemtentsByTag and a loop.
I have a list of objects MyObject and that looks like this:
var Obj1 = {'ImgTop':'500px','ImgLeft':'200px','ImgSrc':'/image1.jpg'}
var Obj2 = {'ImgTop':'300px','ImgLeft':'100px','ImgSrc':'/image2.jpg'}
I load these objects into an array like this:
var AnimCycle = new Array(2);
AnimCycle[0] = Obj1;
AnimCycle[1] = Obj2;
In my code, there are actually 15 objects loaded in the array. I have function that gets called recursively and inside the function, I have this line:
$('#HomeImg').attr('src', AnimCycle[PanelID].ImgSrc);
The problem is that the loading of the image happens when the line is triggered. How can I make the images preload?
Thanks for your suggestions.
Here is a simple script which helps to load images before hand using javascript.
$.each(data, function(index, item) {
var tempImage = new Image();
tempImage.src = item.url;
preloadedImages.push(tempImage);
}
where data as an array of image data
data=
{
name:'NameofImage',
url:'http://www.website.com/image1.jpg',
}
To display the images you can simply add the images to the DOM
$("img").attr({
src: item.src
}).appendTo("#target");
I have a simple jsfiddle which demonstartes the script. It takes data from an ajax request and pre-loads the images. When the user does a mouseover the target it attaches the image to the DOM.
Below is the screenshot showing the images are being loaded at the time the page gets loaded:
this reference link argues that images loaded in div which are hidden might not be pre-loaded in some of the browsers like Opera. I thought haven't verified it.
There might be other ways to load images using css if you do not want to use javascript
Hope this helps
Put all of your images in a hidden div in the html:
<div style="display:none">
<img src="/image1.jpg" />
<img src="/image2.jpg" />
</div>
They will be downloaded when the page loads, but they won't be displayed. Your JavaScript can remain as is.
If you want to do it with script, put this in your ready handler:
var imgPreloader = $("<div>").hide().appendTo("body");
$.each(AnimCycle, function() {
$("<img>").src(this.ImgSrc).appendTo(imgPreloader);
});
i have some javascript in the head of a page that controls an image gallery where the user clicks a thumbnail image and a larger image and some text are revealed in a span. there are 10 of these thumbnails per page and i need to find out how to set the 1st thumbnail's hidden span to "block" on page load.
<script type="text/javascript">
function hideSpan(spanName) {
var obj = document.getElementById(spanName);
obj.style.border="0px";
obj.style.color="#fff";
obj.style.display="none";
obj.style.left="333px";
obj.style.padding="0";
obj.style.position="absolute";
obj.style.top="55px";
obj.style.width="244px";
}
function showSpan(spanName) {
var spanEl, count = 1;
while(spanEl = document.getElementById('link' + count++)){
spanEl.style.display = 'none';
}
var obj = document.getElementById(spanName);
obj.style.display="block";
}
</script>
any help with this is VERY appreciated thank you.
The simple, breezy way is to do this:
<body onload="showSpan('link1');">
The trouble here is that the onload event attached to body that way is executed a little late in the page loading (After all the parts-- including images-- are loaded) so it'll be murder for your dial up users. jQuery implements a much better way:
$(document).ready(function () {
showSpan('link1');
});
If you're not using jQuery, then someone here much wiser than I more than likely knows the correct way to do it using "proper" JavaScript, I don't remember the event name that jQuery uses off the top of my head.