Preloading images in jQuery gallery - javascript

I would like to use this gallery in my website. The only issue is that when clicking next to load the picture, it takes a lot of time. I would like to preload the next two images, when the user clicks the image to enlarge it.
I came across this solution but it's manually coding the image names, but my images are loaded dynamically. Is there any other way I can do it?

Here's a simple-ish solution. You can add a click event to the thumbs so that when one is clicked it preloads the next three images. Some way of preloading the next image once you are in individual image navigation would still have to be worked out though, but hopefully this will hep you get there..
$("#content img").on("click",function(){ // use .live instead if you are using an older version of jQuery
var next = $(this).next();
for (var i = 0; i < 3; i++)
{
var img = new Image();
img.src = next.attr("alt");
next = next.next();
}
});

You can use the solution you mentioned, you just need to extract the src attribute of the gallery's images:
preload($('#gallery-images img').map(function() { return this.src; }));
This will actually call the preload function with the needed array.

I recommend using this gallery - http://dimsemenov.com/plugins/royal-slider/gallery/ it does exactly what you need - preloads nearby images and you may set how much to preload. But note that it's commercial and costs around 10 bucks.

If your images are stored in a mysql you could use the solution you found with a few modifications adding a json encode from the sql query of image names. Passing the information onto jQuery for preloading
require_once('JSON.php');
$json = new Services_JSON();
$out = $json->encode($query)

Related

How to add another image modal (W3S-code)?

I found this code in W3S:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img
I can't figure out how to add another image modal next to the existing image.
And I bet this is easy for people who understand javascript, unfortunately I don't and would be so happy if someone explained.
Thanks!
The problem with the code they supplied is that the JavaScript relies on an image ID, which you can only have one of in the entire document.
By mainly swapping out the;
var img = document.getElementById('myImg');
with;
var imageList = document.querySelectorAll('img');
and looping on the results you will be able to add multiple images.
I updated the code as an example with two images on JSFiddle hopefully you will find that useful.

Image Gallery lightbox

Currently I have thumbnails, when I click the them a large version of the pic appears in the div directly to the right of the thumbnails. What I now want to be able to do is click the larger pic in the div and then trigger a lightbox that shows an even larger version of the pic.
I'm not quite sure how to do what I'm thinking is the solution so I'm gonna try and explain. I'm thinking that when i click the div to trigger the lightbox I want to take the src of the pic being click and then somehow redirect it to another src in my images folder.
Example:
When I click image in div I get the src of pic lets say that the source is:
src="redpic.jpg"
Then lets say in my images folder I have a larger version of the pic selected with the source:
src="redpic_large.jpg"
Would it be possible to manipulate the the src of an first image img src="redpic.jpg" by adding _large to the end and then appending this to my
lightbox???
Everytime I try to do things with my images I always seem to be running into problems.
say the src="redpic.jpg" when I check in the console the src goes to something like //139.0.0.1:56328/img/dotted.jpg and it seems to cause me a lot of problems
Sure, you can get the source of the image like this :
$("img").on("click", function(){
var source = $(this).attr("src");
});
This will give you the complete path (redpic.jpg).
You can use split() to get an array of both parts (the name and the extension)
var parts = source.split(".");
Now, all that you have to do is append the "_large" to the first part of the source, combine them back together and set your other image's source as the newly assembled one.
parts[0] += "_large";
var newSource = parts.join(".");
You pass the period . to the join function so that it puts a period in betwen your elements, instead of the default comma , .
All that's left to do is to use newSource as the source attribute of your other image.
$(".other-image").attr("src", newSource);

Place one image from JavascriptObject to multiple places

Situation: I have a tiny http server that can only handle 4 connections at any given time. When opening a web page, my web browser sends a get request for every image resource asynchronously (tries to open more than 4 connections at the same time). This causes some bad behaviour.
Initial solution: I wrote a JS function that loads the images sequentially and stores them in a dictionary
var loadedImages = {};
like so:
var img = new Image();
img.src = <img_location>;
loadedImages[<img_name>] = img;
After all the images are loaded i try to place them in various places in the DOM. The important part is that i need to place the same picture in multiple places. I do it like this:
//For all the elements that need to have the same image DO:
var img = loadedImages["<img_name>"];
$(this).html(img);
Problem: What happens is that as soon as the code puts the image in the SECOND element, the image gets removed from the FIRST element. When the image gets put in the THIRD element, it gets removed from the SECOND element. So what happens is that basically only the last element contains the image, while all the others are empty.
Question: How can I place the same image from my javascript dictionary (or any other javascript object) on multiple DOM elements?
Edit:When using something like
//For all the elements that need to have the same image DO:
var img = loadedImages["<img_name>"];
$(this).html($(img).clone());
as proposed by Tamil Vendhan and Atif Mohammed Ameenuddin, the image gets placed on all the elements and that is ok, but the browser requests the image from the server every time it comes to that line of code. So it is not really a good solution. Same goes when i use "cloneNode()"
Try using the clone method in jQuery
$(this).html($(img).clone());
Use jQuery.clone:
$(this).html($(img).clone());
Update:
Yes, browser will make the request. But it will use the cached image if it is already loaded.
Check your debugger's net panel to confirm this. You will see (from cache) under Size column.

How to pull images from the DOM in javascript?

If you have looked at Pinterest you will know they have a bookmarklet that the user can press and it loads up more javascript which gathers certain images from the DOM and lets them pin them at the site. I found the gathering images interesting and would like to be able to do that. Where would I be able to look to learn how to gather images from the DOM so that I could let the user do stuff with them? I have done google searches but most are about scraping with php and that doesn't really work if the user is on a page that requires login, for instance.
Am not very sure what you are asking but here is how you get an image using javascript:
var images = document.getElementsByTagName("img");
This will return a nodeList which you can loop through to work on a single image at a time
for (var i=0,l=images.length;i<l;i++){
// your code here
console.log(images[i].src);
}
it is actually quite simple using jquery http://jquery.com/
you can do a simple selector like $('img') .. which will give you a collection of all the images on a page ... from that you can get the source of any of them using $('img').first().attr('src') <=== this will return the source of the first image on the page
hope this helps
Create a bookmarklet. To get all the images on the page do something like this:
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var imageSrc = images[i].src;
// Do something with the image
// ie, add it to the DOM and let them select one.
// It also might be worth looking at the offsetWidth property to only grab larger images
}
Here's the source to the Pinterest bookmarklet for reference

How can I determine img width/height of dynamically loaded images in IE?

My markup is a simple div element with id 'load'. Using jQuery I then load a list of image elements into this div:
$('#load').load('images.html', { }, function() {
$(this).onImagesLoad({
selectorCallback: function() {
....do something....
}
});
});
where images.html is a list like this:
<img src='1.jpg' caption='img 1'>
<img src='2.jpg' caption='img 2'>
...
To ensure that all images are loaded completely, I use the onImagesLoad plugin. This, so far, works just fine on all browsers.
However, on IE8 (and I assume other versions of IE also) when I then iterate over the img elements, I am unable to determine the width/height of the images loaded. The image.context.naturalWidth and naturalHeight attributes don't seem to work.
How do I get a hold of the images' dimension?
Thanks heaps :)
Update
#Simon: That didn't work on IE, and broke the other browsers as well.
#Jenechka: If "imageDomElement" is just another name for the "image" variable in my example above, then it doesn't work. Or what do you mean by that DomElement?
If you haven't resized the image, you could use:
image.width()
and
image.height()
It's been a while but I finally found some time to tinker with this again. The above problems are still there, but here is what I think is going on.
When I load the initial images then yes, the file is loaded and image objects are generated. But it seems that the attributes are not correct yet, and they won't be until the image is actually added to the DOM of the site and rendered. A div/image on hide() on IE has no dimension information whatsoever, on Safari there is some information available. For example, without adding the following div anywhere
var test = $("<div><img src='test.jpg'></div>")
the image contained there has the following information:
width() = 0,
attr("width") = 600,
css("width") = "", and
img[0].clientWidth = 0.
That's on Safari; on IE it's the same except attr("width") = 0 and css("width") = "auto". Now I can't use this, and that's what broke my script and why I posted my initial question. However, the moment I append this div and have it rendered, all the correct values show up in the image object.
I'm writing a little gallery thinghie, which shows whatever images I have in that second .html file that I load; that gallery, however, computes and places the thumbnails, and prepares the images it shows in full resolution. To make this look ok, I basically wanted to create the entire thing hidden, and then fade it in. Alas, it seems that this whole idea won't pan out. A friend suggested to load everything into a tiny iframe off to the left where it's not visible, and work with that. Perhaps that's the way to go.
Another thing I noticed, and that seems to be very closely related to the aforementioned load issue is clone(). It seems that if an image is rendered, a
var newimg = img.clone()
generates the same "empty" image object that I have to deal above. Even when the original image is visible and contains all the right attributes, its clone does not.
Right now I don't see any other way than to rethink and rewrite parts of my gallery.
This is quite similar to the other answers, but I have tested it in IE7, so it might be closer to what you want:
$(document).onImagesLoad({
selectorCallback: function() {
$('img').each(function(){
alert($(this).width()+', '+$(this).height());
});
}
});
See here, this may not be exactly how you were using it, but I'm not familiar with this onImagesLoad thing.
imageDomElement.width
imageDomElement.height
or try
imageDomElement.clientWidth
imageDomElement.clientHeight
If you play with jquery, then image.attr(width) should do the trick
But why not using the document.ready instead, could give you less headeache. .
Use the following code instead
$(document).onImagesLoad({
selectorCallback: function() {
$('img').each(function(){
alert($(this)[0].clientWidth +', '+$(this)[0].clientHeight);
});
}
});
What about?
$("#load img").each(function() {
var img = new Image();
img.src = this.src;
alert(img.height + " x " + img.width);
});

Categories

Resources