Tame chaos and transform your content. If you want to showcase your content and create an engaging experience for your website visitors, this article will help you do just that.

In this post, I’ll review the 16 best premium WordPress gallery plugins available on CodeCanyon. I’ll also point out five of the best free plugins. I’ve broken the list down by gallery type, so read on to find out more about why these are some of the best WordPress gallery plugins around. There are plugins for video and multimedia, images, and WordPress grids, and how they can support and elevate your WordPress site.

The Best WordPress Gallery Plugins on CodeCanyon for 2022

CodeCanyon is a marketplace for WordPress plugins and other scripts. You’ll find great feature-rich WordPress gallery plugins on the platform. New plugins are regularly added to the market. Don’t forget to take a look at some of the bestsellers.

 

Any plugin that you buy from CodeCanyon will give you free updates for life. You also get six months of support to get up and running as quickly as possible.

Video and Multimedia Galleries

1. Video WordPress Gallery Plugin

Create the best WordPress video gallery with this plugin. Customize the look and function of your player with a user-friendly, drag-and-drop admin panel. You can also use the Design Centre to generate a brand-compatible skin for your video gallery.

This WordPress gallery plugin allows you to feature single videos or mix and match video sources, galleries, and playlists. It’s fully responsive, with subtitle support and AdSense compatibility. This is a solid choice for a dedicated WordPress video gallery.

User bcasal says:

“This plugin and its addon were exactly what we needed to be able to feature 360º videos in our website. Strongly recommend it!”

2. Essential Grid Gallery

Are you looking for flexibility? Then the Essential WordPress Gallery plugin is worth checking out. It allows you to build grid-style galleries using images, video, and audio files from a wide variety of sources, both self-hosted and social.

Use the template library to create a fully responsive and mobile-optimized gallery. You can also connect with Instagram, YouTube, Twitter, and more to stream social media content. Dozens of fully customizable skins and animation options give you total control of the look and feel of your gallery.

User iamacreator says:

“Plugin works well all around. Lots of customization options and easy to use. Customer support is excellent.”

3. Media Grid Responsive Portfolio

Media Grid is a WordPress gallery plugin that allows for endless creativity. This plugin offers ten preset styles for one-click setup. You also get the ability to design your own layouts and mix media types for a truly unique WordPress gallery.

Every element of this gallery can be customized, a true strength of this plugin. Mobile-optimized mode ensures that your content will display perfectly across platforms. Media Grid offers a full media support package—simply add your content.

User minimal_works says:

“Media Grid is one of the best plugins I have ever bought. The functionality and code quality is simply stunning.”

4. Unite Gallery

The WordPress Unite Gallery plugin is an all-in-one media solution. It’s for people who want to create responsive galleries that can display both images and videos. You can use this plugin to quickly create a lot of beautiful fully responsive and mobile-friendly galleries.

The plugin provides ten different layout options. This WordPress gallery also comes with a built-in lightbox. It supports touch-based gestures and zooming capability. You can add videos to the library from four different sources, namely YouTube, Vimeo, Wistia, and native HTML5.

The theme of the gallery can be customized quite easily without tinkering with the main CSS file. There are tons of customization options available to make it blend easily with your website.

Image Galleries

5. Justified Image Grid

Create a compelling narrative with this photo gallery WordPress plugin. The Justified Image Grid plugin organizes your images into a horizontal photo grid to create an instant visual story. This WordPress image gallery plugin is fully compatible with your existing image sources. Load content from Facebook and Flickr, or use it to completely revitalize your NextGEN galleries.

This mobile-friendly WordPress image gallery also includes special effects and lightbox options. It ensures that your images retain their original aspect ratio, so they display exactly as you intended.

User RamTheSunlover says:

“Works beautifully and is highly customizable with good documentation. Well worth the money.”

6. Global Photo Gallery WordPress Plugin

The Global WordPress image gallery offers impressive flexibility. You get multiple gallery layouts, ten lightboxes, and a whole lot more. This plugin offers one-click setup with eight preset styles. The automatic cache update will populate your galleries. You can also use drag-and-drop sorting and thumbnail cropping management in the visual gallery builder.

This photo gallery WordPress plugin comes with a fully featured image slider with responsive sizing. If that wasn’t enough, this WordPress gallery has a customizable image carousel and lightbox support. Select from infinite scroll or standard pagination options. Global Gallery also offers:

• • grayscale effect

 

• • blur effect

 

