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

WEB PROGRAMMING ON IPAD. Search yt videos by keyword and load js file to play

SEARCH FOR PIXABAY PHOTOS
