I am new to lightSlider, and not good at JS, it's been years since I've used it, and it's starting to come back to me slowly. Now I remember why I wanted to work on the back-end and not the UI.
So, I am using lightSlider, and we have the basics, and in the HTML code we have this:
Now, in the javascript code we have a loop which gets images like this:
$.each(that.selectedSeries.instance, function (index, instance) {
var url = get url for this image
$("#instances").append($('<li data-thumb="' + url >
<img src="' + theUrl + '" alt="Lights" class="thumbnailimage"/></li>'));
So, we may be loading dozens, maybe even hundreds of images and adding them one at a time to the DOM. The 'li' tags get added as the example shows, but what happens is that the thumbnail images load and load, and it wraps around the screen taking up all available screen space. Then it stops. If I resize the screen, then the slider re-adjusts, and I get the scolling thumbnails.
I tried to refresh the slider after all the images have been loaded, but that did not help. I tried to hide and show the slider after the images have been loaded, but that didn't help either.
The original developer had a basic slider that worked perfectly, and the only reason we chose to go with a new slider is because we wanted images lazy-loaded. I tried looking for a bunch of sliders that would have this coded already. We don't have time to code a solution ourselves, so if we could find a good slider that would be great. if we could make lightSlider work better, we would ....
Thanks!
Related
Overview
So basically I have a carousel that I am populating with images using URLs from a JSON file. I loop through this JSON file and set each URL into a data-src attribute of an image and set it to lazy load in the Owl Carousel. However, I do not know what the URLs provided to me will be, nor do I know if they are broken or not. These are fairly high resolution images, so I would ideally not load them more than once and not load them all in at once.
Problem
However, an issue arises when I occasionally encounter a broken image link when I make a request for the links. I don't load the images prior to setting it in the carousel, so I don't really have a way to check to see if it's valid or not. I am trying to find a way to remove the broken images prior to the lazy load of the image without causing a very long load time or any abnormal movements in the carousel.
What I've tried
Loading the images in prior to loading the element. This causes a significant increase in load time which I would like to avoid if unnecessary.
Using .onerror to remove the images when they are loaded in, but broken. This was fast, but causes weird errors in the movement of the carousel. Also, if I want it to be completely reliable, I have to jump back to the prior slide, and jump forward again. For example:
$('img.owl-lazy').on("error", function () {
var carouselData = carousel.data('owl.carousel');
var index = $(this).parent().index();
carousel.trigger('remove.owl.carousel', carouselData.relative(index))
.trigger('refresh.owl.carousel')
.trigger('prev.owl.carousel')
.trigger('next.owl.carousel');
});
This ends up creating weird animation effects where it looks like its moving backwards to get to the next slide.
Loading in each image and adding them to the carousel as they arrive. This did seem to load the images faster, but ended up creating a stacking effect in the images until they were all loaded, in which they were then placed into the carousel correctly.
Just removing the element associated with that slide using .remove(). This ended up causing weird navigation issues with the carousel.
If anyone has any strategies that they would recommend I would very much appreciate the advice. Also, if you need more code I would be happy to include it.
Edit 1: Example
Here is a Codepen giving an example of the issue I'm coming across. (I replaced my standard ajax call with a bunch of duck pictures, so in a standard scenario I would not know the URLs being provided in advance.) Also, note that the carousel loads in 3 or 4 of the images towards the beginning of the carousel to provide a bit of a buffer. There may be images with broken links included in this initial buffer as well as towards the end.
I have a page with a pdf that gets displayed inside a slider. When it's loaded it's fantastic however it looks a touch ugly until that point as the scroll arrows will be on screen but the dimensions of the slider haven't yet been established so it's all bunched up.
I created a white div that was larger than the pdf and targeted it with a jquery function that after a certain amount of time would hide and reveal the pdf underneath.
Th problem is that some pdf's take longer than others to load. I don't want someone to have to wait 5 seconds when only 1 may be needed and I also don't want someone to wait 5 seconds only to then see the 'mess' that I was trying to hide as that pdf may take longer to load especially taking net speed into account.
What I'd like is either for the function to know when it should hide or a way for the slider to be 'better', possibly already knowing the size of the page, loading the first and then while that it being read the others could be loaded in the background?
Any ideas / help would be appreciated.
Thanks.
I have the following code, it calculates the width of a group of images in a horizontal gallery and applies it to a div so that they all fit:
jQuery(window).load(function() {
var totalwidth=0;
jQuery('#gallery img').each(function(){
totalwidth+= jQuery(this).width() + 15;
});
jQuery('#gallery').width(totalwidth+100);
});
The problem is, in a gallery of 100 images, no images are visible until all images are loaded. I don't know how to get around this, I want the images to load one after the other as they would on any other site.
Can it not calculate the width of all images, then apply that width to the div and load the images so the user can start browsing through them? Or does it need to fully load an image to obtain the width?
Thanks
Without a bit more information on your html elements and exactly what you're trying to achieve it's difficult to give more advice but here's a first stab:
Javascript is client side scripting, essentially if your browser doesn't have the information, javascript doesn't. So, to get around that you could initially hide the images or their container and in your loop show them one by one as the function executes on each image - that way the calculation is done before the image is shown but the user feels like their getting a more instant response.
The browser knows the size of the image, when it's loaded.
You could put them in a hidden div, calculate the sizes and then display them one after another. Maybe this would work out for you.
I'm having a helluva time figuring out how to accomplish this - and I'm surprised it isn't a more common occurance throughout the web, though I digress.
I'm building a small site that I'm trying to keep on a single page - in the end the site will live on a USB, so things should be as self-contained (file wise) as possible. Currently I've got a navigation menu (ie- Page 1, Page 2, Page 3) vertically, and when you select an link from the menu new content for that section comes up. I've got this part down - more or less - thanks to modified Coda-Slider script (See here: http://codysilfies.com/orn/).
The part I can't figure out is that in addition to changing the content when clicking a menu item, I would like to also change the backgroun. So Menu_Item_1 will show BGImage1.jpg, Menu_Item_2 - BGImage2.jpg, and so on. Something pretty much like this: http://brewfestgb.com/#!/merriment - though there are a bunch of additional features on that page...that I can't really figure out how to whittle out. There's got to be a simpler way to do it.
There are a ton of 'click a single link to change an image' tutorials around - but nothing with multiple links. I also tried using the same slider code for the background - but I can't make the image resize to the size of the browser window AND get the slider to work (it needs a set width apparently - which is workable for the content bit, but not when I want the background to resize with the browser).
Any advice...or leads? Seems to me someone should know something. Thanks in advance!
You can change the background-image when the click handler is fired:
$('a.link').click(function(){
// Find the image value
var background = 'BGImage' + $(this).data('bg') + '.jpg';
// Change CSS background-image
$('body').css('background-image',background);
});
Your links would have to look something like this:
Link 1
Link 2
Link 3
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.