JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<script src="https://psuk.s3.amazonaws.com/script/js/lib/e/jquery.bgndGallery.js"></script>

JavaScript

$(function () {

     //Redefining the "zoom" effect
     $.mbBgndGallery.effects.zoom = {
         enter: {
             transform: "scale(" + (1 + Math.random() * 2) + ")",
             opacity: 0
         },
         exit: {
             transform: "scale(" + (1 + Math.random() * 2) + ")",
             opacity: 0
         },
         enterTiming: "ease-out",
         exitTiming: "ease-in"
     };

     $.mbBgndGallery.effects.zooma = {
         enter: {
             transform: "scale(" + (1 + Math.random() * 5) + ")",
             opacity: 0
         },
         exit: {
             transform: "scale(" + (1 + Math.random() * 5) + ")",
             opacity: 0
         },
         enterTiming: "cubic-bezier(0.19, 1, 0.22, 1)",
         exitTiming: "cubic-bezier(0.19, 1, 0.22, 1)"
     };
     
     $.mbBgndGallery.effects.bounceIn = {
         enter: {
             transform: "translate3d(0,0,0)",
             opacity: 0
         },
         exit: {
             transform: "translate3d(0,0,0)",
             opacity: 0
         },
         enterTiming: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
         exitTiming: "cubic-bezier(0.215, 0.610, 0.355, 1.000)"
     };

     myGallery = new mbBgndGallery({
         containment: "body",
         timer: 1000,
         effTimer: 3000,
         grayScale: false,
         shuffle: true,
         preserveWidth: false,
         effect: "bounceIn",
         thumbs: {
             folderPath: "thumbs/",
             placeholder: "#thumbnails"
         },
         // If your server allow directory listing you can use:
         // (however this doesn't work locally on your computer)
         //folderPath:"testImage/",
         // else:
         images: [
             "https://psuk.s3.amazonaws.com/asset/p4/image/eccbc87e4b5ce2fe28308fd9f2a7baf3/Landscape/dry-brown-leaf-web-page-background-18729795-70221.jpg",
            ...