How to dynamically add or remove images and videos in WordPress grid gallery using JavaScript

Last updated on

Product: Wonder Grid Gallery

Level: Advanced

Tutorial:

You can use the premium WordPress plugin Wonder Grid Gallery to create an image and video grid gallery. This tutorial will guide you how to dynamically add or remove images and videos in the gallery using JavaScript.

There are two methods to dynamically change the images and videos in the gallery.

Method 1 - Using JSON web service

Wonder Grid Gallery supports loading the image and video list from a JSON service: How to load image and video list from a json web service in WordPress Grid Gallery. You can use JavaScript to change the remote service, then re-initialise the gallery.

An online demo is as follows:

The HTML code of the button is as follows:

<button id="change-remote">Click to change the gallery remote service</button>

You can add the following JavaScript code to the webpage. If you don't know how to add the code to your WordPress page, in Wonder Grid Gallery, edit the gallery, go to the step 4 Options tab, Advanced Options, you can add the code to the Custom JavaScript input box:

(function($){
  $(document).ready(function() {
    $("#change-remote").click(function() {
      
      $("#wonderplugingridgallery-19 .wonderplugin-gridgallery-list").empty();
      $("#wonderplugingridgallery-19").data("remote", "https://www.wonderplugin.com/gridgallery-jsonservice-2.php");
       
      for (var index = wpGridGalleryObjects.objects.length - 1; index >= 0; index--)
      {
        if (wpGridGalleryObjects.objects[index].id == 19)
        {
          wpGridGalleryObjects.objects.splice(index, 1);
        }
      }
      $("#wonderplugingridgallery-19").data("inited", 0);
      $("#wonderplugingridgallery-19").wonderplugingridgallery({ forceinit: true });

    });
  });
})(jQuery);

In the above code, the number 19 is the ID of the gallery. If your gallery has a different ID, you need to change the number accordingly.

The following code removes existing items from the gallery, then change it to a new remove service:

$("#wonderplugingridgallery-19 .wonderplugin-gridgallery-list").empty();
$("#wonderplugingridgallery-19").data("remote", "https://www.wonderplugin.com/gridgallery-jsonservice-2.php");

The following code removes the existing object from the gallery global object list, and re-initialises the gallery:

for (var index = wpGridGalleryObjects.objects.length - 1; index >= 0; index--)
{
  if (wpGridGalleryObjects.objects[index].id == 19)
  {
    wpGridGalleryObjects.objects.splice(index, 1);
  }
}
$("#wonderplugingridgallery-19").data("inited", 0);
$("#wonderplugingridgallery-19").wonderplugingridgallery({ forceinit: true });

Method 2 - Directly modifying the HTML code

Instead of using a remote JSON web service, you can also directly modify the HTML code, remove existing items and add new items.

An online demo is as follows. Clicking the button will remove the last image from the gallery and add a new image.

The HTML code of the button is as follows. In this tutorial, we assign it an ID change-gallery.

<button id="change-gallery" class="btn btn-success btn-large">Click to change the gallery</button>

You can then add the following JavaScript code to the webpage. If you don't know how to add the code to your WordPress page, in Wonder Grid Gallery, edit the gallery, go to the step 4 Options tab, Advanced Options, you can add the code to the Custom JavaScript input box:

(function($){
  $(document).ready(function() {
    $("#change-gallery").click(function() {

      if ($("#wonderplugingridgallery-51 .wonderplugin-gridgallery-list").length <= 0)
      {
        var listCode = '<div class="wonderplugin-gridgallery-list" style="display:block;position:relative;max-width:100%;margin:0 auto;"></div>';
        $("#wonderplugingridgallery-51").append(listCode);
      }

      $("#wonderplugingridgallery-51 .wonderplugin-gridgallery-item").eq(3).remove();

      var imageCode = '<div class="wonderplugin-gridgallery-item" data-row="1" data-col="1">'
+ '   <div class="wonderplugin-gridgallery-item-container">'
+ '     <a class="wpgridlightbox wpgridlightbox-51"'
+ '     data-thumbnail="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-camel.jpeg"'
+ '     data-wpggroup="wpgridgallery-51"'
+ '     href="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-camel.jpeg"'
+ '     data-title="Camel">'
+ '       <img class="wonderplugin-gridgallery-item-img" alt="Camel" src="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-camel.jpeg" />'
+ '   </a>'
+ ' </div>'
+ ' <div class="wonderplugin-gridgallery-item-text">'
+ '   <div class="wonderplugin-gridgallery-item-wrapper">'
+ '     <div class="wonderplugin-gridgallery-item-title">Camel</div>'
+ '     <div class="wonderplugin-gridgallery-item-description"></div>'
+ '   </div>'
+ ' </div>'
+ '</div>';

      $("#wonderplugingridgallery-51 .wonderplugin-gridgallery-list").append(imageCode);

      for (var index = wpGridGalleryObjects.objects.length - 1; index >= 0; index--)
      {
        if (wpGridGalleryObjects.objects[index].id == 51)
        {
          wpGridGalleryObjects.objects.splice(index, 1);
        }
      }

      $("#wonderplugingridgallery-51").data("inited", 0);
      $("#wonderplugingridgallery-51").wonderplugingridgallery({ forceinit: true });
    });
  });
})(jQuery);

In the above code, the number 51 is the ID of the gallery. If your gallery has a different ID, you need to change the number accordingly.

The following code removes the last item from the gallery:

$("#wonderplugingridgallery-51 .wonderplugin-gridgallery-item").eq(3).remove();

If you want to remove multiple items, you need to remove the items from the end to front, because when you remove an item from the list, the order of its following items will change.

For example, the following code will remove the last three items:

$("#wonderplugingridgallery-51 .wonderplugin-gridgallery-item").eq(3).remove();
$("#wonderplugingridgallery-51 .wonderplugin-gridgallery-item").eq(2).remove();
$("#wonderplugingridgallery-51 .wonderplugin-gridgallery-item").eq(1).remove();

To add new items to the gallery, you need to append the HTML code to the div wonderplugin-gridgallery-list.

The HTML code of an image item is as follows:

<div class="wonderplugin-gridgallery-item" data-row="1" data-col="1">
   <div class="wonderplugin-gridgallery-item-container">
     <a class="wpgridlightbox wpgridlightbox-51"
     data-thumbnail="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-camel.jpeg"
     data-wpggroup="wpgridgallery-51"
     href="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-camel.jpeg"
     data-title="Camel">
       <img class="wonderplugin-gridgallery-item-img" alt="Camel" src="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-camel.jpeg" />
   </a>
 </div>
 <div class="wonderplugin-gridgallery-item-text">
   <div class="wonderplugin-gridgallery-item-wrapper">
     <div class="wonderplugin-gridgallery-item-title">Camel</div>
     <div class="wonderplugin-gridgallery-item-description"></div>
   </div>
 </div>
</div>

The following code appends the image HTML code to the gallery item list:

$("#wonderplugingridgallery-51 .wonderplugin-gridgallery-list").append(imageCode);

The following code removes the existing object from the gallery global object list, and re-initialises the gallery:

for (var index = wpGridGalleryObjects.objects.length - 1; index >= 0; index--)
{
  if (wpGridGalleryObjects.objects[index].id == 51)
  {
    wpGridGalleryObjects.objects.splice(index, 1);
  }
}
$("#wonderplugingridgallery-51").data("inited", 0);
$("#wonderplugingridgallery-51").wonderplugingridgallery({ forceinit: true });