Svira
Active Member
- Joined
- Jan 27, 2008
- Messages
- 269
- Solutions
- 11
- Reaction score
- 37
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:
u need add some css and js:
slides.js:
and slides.css:
all istall in var/www/html
look like:
LINK PREVIEW: Demo -Slide
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 = "<";
sRight.innerHTML = ">";
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:
LINK PREVIEW: Demo -Slide
Last edited: