Add close modal on cliking img
Hide link by default
This commit is contained in:
Knah Tsaeb
parent
a59950db91
commit
0883e1a6b1
2 changed files with 69 additions and 58 deletions
74
index.php
74
index.php
|
|
@ -19,14 +19,14 @@ error_reporting(-1);
|
|||
* @return false affiche les clef valeur du tableau $data
|
||||
* @example n_print($array, 'Tableau de valeur');
|
||||
*/
|
||||
function n_print($data, $name = '') {
|
||||
function n_print($data, $name = '') {
|
||||
$aBackTrace = debug_backtrace();
|
||||
echo '<h2>', $name, '</h2>';
|
||||
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 '<pre>', htmlentities(print_r($data, 1)), '</pre>';
|
||||
echo '</fieldset><br />';
|
||||
}
|
||||
}
|
||||
|
||||
// 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");
|
||||
|
||||
require "config-default.php";
|
||||
if(file_exists('config.php')){
|
||||
if (file_exists('config.php')) {
|
||||
include "config.php";
|
||||
}
|
||||
|
||||
|
|
@ -62,8 +62,7 @@ if (!function_exists('exif_read_data') && $display_exif == 1) {
|
|||
//-----------------------
|
||||
// FUNCTIONS
|
||||
//-----------------------
|
||||
function padstring($name, $length)
|
||||
{
|
||||
function padstring($name, $length) {
|
||||
global $label_max_length;
|
||||
if (!isset($length)) {
|
||||
$length = $label_max_length;
|
||||
|
|
@ -74,8 +73,7 @@ function padstring($name, $length)
|
|||
return $name;
|
||||
}
|
||||
|
||||
function getfirstImage($dirname)
|
||||
{
|
||||
function getfirstImage($dirname) {
|
||||
$imageName = false;
|
||||
$extensions = array("jpg", "png", "jpeg", "gif", "bmp");
|
||||
if ($handle = opendir($dirname)) {
|
||||
|
|
@ -98,8 +96,7 @@ function getfirstImage($dirname)
|
|||
return $imageName;
|
||||
}
|
||||
|
||||
function parse_fraction($v, $round = 0)
|
||||
{
|
||||
function parse_fraction($v, $round = 0) {
|
||||
list($x, $y) = array_map('intval', explode('/', $v));
|
||||
if (empty($x) || empty($y)) {
|
||||
return $v;
|
||||
|
|
@ -113,8 +110,7 @@ function parse_fraction($v, $round = 0)
|
|||
return round($x / $y, $round);
|
||||
}
|
||||
|
||||
function readEXIF($file)
|
||||
{
|
||||
function readEXIF($file) {
|
||||
$exif_arr = array();
|
||||
$exif_data = exif_read_data($file);
|
||||
|
||||
|
|
@ -150,8 +146,7 @@ function readEXIF($file)
|
|||
return $exif_arr;
|
||||
}
|
||||
|
||||
function checkpermissions($file)
|
||||
{
|
||||
function checkpermissions($file) {
|
||||
global $messages;
|
||||
|
||||
if (!is_readable($file)) {
|
||||
|
|
@ -162,13 +157,12 @@ function checkpermissions($file)
|
|||
}
|
||||
}
|
||||
|
||||
function guardAgainstDirectoryTraversal($path)
|
||||
{
|
||||
function guardAgainstDirectoryTraversal($path) {
|
||||
$pattern = "/^(.*\/)?(\.\.)(\/.*)?$/";
|
||||
$directory_traversal = preg_match($pattern, $path);
|
||||
|
||||
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)) {
|
||||
$caption_handle = fopen($caption_filename, "rb");
|
||||
while (!feof($caption_handle)) {
|
||||
$caption_line = fgetss($caption_handle);
|
||||
$caption_line = fgets($caption_handle);
|
||||
if (empty($caption_line)) {
|
||||
continue;
|
||||
}
|
||||
|
|
@ -320,23 +314,23 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
|
|||
$filename_caption = '';
|
||||
}
|
||||
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 {
|
||||
$imgComment = '<h4>'.$file . '</h4>';
|
||||
$imgComment = '<h4>' . $file . '</h4>';
|
||||
}
|
||||
|
||||
|
||||
// JPG, GIF and PNG
|
||||
if (preg_match("/.jpg$|.gif$|.bmp$|.png$/i", $file)) {
|
||||
$path_parts = pathinfo($file);
|
||||
if(file_exists($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')) {
|
||||
$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));
|
||||
$imgComment = $img_captions[$file] = '<h4>'.$file . '</h4>'.$descContent;
|
||||
if (file_exists($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')) {
|
||||
$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));
|
||||
$imgComment = $img_captions[$file] = '<h4>' . $file . '</h4>' . $descContent;
|
||||
} else {
|
||||
$imgComment = '<h4>'.$file . '</h4>';
|
||||
$imgComment = '<h4>' . $file . '</h4>';
|
||||
}
|
||||
$videoWithComment = true;
|
||||
} else {
|
||||
|
|
@ -363,7 +357,8 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
|
|||
$imgParams = http_build_query(
|
||||
array('filename' => "$thumbdir/$file", 'size' => $thumb_size),
|
||||
'',
|
||||
'&');
|
||||
'&'
|
||||
);
|
||||
$imgUrl = GALLERY_ROOT . "createthumb.php?$imgParams";
|
||||
if ($lazyload) {
|
||||
$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" => '
|
||||
<div>
|
||||
<p class="w3-black">
|
||||
<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" />
|
||||
</a>'. $filename_caption . '
|
||||
<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" />
|
||||
</a>' . $filename_caption . '
|
||||
</p>
|
||||
</div>');
|
||||
</div>'
|
||||
);
|
||||
}
|
||||
// Other filetypes
|
||||
$extension = "";
|
||||
|
|
@ -433,11 +429,12 @@ if (is_dir($current_dir) && $handle = opendir($current_dir)) {
|
|||
"html" => '
|
||||
<div>
|
||||
<p>
|
||||
<a href="'.$current_dir.'/'.$file.'" title="'.$file.'">
|
||||
<img src="' . GALLERY_ROOT .'images/filetype_' . $extension . '.png" alt="'.$file.'" width="'.$thumb_size.'" height="'.$thumb_size.'"/>
|
||||
</a>'.$filename_caption.'
|
||||
<a href="' . $current_dir . '/' . $file . '" title="' . $file . '">
|
||||
<img src="' . GALLERY_ROOT . 'images/filetype_' . $extension . '.png" alt="' . $file . '" width="' . $thumb_size . '" height="' . $thumb_size . '"/>
|
||||
</a>' . $filename_caption . '
|
||||
</p>
|
||||
</div>');
|
||||
</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -500,7 +497,7 @@ if ($_GET["page"] == "all" || $lazyload) {
|
|||
if (!$lazyload && $nbDir + $nbFile > $thumbs_pr_page) {
|
||||
for ($i = 1; $i <= ceil(($nbFile + $nbDir) / $thumbs_pr_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 {
|
||||
$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)) {
|
||||
//$page_navigation .= " | ";
|
||||
}
|
||||
|
||||
}
|
||||
//Insert link to view all images
|
||||
if ($_GET["page"] == "all") {
|
||||
$page_navigation .= "$label_all";
|
||||
} 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++) {
|
||||
if(empty($img_captions[$files[$y]['name']])){
|
||||
if (empty($img_captions[$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>';
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
#modal-content-img img,
|
||||
#video01 video {
|
||||
max-width: 98%;
|
||||
max-height: 72vh;
|
||||
max-height: 73vh;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -145,14 +145,17 @@
|
|||
box-shadow: 0px 5px rgba(89, 0, 46, 0.5);
|
||||
text-align: left;
|
||||
width: 85vw;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
#comment01 span {
|
||||
font-size: 1rem;
|
||||
font-size: .8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-content .w3-theme-d3 ul {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.fas {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
|
@ -161,13 +164,17 @@
|
|||
font-size: 2.5em;
|
||||
font-weight: bolder;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
margin: 0 1rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.closeModal a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -199,12 +206,13 @@
|
|||
<div id="modal01" class="w3-modal w3-animate-zoom">
|
||||
<p class="closeModal"><a href="#" onclick="closeModal(); return false;">X</a></p>
|
||||
<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 class="w3-theme-d3 w3-shadow">
|
||||
<p id="comment01"></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="fullurl"></li>
|
||||
<li id="markdown"></li>
|
||||
|
|
@ -226,9 +234,16 @@
|
|||
<script src="<% gallery_root %>js/lazy.js"></script>
|
||||
<script src="<% gallery_root %>js/script.js"></script>
|
||||
<script>
|
||||
document.querySelector('#shareLink').classList.toggle('toggle');
|
||||
document.querySelector('#toggle').onclick = function() {
|
||||
console.log('here');
|
||||
document.querySelector('#shareLink').classList.toggle('toggle');
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById("modal01").style.display = "none"
|
||||
document.getElementById("video01").innerHTML = null;
|
||||
document.getElementById("img01").src = null;
|
||||
}
|
||||
|
||||
function onClick(element) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue