RESPONSIVE SLIDESHOW

Ref: https://codepen.io/SitePoint/pen/WwqvqB
SOURCE CODE OF THIS HTML FILE


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Ref: https://codepen.io/SitePoint/pen/WwqvqB</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <style>
*{
  margin:0px;
  padding:0px;
}

html, body{
  height:100%;
  width:100%;
}

body{
background-color: black; /* #003366; gray; #556B2F; */
margin:0px;
padding:0px;
}


#slides{
/* border:1px solid aqua;*/
background-color: #003333; /* 999 */
	position: relative;
	
	width:100%; 
	padding: 0px;
	margin: 0px;
	right:0px; (?);
}

.slide{
	position: absolute;
	max-width: 100%; 
	opacity: 0;
	z-index: 1;
	left:0;
     right:0;
      margin-left: auto;
      margin-right: auto;

	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}

.showing{
	opacity: 1;
	z-index: 2;
	 
}

/* Caption text */
.text {
 /* border:1px solid gray;*/
  color: blue; 
  font-family:Arial;
  padding: .2em;
  position: absolute;
  line-height:90%;

  width: 96%;/* 100% */
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  max-height:6em; 
  overflow: hidden;

  text-align: center;
  z-index:50;

text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;

}

@media screen and (max-width:700px){
  img{
	max-width: 100%;
	max-height:200px;
	}
	#slides{
	height:200px;
	}
	.slide{
	max-height:200px;
	}
  .text{ font-size: .7em;
     bottom:.4em;
  }
}

@media screen and (min-width:700px){
  img{
	max-width: 100%;
	max-height:660px;
	}
	#slides{
	height:660px;
	}
	.slide{
	max-height:660px;
	}
  .text{
    font-size:1.5em;
    bottom: .5em;
  }
}

audio{
position:absolute;
top:8px;
right:-85px;
z-index:5; 
 opacity: 0.3;
width:150px; 
}

.stt{
color:white;
font-weight:bold;
font-family:Arial;
position:absolute;
width:62px;
height:20px;
top:1px;
left:1px;
z-index:10;
font-size:12pt;
background-color:#666;
opacity:.3;
padding:3px;
}

#playBut{
position:absolute;
top:60px;
right: 1em; /*7px; */
font-size:1em; /* 14pt; */
z-index:30; 
display:none; 
opacity: 0.3;

width:3em;
height:1.8em;
  /* border-radius: 50em !important; */
   padding: 0em; 
}

  </style>
</head>
<body onload= "init()">
<div align="center">

<div class="container">

<div id="slides">

</div>

</div>  <!-- container -->

<div id="stt"></div>

<audio id="audio" preload="auto"  controls loop>
  <source src="https://pvhung20.000webhostapp.com/Cielito-Lindo.mp3">
</audio>
<button id="playBut" onclick="setIntv(this)">PL</button>

<br>
</div>


  <script>
$(window).load(function() {
       alert('Now the page is fully loaded.');
       $('#playBut').show()
});

dur = 6000;
stt = 0;

var currentSlide = 0;

function nextSlide(){
	goToSlide(currentSlide+1);
}

function previousSlide(){
	goToSlide(currentSlide-1);
}

function goToSlide(n){
slides = document.querySelectorAll('#slides .slide');
// alert('n = ' + n + '\n' + 'currentSlide = ' + currentSlide);
	slides[currentSlide].className = 'slide';
	
	currentSlide = (n+slides.length)%slides.length;
	slides[currentSlide].className = 'slide showing';
}

var playing = true;

function pauseSlideshow(){
	xx =  document.getElementById('xx').innerHTML;
	pauseButton.value = xx;
	playing = false;
	// clearInterval(slideInterval);
}

function playSlideshow(){
     yy =  document.getElementById('yy').innerHTML;
	pauseButton.value = yy;
	playing = true;
	slideInterval = setInterval(nextSlide,dur);
}

function getSrc(st){
     if(st.search('#>') > 0){
		arr = st.split('#>');
		return arr[0]
	}else{
		return st
	}
}

function getAlt(st){
      if(st.search('#>') > 0){
		arr = st.split('#>');
		return arr[1]
	}else{
		return ''
	}
}

  function init(){
  // alert('tao');
	len = imgArr.length
	ss = '<div class="slide showing"><img src="'
	+ getSrc(imgArr[0]) + '">' +
	  '<div class="text">' + 
		getAlt(imgArr[0])
               + '</div>' 
		+ '<div class="stt">1' + ' / ' + len 
               + '</div></div>'
	
	for(i=1; i<len ; i++){
		ss +=  '<div class="slide"><img src="' + 
		getSrc(imgArr[i])+ '">' +
	     '<div class="text">' + 
		getAlt(imgArr[i])
               + '</div>' 
		+ '<div class="stt">' + (i + 1) + ' / ' + len 
               + '</div></div>'
	}
	
	document.getElementById("slides").innerHTML = ss;
   }

function setIntv(thi){
       slideInterval = setInterval(nextSlide,dur);
       thi.style.display = "none";
}

function toBegin(thi){
	goToSlide(0);
}

var copy = function(elementId) {
	var input = document.getElementById(elementId);
	var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);
	if (isiOSDevice) {
		var editable = input.contentEditable;
		var readOnly = input.readOnly;
		input.contentEditable = true;
		input.readOnly = false;
		var range = document.createRange();
		range.selectNodeContents(input);
		var selection = window.getSelection();
		selection.removeAllRanges();
		selection.addRange(range);
		input.setSelectionRange(0, 999999);
		input.contentEditable = editable;
		input.readOnly = readOnly;
	} else {
	 	input.select();
	}
	document.execCommand('copy'); 
	alert('copied to the clipboard'); 
	input.blur();
}

// Mexico

imgArr = [
"https://images.unsplash.com/photo-1473726867722-6b8a5e529d76?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwyfHxNZXhpY298ZW58MHx8fHwxNjc3MDU5MDA3&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1473726867722-6b8a5e529d76?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwyfHxNZXhpY298ZW58MHx8fHwxNjc3MDU5MDA3&ixlib=rb-4.0.3&q=80&w=1080#> Church at the mountain’s foot",

"https://images.unsplash.com/photo-1512813389649-acb9131ced20?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw1fHxNZXhpY298ZW58MHx8fHwxNjc3MDU5MDA3&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1512813389649-acb9131ced20?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw1fHxNZXhpY298ZW58MHx8fHwxNjc3MDU5MDA3&ixlib=rb-4.0.3&q=80&w=1080#> The pyramid of Chichen Itza, Mexico",

"https://images.unsplash.com/photo-1501855901885-8b29fa615daf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxMXx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAwNw&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1501855901885-8b29fa615daf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxMXx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAwNw&ixlib=rb-4.0.3&q=80&w=1080#> Washed Up",

"https://images.unsplash.com/photo-1530455235907-0a59ea1e04ea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw0NXx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAwOQ&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1530455235907-0a59ea1e04ea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw0NXx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAwOQ&ixlib=rb-4.0.3&q=80&w=1080",

"https://images.unsplash.com/photo-1551279880-03041531948f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw0Nnx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAwOQ&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1551279880-03041531948f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw0Nnx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAwOQ&ixlib=rb-4.0.3&q=80&w=1080#> The Parroquia de San Miguel Arcángel",

"https://images.unsplash.com/photo-1580846629083-02669741360a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw2NHx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAxMg&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1580846629083-02669741360a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw2NHx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAxMg&ixlib=rb-4.0.3&q=80&w=1080",

"https://images.unsplash.com/photo-1508642207-7048c482ba7e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw4MHx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAxMg&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1508642207-7048c482ba7e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHw4MHx8TWV4aWNvfGVufDB8fHx8MTY3NzA1OTAxMg&ixlib=rb-4.0.3&q=80&w=1080",

"https://images.unsplash.com/photo-1602294814340-70af0b2f0e74?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxMTR8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMTU&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1602294814340-70af0b2f0e74?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxMTR8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMTU&ixlib=rb-4.0.3&q=80&w=1080",

"https://images.unsplash.com/photo-1648880179904-718b31418b05?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxNjh8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjE&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1648880179904-718b31418b05?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxNjh8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjE&ixlib=rb-4.0.3&q=80&w=1080#> 8M Women's March 2021 in Acapulco, Mexico. Photo by Alex de La Rosa.",

"https://images.unsplash.com/photo-1658778177504-56b699e7f6b7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxOTJ8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjQ&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1658778177504-56b699e7f6b7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxOTJ8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjQ&ixlib=rb-4.0.3&q=80&w=1080#> Wonderland",

"https://images.unsplash.com/photo-1660670173026-ec491dd3dd1a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxOTV8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjQ&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1660670173026-ec491dd3dd1a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwxOTV8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjQ&ixlib=rb-4.0.3&q=80&w=1080#> The main square and cathedral in Ciudad de Oaxaca, Mexico. Made by Ryan from MagicSalesBot.com",

"https://images.unsplash.com/photo-1632192361605-c518a5087f1a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwyMjJ8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjc&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1632192361605-c518a5087f1a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwyMjJ8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjc&ixlib=rb-4.0.3&q=80&w=1080",

"https://images.unsplash.com/photo-1542430385-1ed81326f43e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwyMzB8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjc&ixlib=rb-4.0.3&q=80&w=400NaNhttps://images.unsplash.com/photo-1542430385-1ed81326f43e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDM4ODV8MHwxfHNlYXJjaHwyMzB8fE1leGljb3xlbnwwfHx8fDE2NzcwNTkwMjc&ixlib=rb-4.0.3&q=80&w=1080",

"https://live.staticflickr.com/65535/52696586025_052a2dab61_b.jpg#> Taxco 5.1.2023 0129",

"https://live.staticflickr.com/65535/52683915153_febcdd3221_o.jpg#> Iglesía de la Virgen de la Candelaria - La Candelaria Festival - Tlacotalpan, Veracruz, Mexico",

"https://live.staticflickr.com/65535/52683665684_282dacf471_o.jpg#> MayanRuins_052"
];

  </script>
</body>
</html>
JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)

RESPONSIVE SLIDESHOW

SOURCE CODE OF THIS HTML FILE

Popular posts from this blog

PHP JQUERY PROXY DEMO

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER

CHINESE COMIC
