I've tried every single instance of css, javascript and jquery initializing that I can think of to get these images to load like a normal masonry pattern but, they keep stacking vertically.
Most of the time the images stacks properly but, when the page finished loading they stack vertically. one by one.
Keep in mind I am using images not the blue boxes. I think the correct way should be in this codepen.
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.
Basically, on a website I want to display a number of elements in the same space one after the other with a fade effect to transition between them; this would be used to display quotes from customers on a website. I've achieved this before using images and using CSS effects to fade in/out from the first to the last and it looked good, the only issue is the fact that obviously images have sizing issues when it comes to making the site responsive, and the images take up unnecessary space on the server and effect loading times, depending on how many are used. My question is simple to ask if anyone knows of a more efficient way of creating a similar effect that can use plain text instead of images? Possibly by hiding all text bar one line within an element and then fading to the next line? Preferably using only CSS but js answers are welcome too. Thanks in advance!
Also, a website using images for the effect I want to achieve: http://portsmouthtap.co.uk/
I am using this tutorial http://css-tricks.com/seamless-responsive-photo-grid/ to create a grid with lazyload as you can see here in action http://jsfiddle.net/gaz2A/
The problem is that the images are loaded like
1|3|5|7
2|4|6|8
instead of
1|2|3|4
5|6|7|8
and leaves the start screen blank at the most part.
How can I change this ?
*I tried masonry plugin with infinite scroll, however I do not want to rely on static pages, so masonry is not a choice for me.
Images will load in the order they are presented in the DOM.
Either change the DOM representation so that the images are appended into DOM in the correct order (eg. side by side first), or use some JS based preloading to preload the images in the order you want.
I have a bit of a dilemma in the sense that I can't seem to get a jquery image cycler working with scaling images.
What I basically have is a website with a small navigation list at the top, and then full screen images which can be cycled using a control at the bottom of the page. Previously I've used backstretch to get the desired effect for a background image that stretches with the browser window.
I was also hoping on using Jquery Cycle as the plugin to do the image slider (as I've used this countless times before).
The problem is that I need the effect of backstretch (ie. scaling images) but with a slider. I have tried using other plugins for the stretching but most of them only seem to allow the images to be scaled down (if the window shrinks) rather than upwards. I can't use backstretch because it takes up the entire body tag. I only need a container div to contain the stretched images (so I can have the header/navigation sitting at the top without cropping the images).
However I have no idea how to then get this to work with Jquery Cycle.
Has anyone done this before or have any examples of this working?
Thanks
May be late but take a look at http://jongaulin.com/2011/11/17/fullscreen-image-and-content-slider/. I hope this works for you.
I'm trying give users the option of selecting a different homepage by clicking left or right, and having an entirely new page appear. I'm aware of a few jQuery carousels that accomplish this in a purely x axis, or y axis manner, but not a rotation. Ideally the background images will sync up, and the overall effect would be like a globe spinning, with a different set of elements at a different portion of the globe. The elements at each section of the globe still need to be interactive and
Does anyone have any ideas on that?
using jQuery, you should be able to do this using the .slideDown and slideUp methods.
Essentially, when they perform the action that you want to trigger a switch, you add a slideUp() to the 'current' container and do a slideDown() on the next one. The animations will run concurrently.
http://jsfiddle.net/g19fanatic/stLvj/
Not many people here will write you a full solution, but they'll be happy to work through specific issues.
Are these homepages on different domains and/or are they under your control?
How globe-like do you mean? A kind of sphere distortion, or just seamlessly connected at the edges?
How important is the smoothness of the concept?
Off the top of my head, here's how I would (attempt to) do it:
Load the homepages in separate iframes
Stretch the iframe to the window's dimensions
Adapt a carousel script to animate iframes instead of images
Some sort of "prev/next" controls overlaying the iframe. Maybe with z-index.
Check out landing.js file on http://thetruth.com/ (or just let the page timer run to see the carousel)
What you want is basically that but with animations instead of fading the page in/out.
Just add CSS3 transforms to scale and slide instead of the fadein/out when a new page loads.
A polyfill will add the transform capability in JS (see jquery.transform.js, jquery.transition.js by https://github.com/louisremi and Modernizr)