Better gallery

Replaced complex gallery with simple script
Slideshow loaded from images/gallery folder
Credits: https://www.w3schools.com/howto/howto_js_slideshow.asp

CHANGELOG-2.x.md

@@ -9,6 +9,7 @@
 * Better handling of vocations: (#345)
   * Load from vocations.xml (No need to manually set)
   * Support for Monk vocation
+* Better gallery, loads images from images/gallery folder
 * Reworked account action logs to use a single IP column as varchar(45) for both ipv4 and ipv6 (#289)
 * Admin Panel: save menu collapse state (https://github.com/slawkens/myaac/commit/55da00520df7463a1d1ca41931df1598e9f2ffeb)
 

common.php

@@ -27,7 +27,7 @@ if (version_compare(phpversion(), '8.1', '<')) die('PHP version 8.1 or higher is
 
 const MYAAC = true;
 const MYAAC_VERSION = '2.0-dev';
-const DATABASE_VERSION = 49;
+const DATABASE_VERSION = 50;
 const TABLE_PREFIX = 'myaac_';
 define('START_TIME', microtime(true));
 define('MYAAC_OS', stripos(PHP_OS, 'WIN') === 0 ? 'WINDOWS' : (strtoupper(PHP_OS) === 'DARWIN' ? 'MAC' : 'LINUX'));

install/includes/import_base_data.php

@@ -57,16 +57,6 @@ if (NewsCategory::count() === 0) {
 	}
 }
 
-if (Gallery::count() === 0) {
-	Gallery::create([
-		'comment' => 'Demon',
-		'image' => 'images/gallery/demon.jpg',
-		'thumb' => 'images/gallery/demon_thumb.gif',
-		'author' => 'MyAAC',
-		'ordering' => 0,
-	]);
-}
-
 if(FAQ::count() == 0) {
 	FAQ::create([
 		'question' => 'What is this?',

install/includes/schema.sql

@@ -198,18 +198,6 @@ CREATE TABLE IF NOT EXISTS `myaac_pages`
 	UNIQUE (`name`)
 ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8mb4;
 
-CREATE TABLE IF NOT EXISTS `myaac_gallery`
-(
-	`id` int NOT NULL AUTO_INCREMENT,
-	`comment` varchar(255) NOT NULL DEFAULT '',
-	`image` varchar(255) NOT NULL,
-	`thumb` varchar(255) NOT NULL,
-	`author` varchar(50) NOT NULL DEFAULT '',
-	`ordering` int NOT NULL DEFAULT 0,
-	`hide` tinyint NOT NULL DEFAULT 0,
-	PRIMARY KEY (`id`)
-) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8mb4;
-
 CREATE TABLE IF NOT EXISTS `myaac_settings`
 (
 	`id` int NOT NULL AUTO_INCREMENT,

system/migrations/50-gallery.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS `myaac_gallery`
+(
+	`id` int NOT NULL AUTO_INCREMENT,
+	`comment` varchar(255) NOT NULL DEFAULT '',
+	`image` varchar(255) NOT NULL,
+	`thumb` varchar(255) NOT NULL,
+	`author` varchar(50) NOT NULL DEFAULT '',
+	`ordering` int NOT NULL DEFAULT 0,
+	`hide` tinyint NOT NULL DEFAULT 0,
+	PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8mb4;

system/migrations/50.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * @var OTS_DB_MySQL $db
+ */
+
+$up = function () use ($db) {
+	if ($db->hasTable(TABLE_PREFIX . 'gallery')) {
+		$db->dropTable(TABLE_PREFIX . 'gallery');
+	}
+};
+
+$down = function () use ($db) {
+	if (!$db->hasTable(TABLE_PREFIX . 'gallery')) {
+		$db->query(file_get_contents(__DIR__ . '/50-gallery.sql'));
+	}
+};

system/pages/gallery.php

@@ -9,316 +9,25 @@
  */
 
 use MyAAC\Cache\Cache;
-use MyAAC\Models\Gallery as ModelsGallery;
-
 defined('MYAAC') or die('Direct access not allowed!');
 $title = 'Gallery';
 
-$canEdit = hasFlag(FLAG_CONTENT_GALLERY) || superAdmin();
+const ALLOWED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
-if($canEdit) {
-	if(function_exists('imagecreatefrompng')) {
-		if (!empty($action)) {
-			if ($action == 'delete' || $action == 'edit' || $action == 'hide' || $action == 'moveup' || $action == 'movedown')
-				$id = $_REQUEST['id'];
 
-			if (isset($_REQUEST['comment']))
+$images = Cache::remember('gallery', 5 * 60, function () {
-				$comment = stripslashes($_REQUEST['comment']);
+	$images = glob(BASE . GALLERY_DIR . '*.*');
 
-			if (isset($_REQUEST['image']))
+	$images = array_filter($images, function ($image) {
-				$image = $_REQUEST['image'];
+		$ext = pathinfo($image, PATHINFO_EXTENSION);
 
-			if (isset($_REQUEST['author']))
+		return (in_array($ext, ALLOWED_EXTENSIONS) && !str_contains($image, '_thumb'));
-				$author = $_REQUEST['author'];
+	});
 
-			$errors = array();
+	return array_map(function ($image) {
-
+		return basename($image);
-			if ($action == 'add') {
+	}, $images);
-				if (Gallery::add($comment, $image, $author, $errors))
-					$comment = $image = $author = '';
-			} else if ($action == 'delete') {
-				Gallery::delete($id, $errors);
-			} else if ($action == 'edit') {
-				if (isset($id) && !isset($name)) {
-					$tmp = Gallery::get($id);
-					$comment = $tmp['comment'];
-					$image = $tmp['image'];
-					$author = $tmp['author'];
-				} else {
-					Gallery::update($id, $comment, $image, $author);
-					$action = $comment = $image = $author = '';
-				}
-			} else if ($action == 'hide') {
-				Gallery::toggleHide($id, $errors);
-			} else if ($action == 'moveup') {
-				Gallery::move($id, -1, $errors);
-			} else if ($action == 'movedown') {
-				Gallery::move($id, 1, $errors);
-			}
-
-			if (!empty($errors))
-				$twig->display('error_box.html.twig', array('errors' => $errors));
-		}
-
-		if(!isset($_GET['image'])) {
-			$twig->display('gallery.form.html.twig', array(
-				'link' => getLink('gallery/' . ($action == 'edit' ? 'edit' : 'add')),
-				'action' => $action,
-				'id' => isset($id) ? $id : null,
-				'comment' => isset($comment) ? $comment : null,
-				'image' => isset($image) ? $image : null,
-				'author' => isset($author) ? $author : null
-			));
-		}
-	}
-	else
-		echo 'You cannot edit/add gallery items as it seems your PHP installation doesnt have GD support enabled. Visit <a href="http://be2.php.net/manual/en/image.installation.php">PHP Manual</a> for more info.';
-}
-
-if(isset($_GET['image']))
-{
-	$image = $db->query('SELECT * FROM `' . TABLE_PREFIX . 'gallery`  WHERE `id` = ' . $db->quote($_GET['image']) . ' ORDER by `ordering` LIMIT 1;');
-	if($image->rowCount() == 1)
-		$image = $image->fetch();
-	else
-	{
-		echo 'Image with this id does not exists.';
-		return;
-	}
-
-	$previous_image = $db->query('SELECT `id` FROM `' . TABLE_PREFIX . 'gallery` WHERE `id` = ' . $db->quote($image['id'] - 1) . ' ORDER by `ordering`;');
-	if($previous_image->rowCount() == 1)
-		$previous_image = $previous_image->fetch();
-	else
-		$previous_image = NULL;
-
-	$next_image = $db->query('SELECT `id` FROM `' . TABLE_PREFIX . 'gallery` WHERE `id` = ' . $db->quote($image['id'] + 1) . ' ORDER by `ordering`;');
-	if($next_image->rowCount() == 1)
-		$next_image = $next_image->fetch();
-	else
-		$next_image = NULL;
-
-	$twig->display('gallery.get.html.twig', array(
-		'previous' => $previous_image ? $previous_image['id'] : null,
-		'next' => $next_image ? $next_image['id'] : null,
-		'image' => $image
-	));
-	return;
-}
-
-$images = Cache::remember('gallery_' . ($canEdit ? '1' : '0'), 60, function () use ($db, $canEdit) {
-	return $db->query('SELECT `id`, `comment`, `image`, `author`, `thumb`' .
-		($canEdit ? ', `hide`, `ordering`' : '') .
-		' FROM `' . TABLE_PREFIX . 'gallery`' .
-		(!$canEdit ? ' WHERE `hide` != 1' : '') .
-		' ORDER BY `ordering`;')->fetchAll(PDO::FETCH_ASSOC);
 });
 
-$last = count($images);
+$twig->display('gallery.html.twig', [
-if(!$last)
-{
-?>
-	There are no images added to gallery yet.
-<?php
-	return;
-}
-
-$twig->display('gallery.html.twig', array(
 	'images' => $images,
-	'last' => $last,
+]);
-	'canEdit' => $canEdit
-));
-
-class Gallery
-{
-	static public function add($comment, $image, $author, &$errors)
-	{
-		global $db;
-		if(isset($comment[0]) && isset($image[0]) && isset($author[0]))
-		{
-			$query =
-				$db->query(
-					'SELECT `ordering`' .
-					' FROM `' . TABLE_PREFIX . 'gallery`' .
-					' ORDER BY `ordering`' . ' DESC LIMIT 1'
-				);
-
-			$ordering = 0;
-			if($query->rowCount() > 0) {
-				$query = $query->fetch();
-				$ordering = $query['ordering'] + 1;
-			}
-
-			$pathinfo = pathinfo($image);
-			$extension = strtolower($pathinfo['extension']);
-			$thumb_filename = GALLERY_DIR . $pathinfo['filename'] . '_thumb.' . $extension;
-			$filename = GALLERY_DIR . $pathinfo['filename'] . '.' . $extension;
-			if($db->insert(TABLE_PREFIX . 'gallery', array(
-				'comment' => $comment,
-				'image' => $filename, 'author' => $author,
-				'thumb' => $thumb_filename,
-				'ordering' => $ordering))) {
-				if(self::generateThumb($db->lastInsertId(), $image, $errors))
-					self::resize($image, 650, 500, $filename, $errors);
-			}
-		}
-		else
-			$errors[] = 'Please fill all inputs.';
-
-		return !count($errors);
-	}
-
-	static public function get($id) {
-		return ModelsGallery::find($id)->toArray();
-	}
-
-	static public function update($id, $comment, $image, $author) {
-		$pathinfo = pathinfo($image);
-		$extension = strtolower($pathinfo['extension']);
-		$filename = GALLERY_DIR . $pathinfo['filename'] . '.' . $extension;
-
-		if(ModelsGallery::where('id', $id)->update([
-			'comment' => $comment,
-			'image' => $filename,
-			'author' => $author
-		])) {
-			if(self::generateThumb($id, $image, $errors))
-				self::resize($image, 650, 500, $filename, $errors);
-		}
-	}
-
-	static public function delete($id, &$errors)
-	{
-		if(isset($id))
-		{
-			$row = ModelsGallery::find($id);
-			if($row)
-				if (!$row->delete()) {
-					$errors[] = 'Fail during delete Gallery';
-				}
-			else
-				$errors[] = 'Image with id ' . $id . ' does not exists.';
-		}
-		else
-			$errors[] = 'id not set';
-
-		return !count($errors);
-	}
-
-	static public function toggleHide($id, &$errors)
-	{
-		if(isset($id))
-		{
-			$row = ModelsGallery::find($id);
-			if($row) {
-				$row->hide = $row->hide == 1 ? 0 : 1;
-				if (!$row->save()) {
-					$errors[] = 'Fail during toggle hide Gallery';
-				}
-			} else
-				$errors[] = 'Image with id ' . $id . ' does not exists.';
-		}
-		else
-			$errors[] = 'id not set';
-
-		return !count($errors);
-	}
-
-	static public function move($id, $i, &$errors)
-	{
-		global $db;
-		$query = self::get($id);
-		if($query !== false)
-		{
-			$ordering = $query['ordering'] + $i;
-			$old_record = $db->select(TABLE_PREFIX . 'gallery', array('ordering' => $ordering));
-			if($old_record !== false) {
-				ModelsGallery::where('ordering', $ordering)->update([
-					'ordering' => $query['ordering'],
-				]);
-			}
-
-			ModelsGallery::where('id', $id)->update([
-				'ordering' => $ordering,
-			]);
-		}
-		else
-			$errors[] = 'Image with id ' . $id . ' does not exists.';
-
-		return !count($errors);
-	}
-
-	static public function resize($file, $new_width, $new_height, $new_file, &$errors)
-	{
-		$pathinfo = pathinfo($file);
-		$extension = strtolower($pathinfo['extension']);
-
-		switch ($extension)
-		{
-			case 'gif': // GIF
-				$image = imagecreatefromgif($file);
-				break;
-			case 'jpg': // JPEG
-			case 'jpeg':
-				$image = imagecreatefromjpeg($file);
-				break;
-			case 'png': // PNG
-				$image = imagecreatefrompng($file);
-				break;
-			default:
-				$errors[] = 'Unsupported file format.';
-				return false;
-		}
-
-		$width = imagesx($image);
-		$height = imagesy($image);
-
-		// create a new temporary image
-		$tmp_img = imagecreatetruecolor($new_width, $new_height);
-
-		// copy and resize old image into new image
-		imagecopyresized($tmp_img, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
-
-		// save thumbnail into a file
-		switch($extension)
-		{
-			case 'gif':
-				imagegif($tmp_img, $new_file);
-				break;
-
-			case 'jpg':
-			case 'jpeg':
-				imagejpeg($tmp_img, $new_file);
-				break;
-
-			case 'png':
-				imagepng($tmp_img, $new_file);
-				break;
-		}
-
-		return true;
-	}
-
-	static public function generateThumb($id, $file, &$errors)
-	{
-		$pathinfo = pathinfo($file);
-		$extension = strtolower($pathinfo['extension']);
-		$thumb_filename = GALLERY_DIR . $pathinfo['filename'] . '_thumb.' . $extension;
-
-		if(!self::resize($file, 170, 110, $thumb_filename, $errors))
-			return false;
-
-		if(isset($id))
-		{
-			$row = ModelsGallery::find($id);
-			if($row) {
-				$row->thumb = $thumb_filename;
-				$row->save();
-			} else
-				$errors[] = 'Image with id ' . $id . ' does not exists.';
-		}
-		else
-			$errors[] = 'id not set';
-
-		return !count($errors);
-	}
-}

system/src/Models/Gallery.php

@@ -1,18 +0,0 @@
-<?php
-
-namespace MyAAC\Models;
-
-use Illuminate\Database\Eloquent\Model;
-
-class Gallery extends Model {
-
-	protected $table = TABLE_PREFIX . 'gallery';
-
-	public $timestamps = false;
-
-	protected $fillable = [
-		'comment', 'image', 'thumb',
-		'author', 'ordering', 'hide',
-	];
-
-}

system/templates/gallery.form.html.twig

@@ -1,33 +0,0 @@
-<form method="post" action="{{ link }}">
-	{{ csrf() }}
-	{% if action == 'edit' %}
-	<input type="hidden" name="id" value="{{ id }}" />
-	{% endif %}
-	<table width="100%" border="0" cellspacing="1" cellpadding="4">
-		<tr>
-			<td bgcolor="{{ config.vdarkborder }}" class="white"><b>{% if action == 'edit' %}Edit{% else %}Add{% endif %} image</b></td>
-		</tr>
-		<tr>
-			<td bgcolor="{{ config.darkborder }}">
-				<table border="0" cellpadding="1">
-					<tr>
-						<td>Comment:</td>
-						<td><textarea name="comment" maxlength="255" cols="50" rows="5">{% if comment is not null %}{{ comment }}{% endif %}</textarea></td>
-					<tr/>
-					<tr>
-						<td>Image URL:</td>
-						<td><input name="image" value="{% if image is not null %}{{ image }}{% endif %}" size="50" maxlength="255"/></td>
-					<tr/>
-					<tr>
-						<td>Author:</td>
-						<td><input name="author" value="{% if author is not null %}{{ author }}{% endif %}" size="50" maxlength="50"/></td>
-					<tr/>
-					<tr>
-						<td colspan="2" align="center"><input type="submit" value="Submit"/>
-					</tr>
-				</table>
-			</td>
-		</tr>
-	</table>
-</form>
-<br/><br/>

system/templates/gallery.get.html.twig

@@ -1,15 +0,0 @@
-<div style="position: relative; height: 15px; width: 100%;">
-	{% if next is not null %}
-	<a style="float: right;" href="{{ getLink('gallery') ~ '/' ~ next }}" >next <img src="images/arrow_right.gif" width=15 height=11 border=0 ></a>
-	{% endif %}
-	{% if previous is not null %}
-	<a style="position: absolute;" href="{{ getLink('gallery') ~ '/' ~ previous }}"><img src="images/arrow_left.gif" width=15 height=11 border=0 > previous</a>
-	{% endif %}
-	<div style="position: absolute; width: 80%; margin-left: 10%; margin-right: 10%; text-align: center;">
-		<a href="{{ getLink('gallery') }}" ><img src="images/arrow_up.gif" width=11 height=15 border=0 > back</a>
-	</div>
-</div>
-<div style="position: relative; text-align: center; top: 20px; ">
-	<img src="{{ image.image }}" />
-	<div style="margin-top: 15px; margin-bottom: 35px; ">{{ image.comment }}</div>
-</div>

system/templates/gallery.html.twig

@@ -1,38 +1,31 @@
-Click on the image to enlarge.<br/><br/>
+<!-- Slideshow container -->
-{% set i = 0 %}
+<div class="slideshow-container">
-{% for image in images %}
+
-	{% set i = i + 1 %}
+	{% set i = 1 %}
-	<table>
+	{% for image in images %}
-		<tr>
+		<div class="mySlides fade-effect">
-			<td style="height: 120px;" >
+			<div class="numbertext">{{ i }} / {{ images|length }}</div>
-				<a href="{{ getLink('gallery') ~ '/' ~ image.id }}" >
+			<img src="{{ constant('GALLERY_DIR') }}{{ image }}" style="width:100%">
-					<img src="{{ image.thumb }}" border="0" />
+		</div>
-				</a>
+
-			</td>
+		{% set i = i + 1 %}
-			<td>{{ image.comment }}</td>
+	{% endfor %}
-			{% if canEdit %}
+
-			<td>
+	<!-- Next and previous buttons -->
-				<a href="?subtopic=gallery&action=edit&id={{ image.id }}" title="Edit">
+	<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
-					<img src="images/edit.png"/>Edit
+	<a class="next" onclick="plusSlides(1)">&#10095;</a>
-				</a>
+
-				<a id="delete" href="?subtopic=gallery&action=delete&id={{ image.id }}" onclick="return confirm('Are you sure?');" title="Delete">
+</div>
-					<img src="images/del.png"/>Delete
+
-				</a>
+<!-- The dots/circles -->
-				<a href="?subtopic=gallery&action=hide&id={{ image.id }}" title="{% if image.hide != 1 %}Hide{% else %}Show{% endif %}">
+<div style="text-align:center">
-					<img src="images/{% if image.hide != 1 %}success{% else %}error{% endif %}.png"/>{% if image.hide != 1 %}Hide{% else %}Show{% endif %}
+	{% set i = 1 %}
-				</a>
+
-				{% if i != 1 %}
+	{% for image in images %}
-				<a href="?subtopic=gallery&action=moveup&id={{ image.id }}" title="Move up">
+		<span class="dot" onclick="currentSlide({{ i }})"></span>
-					<img src="images/icons/arrow_up.gif"/>Move up
+		{% set i = i + 1 %}
-				</a>
+	{% endfor %}
-				{% endif %}
+</div>
-				{% if i != last %}
+
-				<a href="?subtopic=gallery&action=movedown&id={{ image.id }}" title="Move down">
+<link rel="stylesheet" type="text/css" href="{{ constant('BASE_URL') }}tools/css/gallery.css" />
-					<img src="images/icons/arrow_down.gif"/>Move down
+<script type="text/javascript" src="{{ constant('BASE_URL') }}tools/js/gallery.js"></script>
-				</a>
-				{% endif %}
-			</td>
-			{% endif %}
-		</tr>
-	</table>
-{% endfor %}

templates/tibiacom/boxes/gallery.php

@@ -1,14 +1,12 @@
 <?php
 
-use MyAAC\Models\Gallery;
-
 if(PAGE !== 'news') {
 	return;
 }
 
-$gallery = Gallery::find($config['gallery_image_id_from_database']);
+$configGalleryImageThumb = config('gallery_image_thumb');
-if ($gallery) {
+if (!empty($configGalleryImageThumb)) {
 	$twig->display('gallery.html.twig', array(
-		'image' => $gallery->toArray()
+		'image' => GALLERY_DIR . $configGalleryImageThumb,
 	));
 }

templates/tibiacom/boxes/templates/gallery.html.twig

@@ -1,6 +1,6 @@
 <div id="GalleryBox" class="Themebox" style="background-image:url({{ template_path }}/images/themeboxes/gallery/gallerybox.gif);">
-	<a href="?subtopic=gallery&image={{ config['gallery_image_id_from_database'] }}" >
+	<a href="{{ getLink('gallery') }}" >
-		<img id="GalleryContent" class="ThemeboxContent" src="{{ image['thumb'] }}" alt="Screenshot of the Day" />
+		<img id="GalleryContent" class="ThemeboxContent" src="{{ image }}" alt="Screenshot of the Day" />
 	</a>
 	<div class="Bottom" style="background-image:url({{ template_path }}/images/general/box-bottom.gif);"></div>
 </div>

templates/tibiacom/config.ini

@@ -15,4 +15,4 @@ network_twitter = "tibia"
 
 background_image = "background-artwork.jpg"
 logo_image = "tibia-logo-artwork-top.gif"
-gallery_image_id_from_database = 1
+gallery_image_thumb = "demon_thumb.gif"

tools/css/gallery.css

@@ -0,0 +1,85 @@
+/* Slideshow container */
+.slideshow-container {
+	max-width: 1000px;
+	position: relative;
+	margin: auto;
+}
+
+/* Hide the images by default */
+.mySlides {
+	display: none;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+	cursor: pointer;
+	position: absolute;
+	top: 50%;
+	width: auto;
+	margin-top: -22px;
+	padding: 16px;
+	color: white;
+	font-weight: bold;
+	font-size: 18px;
+	transition: 0.6s ease;
+	border-radius: 0 3px 3px 0;
+	user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+	right: 0;
+	border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+	background-color: rgba(0,0,0,0.8);
+}
+
+/* Caption text */
+.text {
+	color: #f2f2f2;
+	font-size: 15px;
+	padding: 8px 12px;
+	position: absolute;
+	bottom: 8px;
+	width: 100%;
+	text-align: center;
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+	color: #f2f2f2;
+	font-size: 12px;
+	padding: 8px 12px;
+	position: absolute;
+	top: 0;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+	cursor: pointer;
+	height: 15px;
+	width: 15px;
+	margin: 0 2px;
+	background-color: #bbb;
+	border-radius: 50%;
+	display: inline-block;
+	transition: background-color 0.6s ease;
+}
+
+.active, .dot:hover {
+	background-color: #717171;
+}
+
+/* Fading animation */
+.fade-effect {
+	animation-name: fade-effect;
+	animation-duration: 1.5s;
+}
+
+@keyframes fade-effect {
+	from {opacity: .4}
+	to {opacity: 1}
+}

tools/js/gallery.js

@@ -0,0 +1,28 @@
+let slideIndex = 1;
+showSlides(slideIndex);
+
+// Next/previous controls
+function plusSlides(n) {
+	showSlides(slideIndex += n);
+}
+
+// Thumbnail image controls
+function currentSlide(n) {
+	showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+	let i;
+	let slides = document.getElementsByClassName("mySlides");
+	let dots = document.getElementsByClassName("dot");
+	if (n > slides.length) {slideIndex = 1}
+	if (n < 1) {slideIndex = slides.length}
+	for (i = 0; i < slides.length; i++) {
+		slides[i].style.display = "none";
+	}
+	for (i = 0; i < dots.length; i++) {
+		dots[i].className = dots[i].className.replace(" active", "");
+	}
+	slides[slideIndex-1].style.display = "block";
+	dots[slideIndex-1].className += " active";
+}