• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

[Znote] New Gallery.php without (https://api.imgur.com/3/image/)

Svira

Active Member
Joined
Jan 27, 2008
Messages
263
Solutions
11
Reaction score
35
Hi, due to the fact that the site "www.freeimagehosting.net" with which the pain has been temporarily unavailable for 2 years, here he adds his modifications from gallery.php

The preview downloads photos from our server, excluding the database.
Gallery.php:
PHP:
<?php require_once 'engine/init.php'; include 'layout/overall/header.php'; ?>

<html>
  <center>
  <head>
    <title>Simple Slideshow</title>

    <!-- (A) LOAD LIBRARY -->
    <link rel="stylesheet" href="slides.css"/>
    <script defer src="slides.js"></script>
  </head>
  <body>

    <!-- (B) CREATE HTML DIV -->
    <div id="slidedemo"></div>

    <!-- (C) ATTACH SLIDESHOW -->
    <script>
    window.addEventListener("DOMContentLoaded", () => {
      sslide.init({
        target: "slidedemo",
        images: [
          {src: "guide.gif", cap: "This wonderful npc marks the most important points on the map without blinking an eye!."},
          {src: "testy.png", cap: "This is what the image of the temple from the Server Test looked like."},
          {src: "rebdem.png", cap: "In rebirth, the scars are much more powerful!."}
        ],
        // (OPTIONAL) 3 SEC PER SLIDE, REMOVE TO MANUAL SCROLL
        auto: 3000
      });
    });
    </script>
  </body>
  </center>
</html>

<?php include 'layout/overall/footer.php'; ?>


u need add some css and js:

slides.js:
JavaScript:
var sslide = {
  /* (A) INITIALIZE - PRELOAD IMAGES */
  instances : [],
  init : (opt) => {
    // (A1) REGISTER SLIDESHOW INSTANCE
    const id = sslide.instances.length;
    sslide.instances.push(opt);

    // (A2) PRELOAD IMAGES
    let loaded = 0, ready = () => {
      loaded++;
      if (loaded == opt.images.length) { sslide.attach(id); }
    };
    for (let i of opt.images) {
      let img = new Image();
      img.src = i.src;
      img.onload = ready;
    }
  },

  /* (B) INITIALIZE - ATTACH HTML CONTROLS */
  attach : (id) => {
    // (B1) GET HTML CONTAINER
    let inst = sslide.instances[id],
        sSlide = document.getElementById(inst.target);

    // (B2) SLIDESHOW HTML INTERFACE
    let sImg = document.createElement("img"),
        sCaption = document.createElement("div"),
        sLeft = document.createElement("div"),
        sRight = document.createElement("div");
    sSlide.className = "sSlide";
    sImg.className = "sImg";
    sCaption.className = "sCaption";
    sLeft.className = "sLeft";
    sRight.className = "sRight";
    sLeft.innerHTML = "&lt;";
    sRight.innerHTML = "&gt;";
    sLeft.addEventListener("click", () => { sslide.nav(id, 0); });
    sRight.addEventListener("click", () => { sslide.nav(id, 1); });
    sSlide.appendChild(sImg);
    sSlide.appendChild(sCaption);
    sSlide.appendChild(sLeft);
    sSlide.appendChild(sRight);

    // (B3) READY!
    inst.current = -1;
    inst.sImg = sImg;
    inst.sCaption = sCaption;
    sslide.nav(id, 1);
  },

  /* (C) NAVIGATION */
  nav : (id, direction) => {
    // (C1) CALCULATE NEXT SLIDE
    let inst = sslide.instances[id],
        slides = inst.images;
    if (direction) { inst.current++; }
    else { inst.current--; }
    if (inst.current < 0) { inst.current = slides.length - 1; }
    if (inst.current >= slides.length) { inst.current = 0; }

    // (C2) DRAW SLIDE
    inst.sImg.src = slides[inst.current].src;
    inst.sCaption.innerHTML = slides[inst.current].cap;

    // (C3) AUTO SCROLL MODE
    if (inst.auto) {
      if (inst.timer) { clearInterval(inst.timer); }
      inst.timer = setInterval(() => { sslide.nav(id, 1); }, inst.auto);
    }
  }
};

and slides.css:

CSS:
/* (A) SHARED */
.sImg, .sCaption { width: 100%; }
.sSlide, .sLeft, .sRight { display: flex; }

/* (B) CONTAINER */
.sSlide {
  flex-wrap: wrap;
  position: relative;
  max-width: 800px;
}

/* (C) IMAGE */
.sImg {
  height: 600px;
  object-fit: cover; /* fill, contain, scale-down */
}

/* (D) CAPTION */
.sCaption {
  padding: 10px;
  color: #fff;
  background: #000;
}

/* (E) CONTROLS */
/* (E1) LEFT/RIGHT BUTTONS */
.sLeft, .sRight {
  align-items: center;
  position: absolute;
  top: 0;
  z-index: 9;
  height: 100%;
  padding: 0 20px;
  font-size: 2em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.sLeft { left: 0; }
.sRight { right: 0; }

/* (E2) SHOW ONLY ON HOVER */
.sLeft, .sRight {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}
.sSlide:hover .sLeft, .sSlide:hover .sRight {
  visibility: visible;
  opacity: 1;
}

all istall in var/www/html

look like:
1666339035561.png

LINK PREVIEW: Demo -Slide
 
Last edited:
Back
Top