#javascript #html #css
Вопрос:
У меня есть программа html/js/css для отображения папки с изображениями. Ландшафтные изображения в основном отображаются правильно. Но когда я добираюсь до портретного изображения, его ширина слишком велика, и оно показывает растянутое изображение. Когда я перехожу к следующему изображению, которое является пейзажным, оно отображается с уменьшенной шириной. Если я затем создам резервную копию портретного изображения, оно будет показано с правильной шириной. У меня есть несколько папок с изображениями, в каждой из которых есть свой собственный html-файл для их отображения. HTML-файл получает имя папки из своего имени. Идея заключалась в том, что для html-файлов должен был быть один основной источник, который можно было бы скопировать и переименовать, чтобы обеспечить отправные точки для каждой из папок с изображениями.
Как я могу заставить код правильно отображать портретные изображения в первый раз?
HTML-файл:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="RSSLib/NewSS.css">
<script>
// parse filename from URL (precedes With) and use it to load js file
console.log("location=" location.href); // location=file:///D:/Norms/Javascript/ReadFile.html
var pos = location.href.indexOf("With");
if(pos > 0) {
var query = location.href.substr(0, pos);
// with query data added: location=file:///D:/Norms/Javascript/ReadFile.html?somedata
// How do create a <script src= statement to load a js file here???
// create a <script> element on the fly that references something.js.
// See: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
var script = document.createElement('script');
script.src = query "/LoadImageRefs.js";
script.type = "text/javascript";
script.async = true; //false; //???? fails with both
script.defer = false; // no help
script.onload = function(){
// remote script has loaded
console.log("Loaded script: " script.src); // Loaded script: file:///E:/DigitalImages/2018_CruiseToEurope/LoadImageRefs.js
showSlides(1); //???? hard code for testing
};
document.head.appendChild(script); //<<<Need this
}
// List of buttons that should change when automatic
var btnsToEnDis = new Array("nextBtn", "previousBtn", "skipLeft", "skipRight");
</script>
</head>
<body onload="startTheShow()">
<!-- Full-width images with number text -->
<table width="100%">
<tr style="vertical-align:top">
<td width="9%">
<div class="numbertext" id="numbers">? / ?</div>
<!-- caption under the numbers -->
<div class="caption-container" style="display: inline-block; margin: 30px 0px 0px 10px; padding: 0px 5px 0px 5px">
<p id="caption"></p>
</div>
<!-- How to put controls vertically here? -->
<button class="button" type="button" id="nextBtn" title="Go to next"
onClick="plusSlides(1);">Next</button>
<button class="button" type="button" id="previousBtn" title="Go to previous"
onClick="plusSlides(-1);">Previous</button>
<button class="button" type="button" style="margin: 5px 0px 0px 20px; padding: 10px 5px" id="pauseStartBtn"
title="Pause/Start auto show" onclick="pause(this)">Pause</button>
<button class="button" type="button" id="command" title="Enter command" onclick="askQuestion()"
style="padding: 10px 5px">Command</button>
<button class="button" type="button" id="skipLeft" title="Skip left" onclick="skipLeft()">Skip left</button>
<button class="button" type="button" id="skipRight" title="Skip right" onclick="skipRight()"
style="padding: 10px 5px">Skip right</button>
<button class="button" type="button" id="slowDown" title="Slow showing" onclick="slower()">Slow showing</button>
<button class="button" type="button" id="speedUp" title="Speedup showing" onclick="faster()">Speedup showing</button>
</td>
<td width="91%">
<div class="mySlides" id="theImageDiv">
<CENTER>
<!-- width seems to control if image extends past bottom -->
<IMG SRC="jpg/imageFNs[0]" id="theImage" style="max-height:890px" alt="">
</CENTER>
</div>
</td>
</tr>
</table>
<script language="JavaScript" src="RSSLib/NewSS1.js">
</script>
</body>
</html>
В NewSS1.js файл:
// New technique
var slideIndex = 1;
var intervalID = -1;
var pauseFlag = "off" // ="on" if paused
var dur = 5
var skipAmt = 20; // how many to skip over
function startTheShow() {
disableBtns();
showSlides(slideIndex);
/* Start automatic show */
intervalID = setInterval("nextImage()", dur * 1000)
resize();
window.onresize = function() {
resize();
};
}
function resize()
{
var height = window.innerHeight;
var width = window.innerWidth;
var theWidth = 95; // for Portrait (w < h)
if(width > height)
theWidth = 70; // for landscape
console.log("resize w=" width ", h=" height ", theWidth=" theWidth);
//???? document.getElementById("theImage").style.width = theWidth "%";
}
function nextImage() {
if(pauseFlag != "off") { // Should never happen
console.log("nextImage??? pauseFlag=" pauseFlag ", intervalID=" intervalID);
}
showSlides(slideIndex );
}
function pause(win) {
console.log("pause intervalID=" intervalID ", pauseFlag=" pauseFlag);
if (pauseFlag == "off") { // Not paused - pause the show
pauseFlag = "on";
clearInterval(intervalID); /* Stop show */
intervalID = -1;
win.innerHTML = "Start";
enableBtns();
}else if(pauseFlag == "on") { // we are paused
pauseFlag = "off";
intervalID = setInterval("nextImage()", dur * 1000); /* start show */
win.innerHTML = "Pause"; // restore btn
disableBtns();
}else{
alert("Invalid pauseFlag=" pauseFlag);
}
}
function slower() {
if (dur < 60) {
dur
// slideIndex--; // to keep from going too fast
if(intervalID != -1) {
clearInterval(intervalID); /* Stop automatic show */
intervalID = setInterval("nextImage()", dur * 1000) /* start show */
}
console.log("slower dur=" dur ", intervalID=" intervalID);
}
}
function faster() {
if (dur > 3) {
dur--
// slideIndex--; // to keep from going too fast
if(intervalID != -1) {
clearInterval(intervalID); /* Stop automatic show */
intervalID = setInterval("nextImage()", dur * 1000) /* start show */
}
console.log("faster dur=" dur ", intervalID=" intervalID);
}
}
function skipLeft() {
plusSlides(-skipAmt);
}
function skipRight() {
plusSlides(skipAmt);
}
function plusSlides(n) {
// ignore if auto show?
if(pauseFlag == "off")
return;
showSlides(slideIndex = n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var captionText = document.getElementById("caption");
var numbersText = document.getElementById("numbers");
// Keep index in bounds
if (n > imageFNs.length) {slideIndex = 1}
if (n < 1) {slideIndex = imageFNs.length}
console.log("Showing " slideIndex ", n=" n " at " new Date().getSeconds());
for (i = 0; i < slides.length; i ) {
slides[i].style.display = "none";
}
slides[0].style.display = "block"; // <<<<<<<<<<WORKS!!!
var theImageRef = document.getElementById('theImage');
theImageRef.src = imagesFolder imageFNs[slideIndex-1];
theImageRef.alt = imageFNs[slideIndex-1];
var ratio = Math.min(window.innerWidth / theImageRef.naturalWidth, (window.innerHeight-50) / theImageRef.naturalHeight); // -50 for border stuff?
/* ??? Do the following work ??? */
theImageRef.width = theImageRef.naturalWidth * ratio; // 'px';
theImageRef.style.width = 600; //??????
theImageRef.height = theImageRef.naturalHeight * ratio; // 'px';
console.log("ratio= " ratio ", winIW=" window.innerWidth ", winIH=" window.innerHeight
", imgW=" theImageRef.width ", imgH=" theImageRef.height
", nW=" theImageRef.naturalWidth " nH=" theImageRef.naturalHeight);
var fileNm = imageFNs[slideIndex-1];
var ix = fileNm.lastIndexOf(".");
captionText.innerHTML = fileNm.substring(0,ix); //imageFNs[slideIndex-1];
numbersText.innerHTML = slideIndex " / " imageFNs.length;
}
//--------------------------------------------------------------------------------
// Get some options from user
function askQuestion() {
var option = prompt("1=goto #, 2=skip Amt, 3=duration, 4=searchForName", 1);
if(option == 1) {
var slideNbr = prompt("Slide to go to", slideIndex);
currentSlide(parseInt(slideNbr));
}else if(option == 2){
var newSkip = prompt("Set skip amount to", skipAmt);
if(newSkip > 0 amp;amp; newSkip < imageFNs.length/2)
skipAmt = parseInt(newSkip);
}else if(option == 3) {
var newDur = prompt("Set time between images", dur);
if(newDur > 2 amp;amp; newDur < 100) {
dur = parseInt(newDur) 1; // 1 for faster call
faster(); // use this method to set it up
}
}else if(option == 4) {
var srchVal = prompt("Enter value to search for");
if(srchVal == undefined)
return;
for(i=0; i < imageFNs.length; i ) {
if(imageFNs[i].indexOf(srchVal) >= 0) {
console.log("found " srchVal " in " imageFNs[i] " i=" i);
currentSlide(i 1); // 1 because 1 based
return;
}
}
alert("Search value not found:" srchVal);
}else {
alert("Unknown option: " option);
}
}
function setTitle(btnId, name) {
document.getElementById(btnId).innerText = name;
}
function disableBtn(btnName) {
document.getElementById(btnName).disabled = true;
}
function enableBtn(btnName) {
document.getElementById(btnName).disabled = false;
}
function disableBtns() {
console.log("disabled count: " btnsToEnDis.length);
for(i=0; i< btnsToEnDis.length; i ) {
disableBtn(btnsToEnDis[i]);
// console.log("disabled: " btnsToEnDis[i]);
}
}
function enableBtns() {
for(i=0; i< btnsToEnDis.length; i ) {
enableBtn(btnsToEnDis[i]);
// console.log("enabled: " btnsToEnDis[i]);
}
}
The NewSS.css file:
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next amp; previous buttons */
.prevXX,
.nextXX,
.stop {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.nextXX {
right: 0;
border-radius: 3px 0 0 3px;
}
.next, .prev,
.stop,
.skipLeft,
.skipRight,
.faster,
.slower,
.question {
position: relative;
align-self: center;
padding: 10px;
bottom: -1px;
}
.stop:hover,
.slower:hover,
.faster:hover,
.skipLeft:hover,
.skipRight:hover,
.question:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.9);
}
/* Number text (1/3 etc) color was f2f2f2 */
.numbertext {
color: #c1c1c1;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
margin: 1%;
color: white;
}
/* New greenish buttons */
.box-set,
.box {
border-radius: 3px;
}
.box-set {
background: #eaeaed;
justify-content: center;
}
.box {
background: #9feaaf;
float: left;
margin: 1%;
padding: 4px 0;
text-align: center;
width: 2%;
}
.boxV {
background: #9feaaf;
margin: 5px 30px 5px 30px;
padding: 5px 20px 5px 10px;
text-align: center;
width: 13%;
}
.box:hover {
background-color: rgba(215, 240, 220, 0.8);
}
.button {
background-color: #ebeb9d;
color: #4CAF50;
border: none;
border-radius: 6px;
padding: 10px 15px;
margin: 5px 0px 0px 20px;
text-align: center;
font-size: 16px;
cursor: pointer;
width: 90px;
display: block; /* make sure all vertical */
}
.button:hover {
background-color: green;
}
.button:disabled{
background-color: gray;
}
Некоторые строки из списка изображений (LoadImageRefs.js) :
var imageFNs = new Array(
"LeavingSanFrancisco.jpg", "Foulies.jpg", "SanDiegoPoliceDock.jpg", "EnteringABajaAnchorage.jpg", "CaboRocksFromOutside.jpg",
...
"BackInTheColdWeather.jpg",
"SanSimeonAnchorage.jpg", );
var imagesFolder = "WorldCruise/jpg/";
Для этого списка изображений файл .html будет находиться в той же папке, что и папка WorldCruise, а изображения будут находиться в папке WorldCruise/jpg.