globális definíciók kiemelve, opacity-értékek javítva

globals.php

@@ -0,0 +1,6 @@
+<?php
+    // SQL-paraméterek
+    define("SQL_USER", "photowall_user");
+    define("SQL_PASS", "photowpwd");
+    define("SQL_DB", "photowall_db");
+    define("SQL_IP", "172.28.0.6");

interface.php

@@ -1,18 +1,15 @@
 <?php
+
 ini_set("display_errors", "On");
 
+include_once "globals.php";
+
 // könyvtárak
 define("ARTWORKS_DIR", "ARTWORKS");
 define("INCOMING_DIR", ARTWORKS_DIR . DIRECTORY_SEPARATOR . "incoming");
 define("PUBLISHED_DIR", ARTWORKS_DIR . DIRECTORY_SEPARATOR . "published");
 define("THUMBNAIL_DIR", ARTWORKS_DIR . DIRECTORY_SEPARATOR . "thumbnails");
 
-// SQL-paraméterek
-define("SQL_USER", "photowall_user");
-define("SQL_PASS", "photowpwd");
-define("SQL_DB", "photowall_db");
-define("SQL_IP", "172.28.0.6");
-
 // olyan szöveget ad vissza, amibe csak angol ABC betűi és számok szerepelnek (KL)
 function only_alpha_numeric($input){
     return preg_replace("/[^a-zA-Z0-9_]+/", "", $input);

js/phw.js

@@ -211,6 +211,7 @@ var wall_height = 0; // a fal magassága, pixelben
 var dynamic_load_distance = 200; // ennyi pixellel a fal alja előtt indítja a dinamikus betöltést
 var dynamic_loading_under_way = false; // dinamikus töltés folyamatban, ne indítsunk új requestet
 var update_interval = 10000; // automatikus frissítés 10 másodpercenként
+var max_scaled_size_factor = 1.2; // hányszorosa lehet a nagyított kép az eredetinek
 
 var thumbnails = [];
 
@@ -363,6 +364,19 @@ function compose_wall() {
 
         // képek elhelyzése
         for (let i = 0; i < line_entries.length; i++) {
+            // méret kiszámítása
+            let thumb_width = line_entries[i].width * line_entries[i].scale_factor;
+            let thumb_height = line_entries[i].height * line_entries[i].scale_factor;
+
+            // ha bármelyik nagyobb, mint max_scaled_size_factor * hosszabb_oldal pixel, akkor visszaskálázzuk;
+            let bigger_dim = Math.max(thumb_width, thumb_height);
+            let max_scaled_size = max_scaled_size_factor * thumb_largest_side;
+            if (bigger_dim > max_scaled_size) {
+                let s = max_scaled_size / bigger_dim;
+                thumb_width *= s;
+                thumb_height *= s;
+            }
+
             // képet tároló elem
             let container_section = document.createElement("section");
             container_section.style.backgroundColor = line_entries[i].ColorMean;
@@ -371,11 +385,11 @@ function compose_wall() {
             // a bélyegkép
             let img = document.createElement("img");
             img.classList.add("thumbnail");
-            container_section.style.width = img.style.width = `${line_entries[i].width * line_entries[i].scale_factor}px`;
-            container_section.style.height = img.style.height = `${line_entries[i].height * line_entries[i].scale_factor}px`;
+            container_section.style.width = img.style.width = `${thumb_width}px`;
+            container_section.style.height = img.style.height = `${thumb_height}px`;
             img.src = `ARTWORKS/thumbnails/${line_entries[i].Image_FileName}`;
             img.addEventListener("load", (e) => {
-                img.style.opacity = "100%";
+                img.style.opacity = "1";
             }, false);
             img.details = line_entries[i];
             img.addEventListener("click", (e) => {
@@ -480,7 +494,7 @@ function init_viewer() {
 
     // betöltéskor a felirat megjelenítése
     img.addEventListener("load", (e) => {
-        img.style.opacity='100%'
+        img.style.opacity="1";
         place_artcaptions();
         show(caption_sect);
     }, false);

phw.css

@@ -127,12 +127,12 @@ section.upload-btn {
 *[shown="false"] {
     visibility: hidden;
     display: none;
-    opacity: 0%;
+    opacity: 0;
     transition: 0.3s ease;
 }
 
 *[shown="true"] {
-    opacity: 100%;
+    opacity: 1;
     transition: 0.3s ease;
 }
 
@@ -245,7 +245,7 @@ section.viewer {
 
 section.viewer[shown="true"]
 {
-    opacity: 100%;
+    opacity: 1;
 }
 
 img.viewer {
@@ -302,7 +302,7 @@ section.art-captions {
     padding-bottom: 2em;
     background-color: rgba(0, 0, 0, 0.6);
 
-    opacity: 0%;
+    opacity: 0;
     max-height: 24px;
 
     transition: 1s ease;
@@ -325,7 +325,7 @@ section.art-captions[shown="true"]:hover {
 }
 
 section[shown="true"] {
-    opacity: 100%;
+    opacity: 1;
 }
 
 @media only screen and (max-width: 600px) {
@@ -365,5 +365,5 @@ span.thumb-title {
 }
 
 section.thumbnail-container:hover > span.thumb-title {
-    opacity: 100%;
+    opacity: 1;
 }