Knah-Tsaeb/Minigalnano
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add close modal on cliking img

Browse source 
Hide link by default
This commit is contained in:
Knah Tsaeb 2021-08-03 13:57:33 +02:00
parent a59950db91
commit 0883e1a6b1
2 changed files with 69 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
index.php
View file

@ -10,23 +10,23 @@
error_reporting(-1); error_reporting(-1);
/** /**
* Améliore la sortie print * Améliore la sortie print
* *
* @author Tatane http://www.tatane.info/index.php/print_rn * @author Tatane http://www.tatane.info/index.php/print_rn
* @author http://www.blog.cactuscrew.com/77-print_rn.html * @author http://www.blog.cactuscrew.com/77-print_rn.html
* @param $data (array) tableau ou variable à examiner * @param $data (array) tableau ou variable à examiner
* @param $name (string) nom a afficher * @param $name (string) nom a afficher
* @return false affiche les clef valeur du tableau $data * @return false affiche les clef valeur du tableau $data
* @example n_print($array, 'Tableau de valeur'); * @example n_print($array, 'Tableau de valeur');
*/ */
function n_print($data, $name = '') { function n_print($data, $name = '') {
$aBackTrace = debug_backtrace(); $aBackTrace = debug_backtrace();
echo '<h2>', $name, '</h2>'; echo '<h2>', $name, '</h2>';
echo '<fieldset style="border: 1px solid orange; padding: 5px;color: #333; background-color: #fff;">'; echo '<fieldset style="border: 1px solid orange; padding: 5px;color: #333; background-color: #fff;">';
echo '<legend style="border:1px solid orange;padding: 1px;background-color:#eee;color:orange;">', basename($aBackTrace[0]['file']), ' ligne => ', $aBackTrace[0]['line'], '</legend>'; echo '<legend style="border:1px solid orange;padding: 1px;background-color:#eee;color:orange;">', basename($aBackTrace[0]['file']), ' ligne => ', $aBackTrace[0]['line'], '</legend>';
echo '<pre>', htmlentities(print_r($data, 1)), '</pre>'; echo '<pre>', htmlentities(print_r($data, 1)), '</pre>';
echo '</fieldset><br />'; echo '</fieldset><br />';
} }
// Do not edit below this section unless you know what you are doing! // Do not edit below this section unless you know what you are doing!
@ -35,7 +35,7 @@ $version = "0.4.0";
ini_set("memory_limit", "256M"); ini_set("memory_limit", "256M");
require "config-default.php"; require "config-default.php";
if(file_exists('config.php')){ if (file_exists('config.php')) {
include "config.php"; include "config.php";
} }
@ -62,8 +62,7 @@ if (!function_exists('exif_read_data') && $display_exif == 1) {
//----------------------- //-----------------------
// FUNCTIONS // FUNCTIONS
//----------------------- //-----------------------
function padstring($name, $length) function padstring($name, $length) {
{
global $label_max_length; global $label_max_length;
if (!isset($length)) { if (!isset($length)) {
$length = $label_max_length; $length = $label_max_length;
@ -74,8 +73,7 @@ function padstring($name, $length)
return $name; return $name;
} }
function getfirstImage($dirname) function getfirstImage($dirname) {
{
$imageName = false; $imageName = false;
$extensions = array("jpg", "png", "jpeg", "gif", "bmp"); $extensions = array("jpg", "png", "jpeg", "gif", "bmp");
if ($handle = opendir($dirname)) { if ($handle = opendir($dirname)) {
@ -98,8 +96,7 @@ function getfirstImage($dirname)
return $imageName; return $imageName;
} }
function parse_fraction($v, $round = 0) function parse_fraction($v, $round = 0) {
{
list($x, $y) = array_map('intval', explode('/', $v)); list($x, $y) = array_map('intval', explode('/', $v));
if (empty($x) || empty($y)) { if (empty($x) || empty($y)) {
return $v; return $v;
@ -113,8 +110,7 @@ function parse_fraction($v, $round = 0)
return round($x / $y, $round); return round($x / $y, $round);
} }
function readEXIF($file) function readEXIF($file) {
{
$exif_arr = array(); $exif_arr = array();
$exif_data = exif_read_data($file); $exif_data = exif_read_data($file);
@ -150,8 +146,7 @@ function readEXIF($file)
return $exif_arr; return $exif_arr;
} }
function checkpermissions($file) function checkpermissions($file) {
{
global $messages; global $messages;
if (!is_readable($file)) { if (!is_readable($file)) {
@ -162,13 +157,12 @@ function checkpermissions($file)
} }
} }
function guardAgainstDirectoryTraversal($path) function guardAgainstDirectoryTraversal($path) {
{
$pattern = "/^(.*\/)?(\.\.)(\/.*)?$/"; $pattern = "/^(.*\/)?(\.\.)(\/.*)?$/";
$directory_traversal = preg_match($pattern, $path); $directory_traversal = preg_match($pattern, $path);
if ($directory_traversal === 1) { if ($directory_traversal === 1) {
die("ERROR: Could not open " . htmlspecialchars(stripslashes($current_dir)) . " for reading!"); die("ERROR: Could not open " . htmlspecialchars(stripslashes($path)) . " for reading!");
} }
} }
@ -199,7 +193,7 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
if (is_readable($caption_filename)) { if (is_readable($caption_filename)) {
$caption_handle = fopen($caption_filename, "rb"); $caption_handle = fopen($caption_filename, "rb");
while (!feof($caption_handle)) { while (!feof($caption_handle)) {
$caption_line = fgetss($caption_handle); $caption_line = fgets($caption_handle);
if (empty($caption_line)) { if (empty($caption_line)) {
continue; continue;
} }
@ -320,23 +314,23 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
$filename_caption = ''; $filename_caption = '';
} }
if (is_file($current_dir . '/' . $file . '.html')) { if (is_file($current_dir . '/' . $file . '.html')) {
$imgComment = $img_captions[$file] = '<h4>'.$file . '</h4>' . htmlspecialchars(file_get_contents($current_dir . '/' . $file . '.html'), ENT_QUOTES); $imgComment = $img_captions[$file] = '<h4>' . $file . '</h4>' . htmlspecialchars(file_get_contents($current_dir . '/' . $file . '.html'), ENT_QUOTES);
} else { } else {
$imgComment = '<h4>'.$file . '</h4>'; $imgComment = '<h4>' . $file . '</h4>';
} }
// JPG, GIF and PNG // JPG, GIF and PNG
if (preg_match("/.jpg$|.gif$|.bmp$|.png$/i", $file)) { if (preg_match("/.jpg$|.gif$|.bmp$|.png$/i", $file)) {
$path_parts = pathinfo($file); $path_parts = pathinfo($file);
if(file_exists($current_dir.'/'.$path_parts['filename'].'.mp4')){ if (file_exists($current_dir . '/' . $path_parts['filename'] . '.mp4')) {
$dataVideo = ' data-video="'.$current_dir.'/'.$path_parts['filename'].'.mp4'.'" '; $dataVideo = ' data-video="' . $current_dir . '/' . $path_parts['filename'] . '.mp4' . '" ';
if (is_file($current_dir.'/'.$path_parts['filename'].'.info.json')) { if (is_file($current_dir . '/' . $path_parts['filename'] . '.info.json')) {
$infoContent = json_decode(file_get_contents($current_dir.'/'.$path_parts['filename'].'.info.json')); $infoContent = json_decode(file_get_contents($current_dir . '/' . $path_parts['filename'] . '.info.json'));
$descContent = nl2br(htmlspecialchars('<span>Origin : </span>'.$infoContent->webpage_url.'<br><span>Description : </span>'.$infoContent->description)); $descContent = nl2br(htmlspecialchars('<span>Origin : </span>' . $infoContent->webpage_url . '<br><span>Description : </span>' . $infoContent->description));
$imgComment = $img_captions[$file] = '<h4>'.$file . '</h4>'.$descContent; $imgComment = $img_captions[$file] = '<h4>' . $file . '</h4>' . $descContent;
} else { } else {
$imgComment = '<h4>'.$file . '</h4>'; $imgComment = '<h4>' . $file . '</h4>';
} }
$videoWithComment = true; $videoWithComment = true;
} else { } else {
@ -363,7 +357,8 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
$imgParams = http_build_query( $imgParams = http_build_query(
array('filename' => "$thumbdir/$file", 'size' => $thumb_size), array('filename' => "$thumbdir/$file", 'size' => $thumb_size),
'', '',
'&amp;'); '&amp;'
);
$imgUrl = GALLERY_ROOT . "createthumb.php?$imgParams"; $imgUrl = GALLERY_ROOT . "createthumb.php?$imgParams";
if ($lazyload) { if ($lazyload) {
$imgopts = "class=\"b-lazy\" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src=\"$imgUrl\""; $imgopts = "class=\"b-lazy\" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src=\"$imgUrl\"";
@ -377,11 +372,12 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
"html" => ' "html" => '
<div> <div>
<p class="w3-black"> <p class="w3-black">
<a onclick="onClick(this);return false;" '.$dataVideo.' href="'.$linkUrl.'" data-desc="'.$imgComment.'" title="' . htmlentities($img_captions[$file]) . '"> <a onclick="onClick(this);return false;" ' . $dataVideo . ' href="' . $linkUrl . '" data-desc="' . $imgComment . '" title="' . htmlentities($img_captions[$file]) . '">
<img '.$imgopts.' alt="'.$label_loading.'" class="w3-round" /> <img ' . $imgopts . ' alt="' . $label_loading . '" class="w3-round" />
</a>'. $filename_caption . ' </a>' . $filename_caption . '
</p> </p>
</div>'); </div>'
);
} }
// Other filetypes // Other filetypes
$extension = ""; $extension = "";
@ -418,9 +414,9 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
} }
// Excel // Excel
if (preg_match("/\.ogv$|\.mp4$|\.mpg$|\.mpeg$|\.mov$|\.avi$|\.wmv$|\.flv$|\.webm$/i", $file) && empty($videoWithComment)) { if (preg_match("/\.ogv$|\.mp4$|\.mpg$|\.mpeg$|\.mov$|\.avi$|\.wmv$|\.flv$|\.webm$/i", $file) && empty($videoWithComment)) {
$extension = "VIDEO"; $extension = "VIDEO";
} }
// video files // video files
if (preg_match("/\.aiff$|\.aif$|\.wma$|\.aac$|\.flac$|\.mp3$|\.ogg$|\.m4a$/i", $file)) { if (preg_match("/\.aiff$|\.aif$|\.wma$|\.aac$|\.flac$|\.mp3$|\.ogg$|\.m4a$/i", $file)) {
$extension = "AUDIO"; $extension = "AUDIO";
} }
@ -433,11 +429,12 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
"html" => ' "html" => '
<div> <div>
<p> <p>
<a href="'.$current_dir.'/'.$file.'" title="'.$file.'"> <a href="' . $current_dir . '/' . $file . '" title="' . $file . '">
<img src="' . GALLERY_ROOT .'images/filetype_' . $extension . '.png" alt="'.$file.'" width="'.$thumb_size.'" height="'.$thumb_size.'"/> <img src="' . GALLERY_ROOT . 'images/filetype_' . $extension . '.png" alt="' . $file . '" width="' . $thumb_size . '" height="' . $thumb_size . '"/>
</a>'.$filename_caption.' </a>' . $filename_caption . '
</p> </p>
</div>'); </div>'
);
} }
} }
} }
@ -500,7 +497,7 @@ if ($_GET["page"] == "all" || $lazyload) {
if (!$lazyload && $nbDir + $nbFile > $thumbs_pr_page) { if (!$lazyload && $nbDir + $nbFile > $thumbs_pr_page) {
for ($i = 1; $i <= ceil(($nbFile + $nbDir) / $thumbs_pr_page); $i++) { for ($i = 1; $i <= ceil(($nbFile + $nbDir) / $thumbs_pr_page); $i++) {
if ($_GET["page"] == $i) { if ($_GET["page"] == $i) {
$page_navigation .= '<a href="#" class="w3-button w3-theme">'.$i.'</a>'; $page_navigation .= '<a href="#" class="w3-button w3-theme">' . $i . '</a>';
} else { } else {
$page_navigation .= '<a href="?dir=' . $requestedDir . '&amp;page=' . $i . '" class="w3-button w3-hover-theme">' . $i . '</a>'; $page_navigation .= '<a href="?dir=' . $requestedDir . '&amp;page=' . $i . '" class="w3-button w3-hover-theme">' . $i . '</a>';
} }
@ -508,13 +505,12 @@ if (!$lazyload && $nbDir + $nbFile > $thumbs_pr_page) {
if ($i != ceil(($nbFile + $nbDir) / $thumbs_pr_page)) { if ($i != ceil(($nbFile + $nbDir) / $thumbs_pr_page)) {
//$page_navigation .= " | "; //$page_navigation .= " | ";
} }
} }
//Insert link to view all images //Insert link to view all images
if ($_GET["page"] == "all") { if ($_GET["page"] == "all") {
$page_navigation .= "$label_all"; $page_navigation .= "$label_all";
} else { } else {
$page_navigation .= '<a href="?dir=' . $requestedDir . '&amp;page=all" class="w3-button w3-hover-theme">'.$label_all.'</a>'; $page_navigation .= '<a href="?dir=' . $requestedDir . '&amp;page=all" class="w3-button w3-hover-theme">' . $label_all . '</a>';
} }
} }
@ -581,7 +577,7 @@ if ($i < 0) {
} }
for ($y = $i; $y < $nbFile; $y++) { for ($y = $i; $y < $nbFile; $y++) {
if(empty($img_captions[$files[$y]['name']])){ if (empty($img_captions[$files[$y]['name']])) {
$img_captions[$files[$y]['name']] = $files[$y]['name']; $img_captions[$files[$y]['name']] = $files[$y]['name'];
} }
$page_navigation .= '<a href="' . $current_dir . '/' . $files[$y]['name'] . '" class="hidden" title="' . $img_captions[$files[$y]['name']] . '"></a>'; $page_navigation .= '<a href="' . $current_dir . '/' . $files[$y]['name'] . '" class="hidden" title="' . $img_captions[$files[$y]['name']] . '"></a>';

27
templates/NeoKT.html
View file

@ -134,7 +134,7 @@
#modal-content-img img, #modal-content-img img,
#video01 video { #video01 video {
max-width: 98%; max-width: 98%;
max-height: 72vh; max-height: 73vh;
padding: 4px; padding: 4px;
} }
@ -145,14 +145,17 @@
box-shadow: 0px 5px rgba(89, 0, 46, 0.5); box-shadow: 0px 5px rgba(89, 0, 46, 0.5);
text-align: left; text-align: left;
width: 85vw; width: 85vw;
font-size: .9rem;
} }
#comment01 span { #comment01 span {
font-size: 1rem; font-size: .8rem;
font-weight: bold; font-weight: bold;
} }
.modal-content .w3-theme-d3 ul {
font-size: .9rem;
}
.fas { .fas {
font-size: 2.5em; font-size: 2.5em;
} }
@ -161,13 +164,17 @@
font-size: 2.5em; font-size: 2.5em;
font-weight: bolder; font-weight: bolder;
text-align: right; text-align: right;
margin: 0; margin: 0 1rem 0 0;
padding: 0; padding: 0;
} }
.closeModal a { .closeModal a {
text-decoration: none; text-decoration: none;
} }
.toggle {
display: none;
}
</style> </style>
</head> </head>
@ -199,12 +206,13 @@
<div id="modal01" class="w3-modal w3-animate-zoom"> <div id="modal01" class="w3-modal w3-animate-zoom">
<p class="closeModal"><a href="#" onclick="closeModal(); return false;">X</a></p> <p class="closeModal"><a href="#" onclick="closeModal(); return false;">X</a></p>
<div class="modal-content"> <div class="modal-content">
<div id="modal-content-img"><img id="img01"></div> <div id="modal-content-img" onclick="closeModal(); return false;"><img id="img01"></div>
<div id="video01"></div> <div id="video01"></div>
<div class="w3-theme-d3 w3-shadow"> <div class="w3-theme-d3 w3-shadow">
<p id="comment01"></p> <p id="comment01"></p>
<p> <p>
<ul style="text-align: left;"> <a href="#" id="toggle">View sharelink</a>
<ul style="text-align: left;" id="shareLink">
<li id="thumburl"></li> <li id="thumburl"></li>
<li id="fullurl"></li> <li id="fullurl"></li>
<li id="markdown"></li> <li id="markdown"></li>
@ -226,9 +234,16 @@
<script src="<% gallery_root %>js/lazy.js"></script> <script src="<% gallery_root %>js/lazy.js"></script>
<script src="<% gallery_root %>js/script.js"></script> <script src="<% gallery_root %>js/script.js"></script>
<script> <script>
document.querySelector('#shareLink').classList.toggle('toggle');
document.querySelector('#toggle').onclick = function() {
console.log('here');
document.querySelector('#shareLink').classList.toggle('toggle');
}
function closeModal() { function closeModal() {
document.getElementById("modal01").style.display = "none" document.getElementById("modal01").style.display = "none"
document.getElementById("video01").innerHTML = null; document.getElementById("video01").innerHTML = null;
document.getElementById("img01").src = null;
} }
function onClick(element) { function onClick(element) {