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

Last updated on

Product:

Wonder Gallery

Level:

Advanced

Tutorial:

You can use the Wonder Gallery plugin to easily create images and videos for your WordPress website. This tutorial will guide you on how to dynamically change the images and videos in the gallery using JavaScript.

An online demo is as follows: Clicking the button will remove the first item from the gallery, add a cat image, and a YouTube video to the playlist.

The requested content cannot be found

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

<button id="modify-gallery">Click to change the gallery playlist</button>

To enable the function of the button, you can add the following JavaScript to your website script file, or in Wonder Gallery, edit the gallery, go to the step 3 Options tab, Advanced Options, and add the following code to the Custom JavaScript input box:

(function($){
  $(document).ready(function() {
    $("#modify-gallery").click(function() {
 
      $("#wonderplugingallery-GALLERYID .html5gallery-container-GALLERYID").remove();
 
      let imgs = $("#wonderplugingallery-GALLERYID .html5galleryimg");
      let item = imgs.eq(0);
      if (item.closest("a.html5galleryimglink").length > 0) {
        item = item.closest("a.html5galleryimglink");
      }
      item.remove();
 
      let imageCode = '<a class="html5galleryimglink" href="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-kitten.jpeg" data-mediatype="1" style="display: none;"><img class="html5galleryimg html5gallery-tn-image" src="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-kitten-240x160.jpeg" alt="little kitten" data-title="Cat"></a>';
      $("#wonderplugingallery-GALLERYID").append(imageCode);
 
      let youtubeCode = '<a class="html5galleryimglink" href="https://www.youtube.com/embed/h_MolNi06ew" data-poster="https://img.youtube.com/vi/h_MolNi06ew/0.jpg" style="display: none;"><img class="html5galleryimg html5gallery-tn-image" src="https://img.youtube.com/vi/h_MolNi06ew/0.jpg" alt="Wonder Audio Player"></a>';
      $("#wonderplugingallery-GALLERYID").append(youtubeCode);
       
      $("#wonderplugingallery-GALLERYID").data("inited", 0);
      $("#wonderplugingallery-GALLERYID").wonderplugingallery({ forceinit: true });
    });
  });
})(jQuery);

If you add the code to the plugin, the plugin will automatically substitute the macro variable GALLERYID in the code with the current gallery ID, eliminating the need for manual changes. If you add the code to your own script file, you will need to replace it manually.

The following code snippet removes the current gallery display:

$("#wonderplugingallery-GALLERYID .html5gallery-container-GALLERYID").remove();

The following code snippet removes the first item from the playlist:

let imgs = $("#wonderplugingallery-GALLERYID .html5galleryimg");
let item = imgs.eq(0);
if (item.closest("a.html5galleryimglink").length > 0) {
  item = item.closest("a.html5galleryimglink");
}
item.remove();

If you want to totally remove all items from the playlist, you can use the following code snippet:

$("#wonderplugingallery-GALLERYID").empty();

The following code snippet adds an image to the playlist:

let imageCode = '<a class="html5galleryimglink" href="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-kitten.jpeg" data-mediatype="1" style="display: none;"><img class="html5galleryimg html5gallery-tn-image" src="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-kitten-240x160.jpeg" alt="little kitten" data-title="Cat"></a>';
$("#wonderplugingallery-GALLERYID").append(imageCode);

The following code snippet adds a YouTube video to the playlist:

let youtubeCode = '<a class="html5galleryimglink" href="https://www.youtube.com/embed/h_MolNi06ew" data-poster="https://img.youtube.com/vi/h_MolNi06ew/0.jpg" style="display: none;"><img class="html5galleryimg html5gallery-tn-image" src="https://img.youtube.com/vi/h_MolNi06ew/0.jpg" alt="Wonder Audio Player"></a>';
$("#wonderplugingallery-GALLERYID").append(youtubeCode);

The following code snippet reinitialises the gallery display:

$("#wonderplugingallery-GALLERYID").data("inited", 0);
$("#wonderplugingallery-GALLERYID").wonderplugingallery({ forceinit: true });