Load more

­

The Load More feature allows you to display just a few photos at first. Then the rest of the photos can load in batches. You decide what the trigger is: click or scroll. You probably use this everyday, as Google image search and Facebook already use this approach. The benefit is in page load speed while the visitors can still see see all pictures if they like. As a fine detail, you can actually go through all images in the lightbox, regardless their thumbnails' visibility. Load more is best suited for sources that are often updated such as Facebook timeline or a Flickr photostream. Simply because the new content is loaded first as it appears on top.

Load more on click

Just click the button to fetch more content. The remaining amount is clearly shown.

The above example uses the following, generated shortcode (how to use):
[$justified_image_grid preset=5 row_height=120 height_deviation=40 lightbox=magnific mobile_lightbox=magnific limit=0 last_row=flexible disable_cropping=yes load_more=click load_more_limit=20 flickr_photostream=9563763@N08 flickr_caching=10080]

The other types of Load more

Just in case "click" is too old school, you have other options for the Load more trigger.
Each of these have their best usage scenarios and you are sure to find what works best on your site.

Infinite scroll

Activated by scrolling by mouse wheel or touch. It's very similar to lazy loading. When the gallery's bottom is about to show up, more images are added to the grid, until everything is shown. Keep in mind that your ability to reach content below the gallery may become limited if you have a large amount of content.

Check out the separate demo for Infinite scroll!

Hybrid Load more: click first, then infinite scroll

Hybrid load more is a good mix of both worlds, in case you are torn between multiple clicks versus the easy lazy way of infinite scroll - you don't need to choose! Only one click is required then the rest is loaded with infinite scroll. This is especially useful when showing multiple galleries below each other. Furthermore, content below the grid is easily reachable. Only those galleries will expand in which your visitor is actually interested.

Once Load more: one click loads all remaining

The most basic type of Load more requires you to click the button just one time to see the entire gallery. A good way to expand a teaser or a small set of images. The "Load more limit" setting will act as a cut-off point, only influencing how much content you see upon page load. The Load more button will go away for good and your content will take its place.

What options are available for Load more?

Probably the most interesting is that you can choose a different behavior for mobile devices to ensure a solid experience. There are multiple ways you can customize the Load more button to meet your needs.

Basic settings

  • Load a different amount initially than in subsequent loads.
  • Choose if you need Load more on mobile, and which type.
  • The button shows how much content is remaining.
  • Customize or translate the text on the button.
  • Use or omit the counter in your custom button-text.
  • Incomplete rows can be hidden until you reach the last one.

Tweaky settings

  • Offset: where the infinite scroll (lazy load) triggers, so you don't hit the end of the grid all the time.
  • Customize the Load more button via CSS.
  • Auto-shrink the Load more button to the length of its text.
  • Included dark and light CSS skins for the button.

How do the settings look like?