Isotope items overlap on initial load - javascript

Using a masonry layout for this site and upon the first load each box overlaps. If you use any of the navigational items to sort or even just stay on "all" they rearrange themselves. Any ideas?

I don't have a reputation of 50 yet so I can't comment, but I wanted to share a couple tips that I stumbled upon in the past as I've used this plugin a lot, and it could help other people.
First off, I definitely use the imageLoaded function as Sarah mentioned, and not the onload. (https://github.com/desandro/imagesloaded)
Tip 1 -
To speed up the isotope plugin getting to work (useful if image sizes are big, or you have a lot of them), you load a placeholder image for each container, then after the imagesloaded plugin fires, you can have the isotope plugin get to work quickly. Then you can swap the real image in with a data- attribute that contains the real src url, just do so using the isotope callback (http://isotope.metafizzy.co/events.html). The only caveot is your images would need to have the same dimensions as the placeholder or the sizing of the containers could get messed up and overlap again.
Tip 2 -
I never actually did this, but one method I was thinking of using was to load the images as a background image of the container, set a height and with for the container (or at least the image part of it), set the images as background-size: cover; and then you don't need to worry about the images loading before the isotope plugin can get to work.

Related

Lazy load for table

Setup:
So, I have a narrow but long table (width:200px, height:2000px ish). This table is wrapped inside another div with fix height (300px) and overflow-y:scroll, giving a fixed height visible area. In the table, there is a lot of cells that are stacked vertically (see image and markup is simple regular table wrapped in a div).
Problem:
Each cell contains images, so if there are lots of cells that the page has to fetch including the images and data before loading the site then it will slow down the site significantly.
Solution Approach:
I am thinking of two approaches.
Apply lazy-load to images only. In this case (for example, from the image above). all three sections (section 1, 2 and 3) will be fully loaded except images that are not visible yet. Although it will minimize the delay if it has to fetch lots of data (for example 100+ cells), then I am not sure if it is the best approach.
Another approach is little bit more complicated but will minimize the delay as much as possible and is really ideal. So, when the page is first loaded, only the section-1 will be visible but section-2 will be also loaded (either with images or lazy-loaded images. Howeversection-3will not be loaded at this point.
When the user scrolls to thesection-2then thesection-3will be automatically loaded but not visible until user scrolls down. Ifsection-3is in the viewpoint, thensection-4` will be loaded but not visible. You get the point.
Any thoughts on it and how-to?
Thanks.
Do both. Make sure your images are always being lazy loaded, and only get the data for the next section when the user is scrolling and gets close to (or at) the bottom.
I use a lazyload image system where I specify my images like this:
<div class="lazyimg" data-src="path/to/image">
</div>
I give .lazyimg a width and height and then, when it scrolls into view, I load data-src and set background-image on the .lazyimg element.
This only works if you can specify a size independent of the actual image size, background-size: cover|contain are your friends here.
EDIT
Alternatively I guess you could load the image and then pop it in the DOM as an img tag, but changing the dimensions of the element could affect any sibling layout which could appear somewhat jarring, even if smoothly animated.
How to do it: onscroll callback.

Change loading of images from top to bottom, to left - right

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.

How can I combine an image slider with scaling images?

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.

Dynamic number of thumbs according to available area in a webpage

I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!

Is there a jQuery gallery/slideshow plugin that matches these criteria?

Can anyone point me in the direction of a jQuery slideshow/gallery plugin that matches these criteria (or can be customized to through setting its options)?
Can be inserted into a div - not a popup display
No border/thumbnails/filenames/buttons - when an element is being displayed, that's all you can see
I need to able able to set a max height and width for the gallery as a percentage of the page dimensions. If an image is being displayed, it needs to be re-sized to fit this whilst maintaining its aspect ratio.
Can display any type of element (although if it can only display images I'm still interested)
I've had a look at some plugins, but I can't find one that is suitable. Is there one? Thanks for reading.
You should look at Thickbox or lightbox.
You want to display it in a popup or not?
You can try Cycle plugin - I've used it many times and it's stable. For resizing the images according to the page's dimensions, you can do that before applying the plugin, either with PHP or jQuery.

Categories