Add close modal on cliking img
Hide link by default
This commit is contained in:
parent
a59950db91
commit
0883e1a6b1
2 changed files with 69 additions and 58 deletions
100
index.php
100
index.php
|
@ -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,8 +35,8 @@ $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),
|
||||||
'',
|
'',
|
||||||
'&');
|
'&'
|
||||||
|
);
|
||||||
$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 . '&page=' . $i . '" class="w3-button w3-hover-theme">' . $i . '</a>';
|
$page_navigation .= '<a href="?dir=' . $requestedDir . '&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 . '&page=all" class="w3-button w3-hover-theme">'.$label_all.'</a>';
|
$page_navigation .= '<a href="?dir=' . $requestedDir . '&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>';
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue