NEW TEST SLIDESHOW

1 / 9

A Little Pink

SOURCE CODE OF THIS PAGE (flickr-slideshow-flowers.html)

<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
* {box-sizing: border-box;}

body {font-family: Verdana, sans-serif;}

.mySlides {
display: none;
}

img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 99%; /* 1000px; */
  position: relative;
  margin: auto;
  background-color:#003333;
  overflow:hidden;
}

/* Caption text */
.text {
  color: blue; /* #f2f2f2; */
  font-size: .5em; /* 15px; */
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;

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;

}

/* Number text (1/3 etc) */
.numbertext {
  color: white;
  font-size: 12pt;
  padding: 8px 12px;
  position: absolute;
  top: 0px;

font-weight:bold;
font-family: Arial, sans-serif;
background-color: rgba(0, 0, 0, 0.2);
  right: 0px;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 2s /* 1.5s; */
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

img{
	max-height:200px; /* 600px */
    max-width:100%;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

.hide{
display:none;
}
</style>
</head>
<body onload="showSlides()">
<div align="center">

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52695564428_34ffcd5231_b.jpg">
<div class="text"> A Little Pink</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694947486_31f3a2ba64_b.jpg">
<div class="text"> Mixed Petals</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694549091_35d624b47b_o.jpg">
<div class="text"> “Hope can be a powerful force. Maybe there’s no actual magic in it, but when you know what you hope for most and hold it like a light within you, you can make things happen, almost like magic.” _ Laini Taylor</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52695564428_34ffcd5231_b.jpg">
<div class="text"> A Little Pink</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694947486_31f3a2ba64_b.jpg">
<div class="text"> Mixed Petals</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52695564428_34ffcd5231_b.jpg">
<div class="text"> A Little Pink</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694947486_31f3a2ba64_b.jpg">
<div class="text"> Mixed Petals</div>
</div>

<p class="hide">
BEGIN OF PART 3</p>

</div>
<br>
<audio id="audio" preload="auto" tabindex="0" controls loop>
  <source src="https://pvhung20.000webhostapp.com/thousands-of-words.mp3">
</audio>
<br>
<h3 style="margin-bottom:8px">
SOURCE CODE OF THIS PAGE (flickr-slideshow-flowers.html)</h3>
<button onclick="copy('codeArea')" style="font-size:14pt">
Copy code to clipboard</button>
<br><br>
<textarea id="codeArea" style="width:600px; height:200px">
</textarea>

JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)

NEW TEST SLIDESHOW

SOURCE CODE OF THIS PAGE (flickr-slideshow-flowers.html)

Popular posts from this blog

PHP JQUERY PROXY DEMO

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER

CHINESE COMIC