• • image watermarking

 

• • right-click protection

 

User davidmfraser says:

“Fantastic gallery addon, in my opinion the best one you can get.”

7. Flat 360° Panoramic Image Viewer

Bring your panoramic photos to life with this WordPress image gallery. This plugin uses WordPress to add hotspots and scrolling to static panoramic photos. The result? An ultra-realistic, immersive 360° viewing experience. Using a shortcode, you can add one or multiple Flat Panoramic Viewers to any page, post, or widget on your site.

This WordPress image gallery plugin requires no coding knowledge for beginners to get started. But it also includes advanced features for users familiar with HTML, JavaScript, and CSS.

User trentontws says:

“Simple, effective, and well-laid-out plugin. Highly recommend—the interactive 360º is key to my site design and this delivered it perfectly!”

8. Go Portfolio WordPress Image Gallery

The Go Portfolio WordPress image gallery plugin is perfect for creating portfolios with photos that show off your work or products.

You can place all the media elements either in a responsive grid or inside a horizontal slider layout with up to ten columns. The sizing and spacing options for the layout are very flexible. You’ll have full control over the vertical and horizontal space between different elements.

The photo gallery WordPress plugin can showcase images in the JPG, PNG, or GIF format. It can show videos from YouTube, Vimeo, Dailymotion, and Metacafe. You can even add audio clips to your portfolio from websites like SoundCloud, Mixcloud, or Beatport.

Go supports all major browsers, and you can easily import or export different settings to get up and running quickly. It’s one of the best WordPress image gallery plugins to have on your site.

WordPress Flipbook Galleries

9. WordPress Flipbook

Revolutionize online books with this 3D WordPress book theme. You can easily use this plugin to create a standard flipbook. Or, using CSS layers, you can insert content like video, hover, and navigation effects, and JavaScript directly into your book.

Choose from fully customizable skin options to display your content in a realistic 3D flipbook. Pages render in the background, ensuring a smooth reading experience. Smart pans display your flipbook in the most comfortable orientation for reading on any device.

User MichaelNickel says:

“This is a truly amazing flipbook plugin, easy to use, with great value for the money! Highly recommended.”

10. Real3D Flipbook

Create 3D flipbooks to display directly on your website using the Real3D WordPress gallery plugin. Ultra-realistic features like page bending, shiny pages, lights, and shadows are available to you. Just upload your PDF or images and copy and paste the shortcode.

There are automatic fallbacks that ensure your flipbook will display correctly on all platforms. This WordPress gallery plugin comes with all the basic and premium features you need, like:

• • interactive pages

 

• • lightbox

 

• • single or double-page view

 

• • and more

 

Real3D flipbook supports unlimited books and pages. It ensures smooth loading by rendering pages one by one, so visitors can start reading instantly.

User rubikmm says:

“The plugin is great, very easy to use, very powerful to customize, and the support stands at same level. Keep up the good work.”

11. Diamond Flipbook WordPress Gallery Plugin

The Diamond WordPress flipbook plugin allows you to create flipbooks from a variety of source files. Automatically convert PDFs, or upload multiple JPGs at the same time to create a flipbook. You can also manually add pages, or simply enter text directly into the WYSIWYG editor. Then, either add a shortcode for the generated flipbook to your website or post an image link that will launch a lightbox with one click.

This WordPress gallery plugin also offers YouTube support. Fully responsive and with no Flash needed, this plugin works reliably on both mobile and desktop.

User josephdelaubriere says:

“Great plugin and very simple to use.”

WordPress Grid Galleries

12. Auto Photo Albums

Auto Photo Albums is a cool grid-based WordPress gallery plugin. The beauty of this choice is that you don’t have to add your images to your pages manually. The plugin scans for image files and loads them into a responsive grid gallery.

This photo gallery WordPress plugin accepts images of any dimension. It also has a ton of features, including:

• • lightbox with slideshow

 

• • CSS3 effects

 

• • direction aware hovering

 

• • infinite levels of albums

 

It’s one of the top options if you’re looking for the best WordPress album gallery plugin for your needs.

13. The Grid

The Grid is a WordPress image and media gallery plugin that allows you to display any post type in a fully customizable grid system. Think standard, audio, video, social stream, gallery, link, or quote. With a powerful admin panel, the possibilities are unlimited with this grid gallery. In this fully responsive plugin, the loading speed is optimized by a lightweight jQuery script. A custom cache system also boosts your gallery’s performance.

This is one of the most advanced WordPress gallery plugins thanks to the built-in lightbox and one-click import and export. Try it out! You can easily integrate it with any WordPress theme or custom style.

User dehlia13300 says:

“The most flexible grid plugin I have ever used. I absolutely love it! It’s  really easy to use and the documentation is very helpful. A must have  for any blog, website, and e-commerce. Highly recommend The Grid for those who want a responsive WordPress plugin that delivers what it promises.”

14. Smart Grid

Turn any WordPress gallery shortcode into a responsive and touch-friendly grid gallery. This plugin allows you to create dynamic image grids with lightboxes, CSS2 animations, and YouTube and Vimeo support. Simply wrap any existing

 shortcode tag with [smart-grid]. Then open and close tags to introduce features like infinite scroll, hover effects, and more to your WordPress galleries.

With a 4.7 star rating, this is one of the best WordPress gallery plugins around. User rhondagreene says:

“A great way to dress up the native WordPress gallery! Lots of features and options, and it was easy to incorporate into my existing setup.”

Miscellaneous WordPress Gallery Plugins

15. Multipurpose Before After Slider

This Multipurpose Before After slider is not exactly useful for showing dozens of images in a gallery. However, it does provide a cool way of showing the difference between the before and after images of different people and products.

There are a bunch of examples where this could be used. For example, a personal trainer can show the physical transformation of different people who joined a fitness class. An interior design company could use it to showcase the before and after versions of a room or building that they renovated.

You can create as many sliders as you want with this plugin. All the sliders are fully responsive and come with touch and swipe gestures enabled for ease of use on mobile devices. You can also add multiple “Before” vs. “After” image sets in the same slider. Users will be able to navigate through them using the buttons available at the bottom.

16. Photo Contest WordPress Plugin

This one is actually a photo gallery WordPress plugin. However, it comes with additional built-in functionality that sets it apart from the rest. It includes a photo contest feature that makes it easy to run photography contests on your website. The entries submitted by different participants are shown in a gallery with one-, two-, three-, or four-column layouts.

Users can click on any image to give it a rating from 1 to 10. You can also set up the contest so that each user has a single vote for their favorite image. And of course you can integrate different social media buttons on the rating page. Third-party commenting plugins also work here.

The WordPress gallery plugin allows you to run multiple contests at the same time. It is also Gutenberg-ready and has a responsive design. You have complete control over who can vote for the images. This includes everyone, registered users, or selected registered users.

You can organize the submissions under different categories. All the data about the votes and images can also be exported easily for analysis.

Try out the different demos of the plugin to see if its functionality fits your needs.

Free WordPress Gallery Plugins

In this section, I’ll highlight five free WordPress gallery plugins. I’d like to mention that free plugins are limited when compared to premium WordPress gallery plugins from CodeCanyon. But sometimes a free plugin is all you need.

1. NextGEN Gallery

The NextGen WordPress gallery plugin provides three main gallery styles. The admin back-end also has features for uploading and managing images.

2. 10Web Photo Gallery

The 10Web Photo Gallery plugin will help you quickly create responsive, mobile-friendly galleries. It also provides multiple styles for viewing the galleries or individual images. This free WordPress gallery has a built-in lightbox, and you can create an unlimited number of galleries.

3. FooGallery Image Gallery

The FooGallery plugin makes it very easy for you to add and manage galleries in your WordPress website. It is responsive and supports lazy loading of images.

4. Video Gallery: YouTube Gallery

This Video Gallery plugin allows you to quickly add a video gallery to your website. The galleries are fully responsive and touch-friendly. The WordPress gallery has a built-in lightbox and nine different layouts.

5. Embed Plus for YouTube

The Embed Plus WordPress plugin can show videos from a playlist or channel in a gallery-based layout on your website. This can be very helpful if you have a YouTube channel that complements the content of your website.

Choosing the Best WordPress Gallery Plugin for Your Project in 2022

As I mentioned earlier, there are a lot of WordPress gallery plugins available on CodeCanyon. It can be a bit difficult to pick the best plugin among them because all of them offer the basic functionality that you require in a gallery plugin.

In this section, I will recommend some of these plugins that are well suited for some specific use cases.

The Video Gallery WordPress plugin would probably be your best bet if you want to primarily show video content on your website. It offers unmatched features when it comes to showcasing different videos. This includes support for the Vimeo and YouTube API to provide additional functionality. The plugin also supports deep linking and can read .srt files to show subtitles on different videos.

 

The Real3D FlipBook WordPress plugin would be a great choice for people who want to recreate the experience of reading a physical book. The UI looks more polished compared to other plugins and you can add any kind of HTML content over various pages to make them interactive.

 

The Essential Grid Gallery plugin is for people who want to create a bunch of different gallery layouts using a mix of different content types. You just have to choose the source for the gallery content and then select a layout and skin. The plugin will take care of everything else. It offers a nice set of animations, and the gallery looks great on devices of all screen sizes.

 

Conclusion

There are some WordPress gallery plugins in this roundup that have certainly caught my eye. While some of them excel with CSS3 effects, there were plenty that showed their power on the back-end as well.

You can find more great WordPress gallery plugins on CodeCanyon.

Didn’t find exactly what you were looking for? Maybe an Envato Tuts+ WordPress tutorial or course could get you started towards developing something new.

How about displaying your documents and files and making them easily accessible to visitors to your website?

A WordPress Google Drive plugin serves multiple purposes. You can use it to back up your files or to display selected files to visitors on your website.

If you have a WordPress website, Google Drive plugins are the fastest and most reliable solution. They are user-friendly, easy to install, and highly customizable.

On CodeCanyon, you’ll find some of the best Google Drive plugins for WordPress.

Bestselling Google Drive Plugins for WordPress on CodeCanyon

If you sell digital products, then grab one of these Google Drive plugins and save all your files in one accessible location.

1. Bestselling: Use-Your-Drive: Google Drive Plugin for WordPress

If you’re looking for a comprehensive, all-round backup solution for your document files, photos, images, and media that can also display your files beautifully, then you should consider Use-Your-Drive.

This innovative, user-friendly Google Drive plugin for WordPress comes with tons of features including a file browser, audio player, video player, the ability to search files by name and content, and integration with WooCommerce.

It has an organized admin panel, with easy one-click setup and updates. It also comes with a powerful shortcode builder that allows you to integrate Google Drive into your pages and posts without coding skills. The shortcode builder has preconfigured modes for easy setup.

2. Out-of-the-Box: Dropbox Plugin for WordPress

If you primarily use Dropbox, the Out-of-the-Box plugin is your best choice. This Dropbox integration plugin is user-friendly, highly customizable, innovative, and displays your Dropbox files in an attractive format.

No coding skills are required to set it up. You can link your Dropbox account with just one click. From there, you can start adding shortcodes on your pages and posts.

3. BeDrive: File Sharing and Cloud Storage

Let’s say you’re interested in creating your own self-hosted file sharing and hosting website. You can earn money with a built-in premium subscription system, create different plans for users to subscribe to, and control how much storage space each plan has.

You can do this in minutes, without any knowledge of coding or server management. You just need BeDrive. BeDrive is lightweight, with lightning-fast performance and page load time out of the box. It is fully responsive and will work on desktop, mobile, tablet, and other devices.

You can easily store user upload files on many different cloud services and providers, including Amazon S3, DigitalOcean, and Dropbox storage.

BeDrive is fully translation-ready and can be easily translated to any language from the admin area.

4. Embed Any Document Plus

Embed Any Document Plus lets you display (embed) your documents easily in your WordPress website, pages and posts. Your visitors don’t need to install any additional software to view the contents. Neither do they need additional browser plugins like Flash or Acrobat Reader.

With just one click, you can easily embed your Google Docs files and documents hosted in Google Drive, Dropbox, and Box.com to your WordPress website.

5. Share-one-Drive: OneDrive Plugin for WordPress

If you use OneDrive or OneDrive Business to share documents with your clients, you won’t go wrong with Share-one-Drive. It provides OneDrive integration for WordPress and displays all your files in a beautiful way.

It is user-friendly, highly customizable, innovative, and doesn’t require coding skills. It displays great on every device: smartphone, tablets, or desktop. Your clients can preview, download, and even create their own private folders.

Adding Share-one-Drive has never been easier. Its powerful shortcode builder allows you to rapidly and effortlessly integrate your Google Drive into your pages and posts. It loads lightning-fast!

6. WP Cloud Saver: WordPress File Sharing Plugin

WP Cloud Saver helps you share files stored in your Dropbox, Google Drive, or other cloud services. The plugin has WooCommerce hooks to automatically integrate Google Drive or Dropbox save buttons on your order page. This way, you can easily sell downloadable products. It is translation-ready and comes with a handy shortcode generator tool.

7. Super Backup and Clone: Migrate for WordPress

The Super Backup and Clone plugin is a trustworthy backup solution that allows you to back up all your WordPress and non-WordPress files immediately to your own cloud, or to the same server, for safe-keeping and easy restoration.

You can choose your backup schedule—hourly, daily, or weekly—and it will do everything automatically. You have access to the backup logs, so you can keep track of what’s going on.

In addition, you can run straight cloud migration from multisite to multisite, multisite to single site, and single site to multisite.

This versatile plugin links to cloud destinations like Google Drive, Amazon S3, OneDrive, Dropbox, Rackspace, and more.

8. Bulletproof YouTube Videos

If for some reason YouTube suspends your account, you’ll lose all your videos. However, you can easily recover them if they are backed up. Bulletproof YouTube Videos allows you to back up your YouTube videos to cloud storage solutions like Google Drive, Dropbox FTP, OneDrive, and Amazon S3.

9. FileTrip

FileTrip is a WordPress plugin that’s flexible, scalable, and very easy to use. It lets you upload and forward files instantly to Dropbox, WordPress, FTP, and Google Drive.

This Google Drive plugin for WordPress is responsive and can work in multiple browsers elegantly. Users can upload their files from mobile devices including Android, iPhone, and iPad.

FileTrip easily integrates with most famous form builders including Caldera Forms, Ninja Forms, Gravity Forms, Contact Form 7, and more. It makes building custom forms to collect information bonded with digital files a lot easier.

In addition, FileTrip can use a Dropbox channel to automatically create Dropbox sub-folders corresponding to the uploaders.

And one cool detail: you can send media files concurrently to any cloud destination: Google Drive, Dropbox, and FTP.

10. CloudFiles: WordPress Media Library Folders Cloud

CloudFiles is an advanced WordPress library management plugin that allows you to create, rename, delete, and move folders to neatly organize thousands of uploaded files into folders. It has an embedder and viewer that works with .pdf, .ppt, .pptx, .doc, .docx, .xls, .xlsx, and more.

It works well with list mode, and you can even upload directly to cloud subdirectories. It also works with Elementor, WPBakery (Visual Composer), and Gutenberg.

There are also features to synchronize photos, videos, and documents from Google Drive, OneDrive, and Dropbox to save hosting storage space.

It is translation-ready and compatible with WooCommerce and other third-party plugins.

11. Lets-Box: Box Plugin for WordPress

Lets-Box is a Box integration plugin for WordPress that displays your Box files in a beautiful way. Your content will look great on both desktop and mobile sites, whether it is a file browser, gallery, upload box, or media player.

The plugin perfectly integrates into the WordPress user system, allowing you to select which user roles should have the permission to view, download, upload, rename, and delete files or folders.

You can easily and securely share documents via Box with your clients. The user folders feature allows your clients to preview, download, and upload documents to their own private folder. You can link your WordPress users manually to their own folder or let the plugin handle this for you.

Lets-Box integrates nicely into WooCommerce, and it allows you to select your digital products from Box.

12. WordPress Cloud Manager

With WordPress Cloud Manager, you can access your cloud drives like Google Drive, Dropbox, and S3 directly from your WordPress dashboard and share the folders with your users in the front-end.

You can allow your users to upload files, set file size and file type restrictions, and assign different users to have different permissions.

Your users can view and/or edit documents, images, video, and audio files. The plugin comes with a built-in text editor, image editor, and office document viewer. You can also choose to get notified via email when a user uploads a file to their folder.

13. Leopard: WordPress Offload Media

This plugin copies files from your WordPress media library to Amazon S3, Wasabi, Google Cloud, DigitalOcean Spaces, or Bunny CDN storage and rewrites URLs to the server of the files from that same storage provider, or from the CDN of your choice.

3 Free Google Drive Plugins for WordPress

It’s difficult to find completely free versions of Google Drive plugins. Free versions have enough functionality to get you started and going up to a certain point. Then, as your needs expand, you have to switch to premium versions.

The plugins below hold back some features for their premium versions, but the free versions of the plugins have enough to get you started.

1. Google Drive Embedder

Through a popup box, the author can access their Google Drive and select documents to embed directly into their posts or pages. In addition, you can easily display native Google docs and other file types such as PDFs, Word docs, videos, images, and zip files.

2. UpdraftPlus WordPress Backup Plugin

The free version of UpdraftPlus is fully functional. You can back up your WordPress files and database, restore from backup, schedule backups, backup to remote storage, get basic email reporting, and browse backup content in WordPress.

You can also back up to Dropbox, Google Drive, FTP, S3, Rackspace, and email.

3. Image & Video Gallery from Google Drive

Using this plugin is very straightforward. Once the plugin is installed and configured, you can add a Google Drive gallery to any page or post. You can select any folder in your drive or a shared drive, and the plugin will convert that into a gallery, displaying any photos or videos on a page or a post on your website.

Any folders and their subfolders will also be displayed in the gallery as nested galleries.

Get Your Google Drive Plugin Now!

Google Drive plugins make it easy to back up and display your website content. CodeCanyon offers some of the best Google Drive plugins available that will help your business succeed.

Free Course on Essential WordPress Plugins

Essential WordPress Plugins is a free online course here on Envato Tuts+ that has invaluable information on the best free plugins for WordPress. These are the plugins you’ll find yourself installing over and over on every site you create.

One of the great things about using WordPress is the vibrant plugin ecosystem. There are many thousands of WordPress plugins that promise to improve every aspect of your site. With the right plugins, your WordPress site will run more smoothly, get more visitors, and be less likely to face problems.

In this free course, Envato Tuts+ instructor Rachel McCollin will teach you how to install and configure free WordPress plugins for backup, security, caching, and SEO. You’ll see how WordPress can be made far more powerful and secure by the addition of a few key plugins.

A “Load Extra” button provides extra content material to a web page when clicked by a person. This can be a widespread strategy for blogs because it permits the person to determine how and when data is displayed.

Right here’s a take a look at the ultimate product we’ll work on at present—scroll to the underside of the pen and click on the button so as to add extra content material to the web page:

1. Card Container and Button HTML

We’ll begin by inserting the container for our playing cards on the web page. We’ll be including the playing cards to the container utilizing JavaScript so the div will probably be empty.

<div id="card-container"></div>

Our implementation features a “load extra” button and in addition shows the present variety of playing cards being proven and the whole variety of playing cards obtainable. We’ll embody these options in a card-actions div. The content material in card-count and card-total will probably be added with JavaScript.

<div class="card-actions">
  <button id="load-more">Load extra</button>
  <span>Exhibiting 
    <span id="card-count"></span> of 
    <span id="card-total"></span> playing cards      
  </span>
</div>

2. Styling the Playing cards and Button

The playing cards we’ll be including to the card-container div could have a classname of “card”.

#card-container {
  show: flex;
  flex-wrap: wrap;
}

.card {
  peak: 55vh;
  width: calc((100% / 3) - 16px);
  margin: 8px;
  border-radius: 3px;
  transition: all 200ms ease-in-out;
  show: flex;
  align-items: middle;
  justify-content: middle;
}

.card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

We’ll model our load-more button in an analogous method to the playing cards and add a disabled pseudo-selector to indicate when the top of the playing cards have been reached.

.card-actions {
  margin: 8px;
  padding: 16px 0;
  show: flex;
  justify-content: space-between;
  align-items: middle;
}

#load-more {
  width: calc((100% / 3) - 8px);
  padding: 16px;
  background-color: white;
  border: none;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  border-radius: 3px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
}

#load-more:not([disabled]):hover {
  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.2);
}

#load-more[disabled] {
  background-color: #eaeaea !vital;
}

3. Including Performance With JavaScript

That is what the useful implementation for the load extra button will appear like:

1. 1. Outline a lot of playing cards to be added to the web page every time the person clicks the button.

 

1. 1. Detect when the whole variety of playing cards have been added and disable the button.

 

Defining Constants

First, get all the weather we’ll want from our DOM:

const cardContainer = doc.getElementById("card-container");
const loadMoreButton = doc.getElementById("load-more");
const cardCountElem = doc.getElementById("card-count");
const cardTotalElem = doc.getElementById("card-total");

Now we have to outline our international variables.

We’ll want a price for the max variety of playing cards to be added to the web page. In the event you’re getting your information from a server, this worth is the size of the response from the server. Let’s initialise a card restrict of 99.

const cardLimit = 99;

The cardTotalElem is the ingredient for displaying the max variety of playing cards on the web page so we are able to set the innerHTML to the cardLimit worth;

cardTotalElem.innerHTML = cardLimit;

Then we’ll outline a variable for what number of playing cards we wish to improve the web page by:

const cardIncrease = 9;

Very like with our infinite scrolling tutorial, we’ll wish to know what number of “pages” we’ll have i.e. what number of occasions can we improve the content material until we attain the max restrict. For instance, with our outlined cardLimit and cardIncrease variables, we are able to improve the content material 10 occasions (assuming we’ve already loaded the primary 9 parts) till we attain the restrict. We’ll do that by dividing the cardLimit by the cardIncrease.

const pageCount = Math.ceil(cardLimit / cardIncrease);

Then we’ll outline a price to find out which web page we’re on:

let currentPage = 1;

Making a New Card

Now we’ve all our constants, let’s make a perform so as to add a brand new card to the cardboard container. We’ll set the innerHTML of our playing cards to the index worth so we are able to preserve observe of the variety of playing cards we’re including.

A enjoyable function on this demo is that every card has a randomly generated background colour.

const getRandomColor = () => {
  const h = Math.flooring(Math.random() * 360);

  return `hsl(${h}deg, 90%, 85%)`;
};

const createCard = (index) => {
  const card = doc.createElement("div");
  card.className = "card";
  card.innerHTML = index;
  card.model.backgroundColor = getRandomColor();
  cardContainer.appendChild(card);
};

We will additionally apply this perform to our load-more button on web page load to provide it a random background colour as nicely:

window.onload = perform () {
  loadMoreButton.model.backgroundColor = getRandomColor();
};

Including Playing cards to the Container

We’ll add our playing cards to our container utilizing an analogous performance to what we used within the Infinite Scrolling tutorial.

First, decide the vary of playing cards to be added to the web page. The addCards perform will settle for a pageIndex parameter, which can replace the worldwide currentPage worth. If we’re on web page 1, we’ll add playing cards 1 to 9. If we’re on web page 2, we’ll add playing cards 10 to 18 and so forth.

We will outline that mathematically as:

const addCards = (pageIndex) => {
  currentPage = pageIndex;
  
  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = pageIndex * cardIncrease;
  
  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

On this perform, our begin vary will at all times be one lower than the worth we’re attempting to get (i.e. on web page 1, the beginning vary is 0, on web page 2, the beginning vary is 9) so we’ll account for that by setting the worth of our for loop index to startRange + 1.

Detecting When Card Restrict is Reached

A restrict we’ll need to look out for is the endRange quantity. If we’re on the final web page, we’ll need our finish vary to be the identical because the cardLimit. As an example, if we’ve a cardLimit of 75 and a cardIncrease of 10 and we’re on web page 8, our startRange will probably be 70 and our endRange worth needs to be 75.

We’ll modify our addCards perform to account for this:

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

Our demo additionally features a cardTotal ingredient that shows the variety of playing cards presently being proven on the web page so we’ll set the innerHTML of this ingredient as the top vary.

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;
  
  cardCountElem.innerHTML = endRange;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

One other factor to look out for is disabling the load extra button when the cardLimit is reached. We will outline a handleButtonStatus perform to find out whether or not to disable the button i.e. when the currentPage is the same as the cardLimit:

const handleButtonStatus = () => {
  if (pageCount === currentPage) {
    loadMoreButton.classList.add("disabled");
    loadMoreButton.setAttribute("disabled", true);
  }
};

We’ll then cross this new perform into our addCards perform:

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  handleButtonStatus();

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange =
    pageIndex * cardIncrease > cardLimit ? cardLimit : pageIndex * cardIncrease;
  
  cardCountElem.innerHTML = endRange;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

Loading Preliminary Playing cards

We’ve outlined a function for including playing cards to the container so we’ll replace our window.onload perform to set the preliminary playing cards to be added to the web page.

window.onload = perform () {
  addCards(currentPage);
  loadMoreButton.model.backgroundColor = getRandomColor();
};

Dealing with Load Extra

We’ll deal with including the content material by growing the currentPage quantity by 1 each time the load extra button is clicked. Since we’ve already added all of the restrict checks in our addCards perform, we received’t have to do some other test inside our click on occasion.

window.onload = perform () {
  addCards(currentPage);
  loadMoreButton.model.backgroundColor = getRandomColor();
  loadMoreButton.addEventListener("click on", () => {
    addCards(currentPage + 1);
  });
};

Conclusion

And we’re carried out! We’ve efficiently carried out a “Load Extra” button function on our net web page!