Clean repertory
This commit is contained in:
176
avif.php
176
avif.php
@@ -1,176 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title><?= _("Picture of the month");?></title>
|
||||
<link rel="stylesheet" href="css/sls.css">
|
||||
|
||||
<link rel='stylesheet' href='css/lc_lightbox.min.css' />
|
||||
<link rel='stylesheet' href='css/open_close_fx.css' />
|
||||
<link rel='stylesheet' href='css/minimal.css' />
|
||||
|
||||
<?php include 'functions.php';
|
||||
session_start();
|
||||
$domain = 'sentier';
|
||||
localize($domain);
|
||||
?>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="_h1"> <?= _("Picture of the month");?></h1>
|
||||
|
||||
<h4>avif</h4>
|
||||
<picture>
|
||||
<!--source srcset="avif/2022-04-16_Brocard_8996.avif" type="image/avif" />
|
||||
<source srcset="avif/2022-04-16_Brocard_8996.webp" type="image/webp" /-->
|
||||
<img src="photos/avif/2022-04-16_Brocard_8996.avif" alt="No avif support" />
|
||||
</picture>
|
||||
|
||||
<h4>webp</h4>
|
||||
<picture>
|
||||
<!--source srcset="avif/2022-04-16_Brocard_8996.avif" type="image/avif" />
|
||||
<source srcset="avif/2022-04-16_Brocard_8996.webp" type="image/webp" /-->
|
||||
<img src="photos/webp/2022-04-16_Brocard_8996.webp" alt="No webp support" />
|
||||
</picture>
|
||||
|
||||
<h4>heic</h4>
|
||||
<picture>
|
||||
<!--source srcset="avif/2022-04-16_Brocard_8996.avif" type="image/avif" />
|
||||
<source srcset="avif/2022-04-16_Brocard_8996.webp" type="image/webp" /-->
|
||||
<img src="photos/heic/2022-04-16_Brocard_8996.heic" alt="No heic support" />
|
||||
</picture>
|
||||
|
||||
<h4>jpg</h4>
|
||||
<picture>
|
||||
<!--source srcset="avif/2022-04-16_Brocard_8996.avif" type="image/avif" />
|
||||
<source srcset="avif/2022-04-16_Brocard_8996.webp" type="image/webp" /-->
|
||||
<img src="photos/img/2022-04-16_Brocard_8996.jpg" alt="No jpg support" />
|
||||
</picture>
|
||||
|
||||
|
||||
<?php
|
||||
/*
|
||||
Safari : webp (mozjpeg ok)
|
||||
Firefox 100 : avif (webp ok)(mozjpeg ok)
|
||||
Chromium 101 : avif (webp ok)(mozjpeg ok)
|
||||
*/
|
||||
|
||||
/*
|
||||
echo '<div class="item">';
|
||||
echo '<a href ="' . $lb['big'] . '" title="' . htmlspecialchars($lb['title']) . '" data-lcl-txt="' . htmlspecialchars($lb['title']) .'" data-lcl-author="' . htmlspecialchars($meta) . '">';
|
||||
echo '<img src="' . $lb['thumb'] . '" alt="' . htmlspecialchars($lb['title']) . '" />';
|
||||
echo "</a>";
|
||||
echo '<span class="caption">' . month($date) . '</span>';
|
||||
echo '</div>';
|
||||
*/
|
||||
|
||||
/*
|
||||
$rowcount = 5 - 10 - 15 => add 0
|
||||
$rowcount = 4 - 9 - 14 => add 1
|
||||
$rowcount = 3 - 8 - 13 => add 2
|
||||
$rowcount = 2 - 7 - 12 => add 3
|
||||
$rowcount = 1 - 6 - 11 => add 4
|
||||
*/
|
||||
/*
|
||||
if ($rowcount % 4 == 0) $blank = 1;
|
||||
elseif ($rowcount % 3 == 0) $blank = 2;
|
||||
elseif ($rowcount % 2 == 0) $blank = 3;
|
||||
elseif ($rowcount % 1 == 0) $blank = 4;
|
||||
|
||||
for ($i = 1; $i <= $blank; $i++) {
|
||||
echo '<div class="item">';
|
||||
echo '</div>';
|
||||
}
|
||||
*/
|
||||
?>
|
||||
|
||||
|
||||
|
||||
<script type='text/javascript'>
|
||||
$(document).ready(function() {
|
||||
var $obj = lc_lightbox('#lcl_gallery a', {
|
||||
img_zoom : true,
|
||||
open_close_time : 200, // durée de l'animation pour l'ouverture et la fermeture de la lightbox
|
||||
ol_time_diff : 100, // animation de superposition avance (à l'ouverture) et retard (à la fermeture) à la fenêtre
|
||||
fading_time : 50, // durée de l'animation de fondu des éléments
|
||||
slideshow_time : 4000, // durée de l'intervalle du diaporama
|
||||
animation_time : 100,
|
||||
counter : false, // s'il faut afficher le compteur d'éléments
|
||||
progressbar : false, // s'il faut afficher une barre de progression lors de l'exécution du diaporama
|
||||
max_width : '95%', // largeur maximale de la lightbox
|
||||
max_height : '95%', // hauteur maximale de la lightbox
|
||||
wrap_class : 'lcl_fade_oc', // Classes personnalisées ajoutées au wrapper: effet à l'ouverture de la lb (lcl_fade_oc | lcl_zoomin_oc | lcl_rtl_oc)
|
||||
skin : 'minimal', // minimal | light | dark
|
||||
data_position : 'over', // Spécifie où les données des éléments seront affichées. Les modes disponibles sont :over, under|rside|lside
|
||||
cmd_position : 'inner', // Déclare où les commandes doivent être affichées : inner|outer
|
||||
nav_btn_pos : 'normal', // Régle les flèches et la position de lecture/pause. Options disponibles: normal|middle
|
||||
shox_title : true, // s'il faut afficher les titres
|
||||
show_descr : false, // s'il faut afficher les descriptions
|
||||
show_author : true, // s'il faut afficher les auteurs
|
||||
thumbs_nav : false, // permet la navigation par vignettes (nécessite des éléments affiche ou images)
|
||||
fullscreen : true, // Autoriser ou non le mode plein écran
|
||||
fs_img_behavior : 'smart', //Comportement de l'image en plein écran : fit|fill|smart
|
||||
fs_only : 500, // s'il faut utiliser uniquement l'ouverture de la lightbox en mode plein écran (utile pour les appareils mobiles) : false | (integer)
|
||||
browser_fs_mode : true, // utiliser ou non le mode plein écran du navigateur
|
||||
txt_toggle_cmd : true, // s'il faut afficher le bouton de basculement du texte de l'élément
|
||||
download : true, // whether to show element's file download button
|
||||
touchswipe : true, // permet les interactions tactiles (nécessite AlloyFinger)
|
||||
rclick_prevent : true, // s'il faut éviter le clic droit sur les éléments de la lightbox
|
||||
});
|
||||
|
||||
var $obj = lc_lightbox('#lcl_month a', {
|
||||
img_zoom : true,
|
||||
deeplink : true,
|
||||
open_close_time : 200,
|
||||
ol_time_diff : 100,
|
||||
wrap_class : 'lcl_zoomin_oc',
|
||||
skin : 'minimal',
|
||||
txt_hidden : true,
|
||||
fullscreen : true,
|
||||
fs_img_behavior : 'smart',
|
||||
browser_fs_mode : true,
|
||||
rclick_prevent : true,
|
||||
});
|
||||
|
||||
var $obj3 = lc_lightbox('#lcl_gm a', {
|
||||
img_zoom : true,
|
||||
open_close_time : 100,
|
||||
ol_time_diff : 100,
|
||||
max_width : '65%',
|
||||
max_height : '65%',
|
||||
wrap_class : 'lcl_zoomin_oc',
|
||||
skin : 'minimal',
|
||||
data_position : 'rside',
|
||||
cmd_position : 'inner',
|
||||
show_title : true,
|
||||
show_descr : true,
|
||||
show_author : true,
|
||||
fullscreen : true,
|
||||
fs_img_behavior : 'smart',
|
||||
browser_fs_mode : false,
|
||||
touchswipe : true,
|
||||
rclick_prevent : true,
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<p class="navPage"><a href="index.php" title="<?php echo gettext("Home"); ?>"><?php echo gettext("Home"); ?></a> | <a href="maps.php" title="<?php echo gettext("Maps"); ?>"><?php echo gettext("Maps"); ?></a></p>
|
||||
|
||||
<p><em><small>© 2013-<?php echo date('Y'); ?> sur-le-sentier.fr</small></em></p>
|
||||
|
||||
<script src='js/lc_lightbox.min.js' type='text/javascript'></script>
|
||||
<script src='js/alloy_finger.min.js' type='text/javascript'></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,53 +0,0 @@
|
||||
<?php
|
||||
#include_once("inc/db_connect.php");
|
||||
|
||||
$conn = new PDO('sqlite:../db_photo.sqlite3');
|
||||
//$stmt = $conn->prepare($query);
|
||||
//$stmt->execute();
|
||||
|
||||
include 'functions.php';
|
||||
|
||||
_pr($_POST);
|
||||
// lens legende copyright title creator keywords
|
||||
|
||||
if ($_POST['action'] == 'edit' && $_POST['id']) {
|
||||
$updateField='';
|
||||
if(isset($_POST['lens'])) {
|
||||
$updateField.= "lens='".$_POST['lens']."'";
|
||||
} else if(isset($_POST['legende'])) {
|
||||
$updateField.= "legende='".$_POST['legende']."'";
|
||||
} else if(isset($_POST['copyright'])) {
|
||||
$updateField.= "copyright='".$_POST['copyright']."'";
|
||||
} else if(isset($_POST['title'])) {
|
||||
$updateField.= "title='".$_POST['title']."'";
|
||||
} else if(isset($_POST['creator'])) {
|
||||
$updateField.= "creator='".$_POST['creator']."'";
|
||||
} else if(isset($_POST['keywords'])) {
|
||||
$updateField.= "keywords='".$_POST['keywords']."'";
|
||||
}
|
||||
if($updateField && $_POST['id']) {
|
||||
$sqlQuery = "UPDATE photos SET $updateField WHERE id='" . $_POST['id'] . "'";
|
||||
echo $sqlQuery;
|
||||
/*
|
||||
mysqli_query($conn, $sqlQuery) or die("database error:". mysqli_error($conn));
|
||||
$data = array(
|
||||
"message" => "Record Updated",
|
||||
"status" => 1
|
||||
);
|
||||
echo json_encode($data);
|
||||
*/
|
||||
}
|
||||
}
|
||||
if ($_POST['action'] == 'delete' && $_POST['id']) {
|
||||
$sqlQuery = "DELETE FROM photos WHERE id='" . $_POST['id'] . "'";
|
||||
echo $sqlQuery;
|
||||
/*
|
||||
mysqli_query($conn, $sqlQuery) or die("database error:". mysqli_error($conn));
|
||||
$data = array(
|
||||
"message" => "Record Deleted",
|
||||
"status" => 1
|
||||
);
|
||||
echo json_encode($data);
|
||||
*/
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
<link rel="icon" type="image/png" href="https://webdamn.com/wp-content/themes/v2/webdamn.png">
|
||||
</head>
|
||||
<body class="">
|
||||
<div role="navigation" class="navbar navbar-default navbar-static-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="https://www.webdamn.com" class="navbar-brand">WEBDAMN.COM</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="https://www.webdamn.com">Home</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="min-height:500px;">
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
<?php
|
||||
/* Database connection start */
|
||||
$servername = "localhost";
|
||||
$username = "root";
|
||||
$password = "";
|
||||
$dbname = "phpzag_demos";
|
||||
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
|
||||
if (mysqli_connect_errno()) {
|
||||
printf("Connect failed: %s\n", mysqli_connect_error());
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="insert-post-ads1" style="margin-top:20px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||
<!-- jQuery -->
|
||||
@@ -1,70 +0,0 @@
|
||||
<?php
|
||||
include("inc/header.php");
|
||||
?>
|
||||
<title>webdamn.com : Demo Create Editable Bootstrap Table with jQuery, PHP & MySQL</title>
|
||||
<?php include('inc/container.php');?>
|
||||
<style>
|
||||
table {
|
||||
background-color: #181818;
|
||||
}
|
||||
table, .table {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h2>Example: Create Editable Bootstrap Table with jQuery, PHP & MySQL</h2>
|
||||
<?php
|
||||
//include_once("inc/db_connect.php");
|
||||
//$sqlQuery = "SELECT id, name, gender, age FROM developers LIMIT 5";
|
||||
//$resultSet = mysqli_query($conn, $sqlQuery) or die("database error:". mysqli_error($conn));
|
||||
|
||||
$base = '../db_photo.sqlite3';
|
||||
|
||||
//$query = "SELECT * FROM photos " . $req . " ORDER BY id";
|
||||
$query = "SELECT * FROM photos WHERE filename LIKE '%3_2007.jpg' OR filename LIKE '%4_2007.jpg' ORDER BY id";
|
||||
|
||||
try {
|
||||
$conn = new PDO('sqlite:../db_photo.sqlite3');
|
||||
$stmt = $conn->prepare($query);
|
||||
$stmt->execute();
|
||||
|
||||
?>
|
||||
|
||||
<table id="editableTable" class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Filename</th>
|
||||
<th>Date</th>
|
||||
<th>Lens</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php //while( $developer = mysqli_fetch_assoc($resultSet) ) { ?>
|
||||
<?php //while(true) {
|
||||
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { ?>
|
||||
<tr id="<?php echo $row ['id']; ?>">
|
||||
<td><?php echo $row ['id']; ?></td>
|
||||
<td><?php echo $row ['filename']; ?></td>
|
||||
<td><?php echo $row ['dateoriginal']; ?></td>
|
||||
<td><?php echo $row ['lens']; ?></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<?php }
|
||||
catch(PDOException $e) {
|
||||
echo $e->getMessage();
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<script src="plugin/bootstable.js"></script>
|
||||
<script src="js/editable.js"></script>
|
||||
<?php include('inc/footer.php');?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
$( document ).ready(function() {
|
||||
$('#editableTable').SetEditable({
|
||||
columnsEd: "0,1,2,3,4,5,6",
|
||||
onEdit: function(columnsEd) {
|
||||
console.log("===edit=="+(this));
|
||||
// lens legende copyright title creator keywords
|
||||
|
||||
var empId = columnsEd[0].childNodes[1].innerHTML;
|
||||
var legende = columnsEd[0].childNodes[3].innerHTML;
|
||||
var copyright = columnsEd[0].childNodes[5].innerHTML;
|
||||
var title = columnsEd[0].childNodes[7].innerHTML;
|
||||
var creator = columnsEd[0].childNodes[9].innerHTML;
|
||||
var keywords = columnsEd[0].childNodes[11].innerHTML;
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url : "action.php",
|
||||
dataType: "json",
|
||||
data: {id:empId, legende:legende, copyright:copyright, title:title, creator:creator, keywords:keywords, action:'edit'},
|
||||
success: function (response) {
|
||||
if(response.status) {
|
||||
// show update message
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
onBeforeDelete: function(columnsEd) {
|
||||
var empId = columnsEd[0].childNodes[1].innerHTML;
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url : "action.php",
|
||||
dataType: "json",
|
||||
data: {id:empId, action:'delete'},
|
||||
success: function (response) {
|
||||
if(response.status) {
|
||||
// show delete message
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -1,201 +0,0 @@
|
||||
/*
|
||||
Bootstable
|
||||
@description Javascript library to make HMTL tables editable, using Bootstrap
|
||||
@version 1.1
|
||||
@autor Tito Hinostroza
|
||||
*/
|
||||
"use strict";
|
||||
//Global variables
|
||||
var params = null; //Parameters
|
||||
var colsEdi =null;
|
||||
var newColHtml = '<div class="btn-group pull-right">'+
|
||||
'<button id="bEdit" type="button" class="btn btn-sm btn-default" onclick="rowEdit(this);">' +
|
||||
'<span class="glyphicon glyphicon-pencil" > </span>'+
|
||||
'</button>'+
|
||||
'<button id="bElim" type="button" class="btn btn-sm btn-default" onclick="rowElim(this);">' +
|
||||
'<span class="glyphicon glyphicon-trash" > </span>'+
|
||||
'</button>'+
|
||||
'<button id="bAcep" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="rowAcep(this);">' +
|
||||
'<span class="glyphicon glyphicon-ok" > </span>'+
|
||||
'</button>'+
|
||||
'<button id="bCanc" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="rowCancel(this);">' +
|
||||
'<span class="glyphicon glyphicon-remove" > </span>'+
|
||||
'</button>'+
|
||||
'</div>';
|
||||
var colEdicHtml = '<td name="buttons">'+newColHtml+'</td>';
|
||||
|
||||
$.fn.SetEditable = function (options) {
|
||||
var defaults = {
|
||||
columnsEd: null, //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5"
|
||||
$addButton: null, //Jquery object of "Add" button
|
||||
onEdit: function() {}, //Called after edition
|
||||
onBeforeDelete: function() {}, //Called before deletion
|
||||
onDelete: function() {}, //Called after deletion
|
||||
onAdd: function() {} //Called when added a new row
|
||||
};
|
||||
params = $.extend(defaults, options);
|
||||
this.find('thead tr').append('<th name="buttons"></th>'); //encabezado vacío
|
||||
this.find('tbody tr').append(colEdicHtml);
|
||||
var $tabedi = this; //Read reference to the current table, to resolve "this" here.
|
||||
//Process "addButton" parameter
|
||||
if (params.$addButton != null) {
|
||||
//Se proporcionó parámetro
|
||||
params.$addButton.click(function() {
|
||||
rowAddNew($tabedi.attr("id"));
|
||||
});
|
||||
}
|
||||
//Process "columnsEd" parameter
|
||||
if (params.columnsEd != null) {
|
||||
//Extract felds
|
||||
colsEdi = params.columnsEd.split(',');
|
||||
}
|
||||
};
|
||||
function IterarCamposEdit($cols, tarea) {
|
||||
//Itera por los campos editables de una fila
|
||||
var n = 0;
|
||||
$cols.each(function() {
|
||||
n++;
|
||||
if ($(this).attr('name')=='buttons') return; //excluye columna de botones
|
||||
if (!EsEditable(n-1)) return; //noe s campo editable
|
||||
tarea($(this));
|
||||
});
|
||||
|
||||
function EsEditable(idx) {
|
||||
//Indica si la columna pasada está configurada para ser editable
|
||||
if (colsEdi==null) { //no se definió
|
||||
return true; //todas son editable
|
||||
} else { //hay filtro de campos
|
||||
//alert('verificando: ' + idx);
|
||||
for (var i = 0; i < colsEdi.length; i++) {
|
||||
if (idx == colsEdi[i]) return true;
|
||||
}
|
||||
return false; //no se encontró
|
||||
}
|
||||
}
|
||||
}
|
||||
function FijModoNormal(but) {
|
||||
$(but).parent().find('#bAcep').hide();
|
||||
$(but).parent().find('#bCanc').hide();
|
||||
$(but).parent().find('#bEdit').show();
|
||||
$(but).parent().find('#bElim').show();
|
||||
var $row = $(but).parents('tr'); //accede a la fila
|
||||
$row.attr('id', ''); //quita marca
|
||||
}
|
||||
function FijModoEdit(but) {
|
||||
$(but).parent().find('#bAcep').show();
|
||||
$(but).parent().find('#bCanc').show();
|
||||
$(but).parent().find('#bEdit').hide();
|
||||
$(but).parent().find('#bElim').hide();
|
||||
var $row = $(but).parents('tr'); //accede a la fila
|
||||
$row.attr('id', 'editing'); //indica que está en edición
|
||||
}
|
||||
function ModoEdicion($row) {
|
||||
if ($row.attr('id')=='editing') {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function rowAcep(but) {
|
||||
//Acepta los cambios de la edición
|
||||
var $row = $(but).parents('tr'); //accede a la fila
|
||||
var $cols = $row.find('td'); //lee campos
|
||||
if (!ModoEdicion($row)) return; //Ya está en edición
|
||||
//Está en edición. Hay que finalizar la edición
|
||||
IterarCamposEdit($cols, function($td) { //itera por la columnas
|
||||
var cont = $td.find('input').val(); //lee contenido del input
|
||||
$td.html(cont); //fija contenido y elimina controles
|
||||
});
|
||||
FijModoNormal(but);
|
||||
params.onEdit($row);
|
||||
}
|
||||
function rowCancel(but) {
|
||||
//Rechaza los cambios de la edición
|
||||
var $row = $(but).parents('tr'); //accede a la fila
|
||||
var $cols = $row.find('td'); //lee campos
|
||||
if (!ModoEdicion($row)) return; //Ya está en edición
|
||||
//Está en edición. Hay que finalizar la edición
|
||||
IterarCamposEdit($cols, function($td) { //itera por la columnas
|
||||
var cont = $td.find('div').html(); //lee contenido del div
|
||||
$td.html(cont); //fija contenido y elimina controles
|
||||
});
|
||||
FijModoNormal(but);
|
||||
}
|
||||
function rowEdit(but) { //Inicia la edición de una fila
|
||||
var $row = $(but).parents('tr'); //accede a la fila
|
||||
var $cols = $row.find('td'); //lee campos
|
||||
if (ModoEdicion($row)) return; //Ya está en edición
|
||||
//Pone en modo de edición
|
||||
IterarCamposEdit($cols, function($td) { //itera por la columnas
|
||||
var cont = $td.html(); //lee contenido
|
||||
var div = '<div style="display: none;">' + cont + '</div>'; //guarda contenido
|
||||
var input = '<input class="form-control input-sm" value="' + cont + '">';
|
||||
$td.html(div + input); //fija contenido
|
||||
});
|
||||
FijModoEdit(but);
|
||||
}
|
||||
function rowElim(but) { //Elimina la fila actual
|
||||
var $row = $(but).parents('tr'); //accede a la fila
|
||||
params.onBeforeDelete($row);
|
||||
$row.remove();
|
||||
params.onDelete();
|
||||
}
|
||||
function rowAddNew(tabId) { //Agrega fila a la tabla indicada.
|
||||
var $tab_en_edic = $("#" + tabId); //Table to edit
|
||||
var $filas = $tab_en_edic.find('tbody tr');
|
||||
if ($filas.length==0) {
|
||||
//No hay filas de datos. Hay que crearlas completas
|
||||
var $row = $tab_en_edic.find('thead tr'); //encabezado
|
||||
var $cols = $row.find('th'); //lee campos
|
||||
//construye html
|
||||
var htmlDat = '';
|
||||
$cols.each(function() {
|
||||
if ($(this).attr('name')=='buttons') {
|
||||
//Es columna de botones
|
||||
htmlDat = htmlDat + colEdicHtml; //agrega botones
|
||||
} else {
|
||||
htmlDat = htmlDat + '<td></td>';
|
||||
}
|
||||
});
|
||||
$tab_en_edic.find('tbody').append('<tr>'+htmlDat+'</tr>');
|
||||
} else {
|
||||
//Hay otras filas, podemos clonar la última fila, para copiar los botones
|
||||
var $ultFila = $tab_en_edic.find('tr:last');
|
||||
$ultFila.clone().appendTo($ultFila.parent());
|
||||
$ultFila = $tab_en_edic.find('tr:last');
|
||||
var $cols = $ultFila.find('td'); //lee campos
|
||||
$cols.each(function() {
|
||||
if ($(this).attr('name')=='buttons') {
|
||||
//Es columna de botones
|
||||
} else {
|
||||
$(this).html(''); //limpia contenido
|
||||
}
|
||||
});
|
||||
}
|
||||
params.onAdd();
|
||||
}
|
||||
function TableToCSV(tabId, separator) { //Convierte tabla a CSV
|
||||
var datFil = '';
|
||||
var tmp = '';
|
||||
var $tab_en_edic = $("#" + tabId); //Table source
|
||||
$tab_en_edic.find('tbody tr').each(function() {
|
||||
//Termina la edición si es que existe
|
||||
if (ModoEdicion($(this))) {
|
||||
$(this).find('#bAcep').click(); //acepta edición
|
||||
}
|
||||
var $cols = $(this).find('td'); //lee campos
|
||||
datFil = '';
|
||||
$cols.each(function() {
|
||||
if ($(this).attr('name')=='buttons') {
|
||||
//Es columna de botones
|
||||
} else {
|
||||
datFil = datFil + $(this).html() + separator;
|
||||
}
|
||||
});
|
||||
if (datFil!='') {
|
||||
datFil = datFil.substr(0, datFil.length-separator.length);
|
||||
}
|
||||
tmp = tmp + datFil + '\n';
|
||||
});
|
||||
return tmp;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 407 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
@@ -1,116 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
|
||||
<title>Image Gallery | Good Stuff Creations </title>
|
||||
<meta name="Description" content="A image gallery responsive for mobile made only with css">
|
||||
|
||||
<meta name="KeyWords" content="flexbox, image gallery, food gallery, css, responsive">
|
||||
</head>
|
||||
|
||||
</html>
|
||||
<body>
|
||||
<!-- Nav bar -->
|
||||
<nav class="navbar">
|
||||
<div aria-labelledby="navigation-menu">
|
||||
<ul class="navbar__navigation">
|
||||
|
||||
<li>
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">Products</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar__social-media">
|
||||
<ul class="navbar__links">
|
||||
<i class="fab fa-twitter "><a aria-label="twitter" href="https://twitter.com/g_s_creations"></a></i>
|
||||
<i class="fab fa-linkedin"><a aria-label="linkedin" href="https://www.linkedin.com/in/ricardodmoreira/"></a></i>
|
||||
<i class="fab fa-github"><a aria-label="github" href="https://github.com/mugas/gsCreations"></a></i>
|
||||
<i class="fab fa-instagram"><a aria-label="instagram" href="https://www.instagram.com/gs_codes/"></a></i>
|
||||
<i class="fab fa-facebook"><a aria-label="facebook" href="https://www.facebook.com/goodstuffcodes"></a></i>
|
||||
<i class="fas fa-globe"><a aria-label="globe" href="https://www.gscreations.io/blog/create-a-image-gallery"></a></i>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Heading -->
|
||||
<header class="title">
|
||||
<h1>Good Stuff Foods</h1>
|
||||
</header>
|
||||
|
||||
<!-- Grid -->
|
||||
<section class="container">
|
||||
|
||||
<div>
|
||||
<img src="../../sls/photos/thumb/1_2020.jpg" alt="First description" />
|
||||
<span class="description">First description</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../sls/photos/thumb/3_2019.jpg" alt="Second description">
|
||||
<span class="description">Second description</span>
|
||||
</div>
|
||||
<!--div>
|
||||
<img src="../../sls/photos/thumb/4_2019.jpg" alt="Third description">
|
||||
<span class="description">Third description
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../sls/photos/thumb/5_2019.jpg" alt="Fourth description">
|
||||
<span class="description">Fourth description</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../sls/photos/thumb/6_2019.jpg" alt="Fifth description">
|
||||
<span class="description">Fifth description</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../sls/photos/thumb/5_2020.jpg" alt="Sixth description">
|
||||
<span class="description">Sixth description</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1467003909585-2f8a72700288?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Seventh description">
|
||||
<span class="description">Seventh description</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1529042410759-befb1204b468?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Eighth description">
|
||||
<span class="description">Eighth description</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1484980972926-edee96e0960d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Ninth description">
|
||||
<span class="description">Ninth description</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1432139509613-5c4255815697?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Tenth description">
|
||||
<span class="description">Tenth description</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1485962398705-ef6a13c41e8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Eleventh description">
|
||||
<span class="description">Eleventh description</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Twelfth description">
|
||||
<span class="description">Twelfth description</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<h2 class="footer__tagline-title">
|
||||
Good Stuff Creations by
|
||||
Ricardo Moreira -
|
||||
<a class="tutorial__footer" href="https://www.gscreations.io/blog/create-a-image-gallery">Tutorial</a>
|
||||
</h2>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,87 +0,0 @@
|
||||
[](http://ricardomoreira.io/)
|
||||
|
||||
<h1 align="center"> 🔥Image Gallery🔥</h1>
|
||||
|
||||
<h2 align="center">Image Gallery made only with CSS </h2>
|
||||
|
||||
### Index
|
||||
|
||||
* [Name](#Name) 👈
|
||||
* [Links](#Links) 🔗
|
||||
* [Description](#Description) 📖
|
||||
* [Languages and Frameworks](####Languages-and-Frameworks) ⚙️
|
||||
* [Screenshots](#Screenshots) 📱
|
||||
* [Instalation](#Instalation) 🧩
|
||||
* [Support](#Support) 🆘
|
||||
* [Roadmap](#Roadmap) 🗺️
|
||||
* [Authors and acknowledgment](####Authors-and-acknowledgment) ✍️
|
||||
* [Project Status](#Project-Status) 📜
|
||||
|
||||
# Name
|
||||
|
||||
Image Gallery
|
||||
|
||||
# Links
|
||||
|
||||
[Website](https://goodstuffoodsgallery.netlify.app/)
|
||||
|
||||
[Presentation](https://www.ricardomoreira.io/blog/2020-05-28-create-a-image-gallery)
|
||||
|
||||
___
|
||||
|
||||
# Description
|
||||
|
||||
First project that I did. Based on a tutorial as a simple image gallery.
|
||||
|
||||
* **Flexbox** - for the navbars, and also for the text inside the image
|
||||
* **Grid** - for the gallery image. It is adapted to fit as many images as necessary keeping the ratio
|
||||
* **Acessibility** - Add proper structure, image alt text and some other features to make the website more acessible.
|
||||
* **BEM** - Use Block Element Modifier ( BEM) to name my classes in CSS
|
||||
|
||||
___
|
||||
|
||||
# Languages, Frameworks and others
|
||||
|
||||
* **CSS** - Styling
|
||||
|
||||
____
|
||||
|
||||
# Screenshots
|
||||
|
||||
Home Page | Blog Page
|
||||
:-------------------------:|:-------------------------:
|
||||
 | 
|
||||
|
||||
____
|
||||
|
||||
# Instalation
|
||||
|
||||
___
|
||||
|
||||
# Support
|
||||
|
||||
Have any question or find something that doesn't look good? Let's talk 😊
|
||||
|
||||
[Here](https://github.com/mugas)
|
||||
|
||||
[And Here](https://www.ricardomoreira.io/about)
|
||||
|
||||
____
|
||||
|
||||
# Roadmap
|
||||
|
||||
Nothing to add
|
||||
|
||||
____
|
||||
|
||||
# Authors-and-acknowledgment
|
||||
|
||||
* Me 😊
|
||||
|
||||
____
|
||||
|
||||
# Project-Status
|
||||
|
||||
Nothing to add.
|
||||
|
||||
____
|
||||
@@ -1,183 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
background-color: #eceee5;
|
||||
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Navbar*/
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
color: #c8882d;
|
||||
font-size: 18px;
|
||||
font-family: Lora;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 1px #20263f solid;
|
||||
}
|
||||
|
||||
.navbar__social-media {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.navbar__links i {
|
||||
margin: 0px;
|
||||
color: #c8882d;
|
||||
font-size: 18px;
|
||||
}
|
||||
.navbar__links i:hover {
|
||||
border-bottom: 1px #20263f solid;
|
||||
}
|
||||
|
||||
.navigation li:hover {
|
||||
background-color: #20263f;
|
||||
}
|
||||
|
||||
/* Title Format */
|
||||
h1 {
|
||||
color: #20263f;
|
||||
font-family: "Dosis", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 50px;
|
||||
display: block;
|
||||
}
|
||||
.title {
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
margin-bottom: 30px;
|
||||
animation-name: titleIn;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/* Grid Format */
|
||||
/*Formats the text inside the image*/
|
||||
.container > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2em;
|
||||
color: #20263f;
|
||||
}
|
||||
.container > div > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.container {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
grid-auto-rows: 300px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
.description {
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container > div:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.container > div:hover .description {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container > div:hover img {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/*Footer*/
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.footer__tagline-title {
|
||||
color: #20263f;
|
||||
font-size: 18px;
|
||||
font-family: Lora;
|
||||
}
|
||||
|
||||
.footer__tagline {
|
||||
font-style: italic;
|
||||
color: #c8882d;
|
||||
}
|
||||
|
||||
.tutorial__footer {
|
||||
font-size: inherit;
|
||||
display: inline;
|
||||
}
|
||||
/*It's made for mobile first so I add media queries
|
||||
for screens over 768px(tablet)*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
margin: 2px;
|
||||
}
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.navbar__links i {
|
||||
margin: 0px;
|
||||
color: #c8882d;
|
||||
font-size: 25px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
color: #c8882d;
|
||||
font-size: 25px;
|
||||
font-family: Lora;
|
||||
}
|
||||
}
|
||||
|
||||
/*Animation of the title*/
|
||||
|
||||
@keyframes titleIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
70% {
|
||||
transform: translateX(150px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
172
jquery.html
172
jquery.html
@@ -1,172 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<title>Bootstrap</title>
|
||||
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0.5px;
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
/* Popup Open button */
|
||||
.open-button{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.open-button:hover{
|
||||
}
|
||||
|
||||
.popup {
|
||||
position:fixed;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background:rgba(0,0,0,0.75);
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Popup inner div */
|
||||
.popup-content {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
margin-top: 80px;
|
||||
box-shadow: 0px 2px 6px rgba(0,0,0,1);
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
/* Popup close button */
|
||||
.close-button {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
right: -13px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: rgba(0,0,0,1);
|
||||
}
|
||||
|
||||
#maps {
|
||||
height: 350px;
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
.popup-content {
|
||||
width:90%;
|
||||
}
|
||||
#maps {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
}
|
||||
/*#maps { height:350px;width:425px; display:none; }*/
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--a class="open-button" href="javascript:void(0)"> Popup Preview</a-->
|
||||
<a href="#" class="open-button">⚓</a>
|
||||
|
||||
|
||||
<div class="popup">
|
||||
<div class="popup-content">
|
||||
<h3>Title of Popup </h3>
|
||||
<div id="maps"></div>
|
||||
<div class="content">Popup 1 content will be here. Lorem ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Aliquam consequat diam ut tortor
|
||||
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
|
||||
convallis. Integer at metus eget neque hendrerit vestibulum.
|
||||
</div>
|
||||
<a class="close-button" href="#">x</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
// create a center
|
||||
var c = new google.maps.LatLng(46.61211515,5.8780727);
|
||||
|
||||
//create map options object
|
||||
var mapOptions = {
|
||||
zoom: 11,
|
||||
center: c,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
};
|
||||
|
||||
var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: c,
|
||||
label: {
|
||||
text: "\ue0c8",
|
||||
fontFamily: "Material Icons",
|
||||
color: "#ffffff",
|
||||
fontSize: "20px",
|
||||
},
|
||||
animation: google.maps.Animation.DROP,
|
||||
title: "Material Icon Font Marker",
|
||||
});
|
||||
marker.setMap(map);
|
||||
|
||||
$(".open-button").click(function() {
|
||||
$(".popup").show(100,'linear', function(){
|
||||
google.maps.event.trigger(map, "resize"); // resize map
|
||||
map.setCenter(c); // set the center
|
||||
});
|
||||
});
|
||||
$(".close-button").click(function() {
|
||||
$(".popup").hide(100);
|
||||
});
|
||||
/*
|
||||
$('body').on('mouseup', function() {
|
||||
$('.popup').hide();
|
||||
});
|
||||
*/
|
||||
$( document ).on( 'keydown', function ( e ) {
|
||||
if ( e.keyCode === 27 ) { // ESC
|
||||
$(".popup").hide(100);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,281 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title><?= _("Picture of the month");?></title>
|
||||
<link rel="stylesheet" href="css/sls.css">
|
||||
|
||||
<link rel='stylesheet' href='css/lc_lightbox.min.css' />
|
||||
<link rel='stylesheet' href='css/open_close_fx.css' />
|
||||
<link rel='stylesheet' href='css/minimal.css' />
|
||||
|
||||
<?php include 'functions.php';
|
||||
session_start();
|
||||
$domain = 'sentier';
|
||||
localize($domain);
|
||||
?>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="_h1"> <?= _("Picture of the month");?></h1>
|
||||
|
||||
<?php
|
||||
if (!isset($_GET['page'])) $page = 1;
|
||||
else $page = intval($_GET['page']);
|
||||
?>
|
||||
|
||||
<?php
|
||||
try {
|
||||
$conn4 = new PDO('sqlite:db_photo.sqlite3');
|
||||
// WHERE id='26'
|
||||
$query4 = "SELECT filename, dateoriginal, lens, speed, iso, width, height, html, aperture, model, lat, long, alt, legende, copyright, title, creator, keywords, metering, flash, focal, wb, program FROM photos ORDER BY dateoriginal DESC LIMIT ? OFFSET ?";
|
||||
//nb d'archive par page
|
||||
$limit = 13;
|
||||
$offset = $limit * ($page -1);
|
||||
|
||||
$stmt = $conn4->prepare($query4);
|
||||
$stmt->execute(array($limit, $offset));
|
||||
|
||||
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
$rowcount = count($result);
|
||||
|
||||
$conn4 = null;
|
||||
}
|
||||
catch(PDOException $e) {
|
||||
echo $e->getMessage();
|
||||
}
|
||||
?>
|
||||
|
||||
<p class="month"><?php echo month($result[0]['dateoriginal']); ?></p>
|
||||
|
||||
<?php
|
||||
$lb = data_for_lightbox($result[0]);
|
||||
|
||||
echo '<div class="cadre" id="lcl_month">';
|
||||
echo '<a href ="' . $lb['big'] . '" title="' . $lb['title'] . '" data-lcl-txt="' . $lb['title'] .'" data-lcl-author="' . $lb['exif'] . '">';
|
||||
echo '<img src="' . $lb['big'] . '" class="trois" />';
|
||||
echo "</a>";
|
||||
echo '</div>';
|
||||
|
||||
if (!empty($lb['title']) || !empty($lb['legende'])) {
|
||||
?>
|
||||
<p class="titrePhoto"><?php echo $lb['title']; ?></p>
|
||||
<p class="legendePhoto"><?php echo $lb['legende']; ?></p>
|
||||
<?php if (!empty($lb['gps']) && false) { ?>
|
||||
<p class="titrePhoto">
|
||||
<a href = "https://maps.google.com/maps?q=<?php echo $lb['gps']; ?>&t=&z=9&ie=UTF8&iwloc=&output=embed" title="Google Maps Iframe" data-lcl-txt="LC Lightbox can handle any iframe:<br/> for example you can also display websites and Google Documents <em>(then Word docs, PDFs, etc)</em>" data-lcl-author="@sur-le-sentier.fr"><?php echo "\u{2693} "; ?></a>
|
||||
</p>
|
||||
<?php } ?>
|
||||
<?php
|
||||
/*
|
||||
🌍
|
||||
globe centré sur l’Europe et l’Afrique
|
||||
Unicode: U+1F30D, UTF-8: F0 9F 8C 8D
|
||||
⚓︎
|
||||
ANCHOR
|
||||
Unicode: U+2693 U+FE0E, UTF-8: E2 9A 93 EF B8 8E
|
||||
*/
|
||||
//echo "\u{1F30D} ";
|
||||
/*
|
||||
<!--
|
||||
# Feature-Policy
|
||||
<IfModule mod_headers.c>
|
||||
Header set Feature-Policy "geolocation 'self'; vibrate 'none'"
|
||||
</IfModule>
|
||||
-->
|
||||
|
||||
*/
|
||||
?>
|
||||
|
||||
<?php
|
||||
}
|
||||
|
||||
if (!empty($lb['gps'])) {
|
||||
$map = '<a href = "https://maps.google.com/maps?q=' . $lb['gps'] . '&t=&z=9&ie=UTF8&iwloc=&output=embed" title="' . $lb['title'] . '" data-lcl-txt="' . $lb['legende'] . '">' . " \u{30FB} \u{2693} " . '</a>';
|
||||
}
|
||||
else {
|
||||
$map = '';
|
||||
}
|
||||
|
||||
echo '<div class="exif" id="lcl_gm">';
|
||||
echo $lb['exif'] . $map;
|
||||
echo '</div>';
|
||||
?>
|
||||
|
||||
|
||||
<div class="myGallery" id="lcl_gallery">
|
||||
|
||||
<?php
|
||||
|
||||
for ($i = 1; $i <= ($rowcount -1); $i++) {
|
||||
$date = $result[$i]['dateoriginal'];
|
||||
|
||||
$lb = data_for_lightbox($result[$i]);
|
||||
|
||||
//
|
||||
if (!empty($lb['gps'])) {
|
||||
$map = '<a href = "https://maps.google.com/maps?q=' . $lb['gps'] . '&t=&z=9&ie=UTF8&iwloc=&output=embed" title="' . $lb['title'] . '" data-lcl-txt="' . $lb['legende'] . '">' . " \u{30FB} \u{2693} " . '</a>';
|
||||
|
||||
$meta = $lb['exif'] . $map;
|
||||
} else {
|
||||
$meta = '';
|
||||
}
|
||||
|
||||
|
||||
|
||||
// data-lcl-author="' . htmlspecialchars($lb['exif']) . '"
|
||||
//
|
||||
|
||||
echo '<div class="item">';
|
||||
echo '<a href ="' . $lb['big'] . '" title="' . htmlspecialchars($lb['title']) . '" data-lcl-txt="' . htmlspecialchars($lb['title']) .'" data-lcl-author="' . htmlspecialchars($meta) . '">';
|
||||
echo '<img src="' . $lb['thumb'] . '" alt="' . htmlspecialchars($lb['title']) . '" />';
|
||||
echo "</a>";
|
||||
echo '<span class="caption">' . month($date) . '</span>';
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
/*
|
||||
$rowcount = 5 - 10 - 15 => add 0
|
||||
$rowcount = 4 - 9 - 14 => add 1
|
||||
$rowcount = 3 - 8 - 13 => add 2
|
||||
$rowcount = 2 - 7 - 12 => add 3
|
||||
$rowcount = 1 - 6 - 11 => add 4
|
||||
*/
|
||||
|
||||
if ($rowcount % 4 == 0) $blank = 1;
|
||||
elseif ($rowcount % 3 == 0) $blank = 2;
|
||||
elseif ($rowcount % 2 == 0) $blank = 3;
|
||||
elseif ($rowcount % 1 == 0) $blank = 4;
|
||||
|
||||
for ($i = 1; $i <= $blank; $i++) {
|
||||
echo '<div class="item">';
|
||||
echo '</div>';
|
||||
}
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<script type='text/javascript'>
|
||||
$(document).ready(function() {
|
||||
var $obj = lc_lightbox('#lcl_gallery a', {
|
||||
img_zoom : true,
|
||||
open_close_time : 200, // durée de l'animation pour l'ouverture et la fermeture de la lightbox
|
||||
ol_time_diff : 100, // animation de superposition avance (à l'ouverture) et retard (à la fermeture) à la fenêtre
|
||||
fading_time : 50, // durée de l'animation de fondu des éléments
|
||||
slideshow_time : 4000, // durée de l'intervalle du diaporama
|
||||
animation_time : 100,
|
||||
counter : false, // s'il faut afficher le compteur d'éléments
|
||||
progressbar : false, // s'il faut afficher une barre de progression lors de l'exécution du diaporama
|
||||
max_width : '95%', // largeur maximale de la lightbox
|
||||
max_height : '95%', // hauteur maximale de la lightbox
|
||||
wrap_class : 'lcl_fade_oc', // Classes personnalisées ajoutées au wrapper: effet à l'ouverture de la lb (lcl_fade_oc | lcl_zoomin_oc | lcl_rtl_oc)
|
||||
skin : 'minimal', // minimal | light | dark
|
||||
data_position : 'over', // Spécifie où les données des éléments seront affichées. Les modes disponibles sont :over, under|rside|lside
|
||||
cmd_position : 'inner', // Déclare où les commandes doivent être affichées : inner|outer
|
||||
nav_btn_pos : 'normal', // Régle les flèches et la position de lecture/pause. Options disponibles: normal|middle
|
||||
shox_title : true, // s'il faut afficher les titres
|
||||
show_descr : false, // s'il faut afficher les descriptions
|
||||
show_author : true, // s'il faut afficher les auteurs
|
||||
thumbs_nav : false, // permet la navigation par vignettes (nécessite des éléments affiche ou images)
|
||||
fullscreen : true, // Autoriser ou non le mode plein écran
|
||||
fs_img_behavior : 'smart', //Comportement de l'image en plein écran : fit|fill|smart
|
||||
fs_only : 500, // s'il faut utiliser uniquement l'ouverture de la lightbox en mode plein écran (utile pour les appareils mobiles) : false | (integer)
|
||||
browser_fs_mode : true, // utiliser ou non le mode plein écran du navigateur
|
||||
txt_toggle_cmd : true, // s'il faut afficher le bouton de basculement du texte de l'élément
|
||||
download : true, // whether to show element's file download button
|
||||
touchswipe : true, // permet les interactions tactiles (nécessite AlloyFinger)
|
||||
rclick_prevent : true, // s'il faut éviter le clic droit sur les éléments de la lightbox
|
||||
});
|
||||
|
||||
var $obj = lc_lightbox('#lcl_month a', {
|
||||
img_zoom : true,
|
||||
deeplink : true,
|
||||
open_close_time : 200,
|
||||
ol_time_diff : 100,
|
||||
wrap_class : 'lcl_zoomin_oc',
|
||||
skin : 'minimal',
|
||||
txt_hidden : true,
|
||||
fullscreen : true,
|
||||
fs_img_behavior : 'smart',
|
||||
browser_fs_mode : true,
|
||||
rclick_prevent : true,
|
||||
});
|
||||
|
||||
var $obj3 = lc_lightbox('#lcl_gm a', {
|
||||
img_zoom : true,
|
||||
open_close_time : 100,
|
||||
ol_time_diff : 100,
|
||||
max_width : '65%',
|
||||
max_height : '65%',
|
||||
wrap_class : 'lcl_zoomin_oc',
|
||||
skin : 'minimal',
|
||||
data_position : 'rside',
|
||||
cmd_position : 'inner',
|
||||
show_title : true,
|
||||
show_descr : true,
|
||||
show_author : true,
|
||||
fullscreen : true,
|
||||
fs_img_behavior : 'smart',
|
||||
browser_fs_mode : false,
|
||||
touchswipe : true,
|
||||
rclick_prevent : true,
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<?php
|
||||
|
||||
try {
|
||||
$conn4 = new PDO('sqlite:db_photo.sqlite3');
|
||||
$query4 = "SELECT COUNT(*) AS count FROM photos";
|
||||
|
||||
$stmt = $conn4->prepare($query4);
|
||||
$stmt->execute();
|
||||
|
||||
$result = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
$numRows = $result['count'];
|
||||
|
||||
$conn4 = null;
|
||||
}
|
||||
catch(PDOException $e) {
|
||||
echo $e->getMessage();
|
||||
}
|
||||
|
||||
// calcul du nombre de pages (arrondi a l'entier supérieur)
|
||||
$nbpages = ceil($numRows / 13);
|
||||
$prec = $page - 1;
|
||||
$suiv = $page + 1;
|
||||
|
||||
echo '<div class="navPage">' . gettext("Page") . ': ';
|
||||
if ($page >= 2) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$prec.'" title="'.gettext("Previous Page").'">« '.gettext("prev").'</a> ';
|
||||
for ($i = 1; $i <= $nbpages; $i++) {
|
||||
if ($i != $page) {
|
||||
echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$i.'" title="'.gettext("Page").' '.$i.'">'.$i.' </a> ';
|
||||
}
|
||||
else {
|
||||
echo "<span class='gras'>".$i."</span> ";
|
||||
}
|
||||
}
|
||||
if ($page < $nbpages) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$suiv.'" title="'.gettext("Next Page").'">'.gettext("next").' »</a> ';
|
||||
echo '</div>';
|
||||
?>
|
||||
|
||||
<p class="navPage"><a href="index.php" title="<?php echo gettext("Home"); ?>"><?php echo gettext("Home"); ?></a> | <a href="maps.php" title="<?php echo gettext("Maps"); ?>"><?php echo gettext("Maps"); ?></a></p>
|
||||
|
||||
<p><em><small>© 2013-<?php echo date('Y'); ?> sur-le-sentier.fr</small></em></p>
|
||||
|
||||
<script src='js/lc_lightbox.min.js' type='text/javascript'></script>
|
||||
<script src='js/alloy_finger.min.js' type='text/javascript'></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
138
picture.php
138
picture.php
@@ -1,138 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title><?php gettext('View photos in Sqlite base'); ?></title>
|
||||
|
||||
<link rel="stylesheet" href="css/sls.css" />
|
||||
<link rel='stylesheet' href='css/lc_lightbox.min.css' />
|
||||
<link rel='stylesheet' href='css/open_close_fx.css' />
|
||||
<link rel='stylesheet' href='css/minimal.css' />
|
||||
|
||||
<?php include 'functions.php';
|
||||
session_start();
|
||||
/*
|
||||
// Redirects user to login.php if not logged in
|
||||
if($_SESSION['Active'] == false){
|
||||
header("location:admin/login.php");
|
||||
exit;
|
||||
}
|
||||
*/
|
||||
$domain = 'sentier';
|
||||
localize($domain);
|
||||
?>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1><?php echo gettext('avif - heic - webp - jpg'); ?></h1>
|
||||
|
||||
<?php
|
||||
$image = "2022-04-16_Brocard_8996";
|
||||
$avif_path = "photos/avif/";
|
||||
$webp_path = "photos/webp/";
|
||||
$heic_path = "photos/heic/";
|
||||
$jpg_path = "photos/img/";
|
||||
|
||||
|
||||
$code = '
|
||||
<picture>
|
||||
<source srcset="photos/avif/2022-04-16_Brocard_8996.avif" type="image/avif" />
|
||||
<source srcset="photos/webp/2022-04-16_Brocard_8996.webp" type="image/webp" />
|
||||
<img src="photos/img/2022-04-16_Brocard_8996.jpg" alt="Pic Description" />
|
||||
</picture>';
|
||||
?>
|
||||
|
||||
<pre>
|
||||
<?= htmlspecialchars($code); ?>
|
||||
</pre>
|
||||
|
||||
<div class="cadre" id="lcl_month">
|
||||
<a href ="<?php echo host() . $jpg_path . $image; ?>.jpg">
|
||||
<picture>
|
||||
<source srcset="<?php echo $avif_path . $image; ?>.avif" type="image/avif" />
|
||||
<source srcset="<?php echo $webp_path . $image; ?>.webp" type="image/webp" />
|
||||
<img src="<?php echo host() . $jpg_path . $image; ?>.jpg" class="trois" alt="Pic Description" />
|
||||
</picture>
|
||||
</a>
|
||||
|
||||
<!--a href ="<?php echo host() . $webp_path . $image; ?>.webp">
|
||||
<img src="<?php echo host() . $webp_path . $image; ?>.webp" class="trois" alt="Pic Description" />
|
||||
</a>
|
||||
|
||||
<a href="<?php echo host() . $jpg_path . $image; ?>.jpg">
|
||||
<img src="<?php echo host() . $jpg_path . $image; ?>.jpg" class="trois" alt="Pic Description" />
|
||||
</a-->
|
||||
|
||||
</div>
|
||||
|
||||
<script type='text/javascript'>
|
||||
$(document).ready(function() {
|
||||
|
||||
var $obj = lc_lightbox('#lcl_month a', {
|
||||
img_zoom : true,
|
||||
deeplink : true,
|
||||
open_close_time : 200,
|
||||
ol_time_diff : 100,
|
||||
wrap_class : 'lcl_zoomin_oc',
|
||||
skin : 'minimal',
|
||||
txt_hidden : true,
|
||||
fullscreen : true,
|
||||
fs_img_behavior : 'smart',
|
||||
browser_fs_mode : true,
|
||||
rclick_prevent : true,
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<th>OS</th><th>Browser</th><th>Format affiché</th><th>Formats reconnus</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>macOS 12.4 arm</td><td>Safari 15.5</td><td>webp</td><td>webp jpg</td></tr>
|
||||
<tr><td>macOS 12.4 arm</td><td>Firefox 100.0.2</td><td>avif</td><td>avif webp jpg</td></tr>
|
||||
<tr><td>macOS 12.4 arm</td><td>Chromium 101.0.4951.64</td><td>avif</td><td>avif webp jpg</td></tr>
|
||||
<tr><td>W10 21H2 19044.1706</td><td>Edge 101.0.1210.53</td><td>webp</td><td>webp jpg</td></tr>
|
||||
<tr><td>W10 21H2 19044.1706</td><td>Firefox 91.8.0esr</td><td>webp</td><td>webp jpg</td></tr>
|
||||
<tr><td>W10 21H2 19044.1706</td><td>Chrome 102.0.5005.62</td><td>avif</td><td>avif webp jpg</td></tr>
|
||||
<tr><td>W11 21H2 22000.613 arm</td><td>Edge 101.0.1210.39</td><td>webp</td><td></td></tr>
|
||||
<tr><td>W11 21H2 22000.613 arm</td><td>Firefox 100.0.2</td><td>avif</td><td></td></tr>
|
||||
<tr><td>W11 21H2 22000.613 arm</td><td>Brave 1.39.111</td><td>avif</td><td></td></tr>
|
||||
<tr><td>W11 21H2 22000.613 arm</td><td>Vivaldi 5.2.2623.48</td><td>avif</td><td></td></tr>
|
||||
<tr><td>iOS 15.5</td><td>Safari</td><td></td><td>webp jpg</td></tr>
|
||||
<tr><td>iOS 15.5</td><td>Firefox</td><td></td><td>webp jpg</td></tr>
|
||||
<tr><td>iOS 15.5</td><td>Brave</td><td></td><td>webp jpg</td></tr>
|
||||
<tr><td>Android</td><td>Chrome 101.0.4951.41</td><td></td><td>avif webp jpg</td></tr>
|
||||
<tr><td>Android</td><td>Firefox 100.1.1</td><td></td><td>avif webp jpg</td></tr>
|
||||
<tr><td>Android</td><td></td><td></td><td></td></tr>
|
||||
<tr><td colpsan="4">No support for heic on any platform [<a href="https://shkspr.mobi/blog/2020/12/coping-with-heic-in-the-browser/"link]</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
|
||||
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
|
||||
<!--img
|
||||
...
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width="2032"
|
||||
height="1076"
|
||||
/-->
|
||||
|
||||
<p><em><small>© 2013-<?php echo date('Y'); ?> sur-le-sentier.fr</small></em></p>
|
||||
|
||||
<script src='js/lc_lightbox.min.js' type='text/javascript'></script>
|
||||
<script src='js/alloy_finger.min.js' type='text/javascript'></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
135
picture_2.php
135
picture_2.php
@@ -1,135 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title><?php gettext('View photos in Sqlite base'); ?></title>
|
||||
|
||||
<link rel="stylesheet" href="css/sls.css" />
|
||||
<link rel='stylesheet' href='lightgallery/css/lightgallery-bundle.min.css' />
|
||||
|
||||
|
||||
<?php include 'functions.php';
|
||||
session_start();
|
||||
/*
|
||||
// Redirects user to login.php if not logged in
|
||||
if($_SESSION['Active'] == false){
|
||||
header("location:admin/login.php");
|
||||
exit;
|
||||
}
|
||||
*/
|
||||
$domain = 'sentier';
|
||||
localize($domain);
|
||||
?>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
|
||||
<script src='lightgallery/lightgallery.min.js' type='text/javascript'></script>
|
||||
<script src='lightgallery/lg-zoom.min.js' type='text/javascript'></script>
|
||||
<script src='lightgallery/lg-fullscreen.min.js' type='text/javascript'></script>
|
||||
<script src='lightgallery/lg-thumbnail.min.js' type='text/javascript'></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1><?php echo gettext('avif - webp - jpg with lightGallery'); ?></h1>
|
||||
|
||||
<?php
|
||||
$image = "2022-04-16_Brocard_8996";
|
||||
$avif_path = "photos/avif/";
|
||||
$webp_path = "photos/webp/";
|
||||
$heic_path = "photos/heic/";
|
||||
$jpg_path = "photos/img/";
|
||||
|
||||
|
||||
$code = '
|
||||
<picture>
|
||||
<source srcset="photos/avif/2022-04-16_Brocard_8996.avif" type="image/avif" />
|
||||
<source srcset="photos/webp/2022-04-16_Brocard_8996.webp" type="image/webp" />
|
||||
<img src="photos/img/2022-04-16_Brocard_8996.jpg" alt="Pic Description" />
|
||||
</picture>';
|
||||
?>
|
||||
|
||||
<pre>
|
||||
<?= htmlspecialchars($code); ?>
|
||||
</pre>
|
||||
|
||||
<pre>
|
||||
jpeg préchargé même si web/avif supporté:
|
||||
https://github.com/sachinchoolur/lightGallery/issues/1308
|
||||
</pre>
|
||||
|
||||
<div class="cadre" id="lightgallery">
|
||||
<a data-src="<?php echo $jpg_path . $image; ?>.jpg" data-sources='[{"srcset": "<?php echo $webp_path . $image; ?>.webp", "type":"image/webp"}]'>
|
||||
<picture>
|
||||
<source srcset="<?php echo $avif_path . $image; ?>.avif" type="image/avif" />
|
||||
<source srcset="<?php echo $webp_path . $image; ?>.webp" type="image/webp" />
|
||||
<img src="<?php echo host() . $jpg_path . $image; ?>.jpg" class="trois" alt="Pic Description" />
|
||||
</picture>
|
||||
<!--img src="<?php echo host() . $jpg_path . $image; ?>.jpg" class="trois" alt="Pic Description" /-->
|
||||
</a>
|
||||
|
||||
<!--a href ="<?php echo host() . $webp_path . $image; ?>.webp">
|
||||
<img src="<?php echo host() . $webp_path . $image; ?>.webp" class="trois" alt="Pic Description" />
|
||||
</a>
|
||||
|
||||
<a href="<?php echo host() . $jpg_path . $image; ?>.jpg">
|
||||
<img src="<?php echo host() . $jpg_path . $image; ?>.jpg" class="trois" alt="Pic Description" />
|
||||
</a-->
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
lightGallery(document.getElementById('lightgallery'), {
|
||||
plugins: [lgZoom, lgThumbnail, lgFullscreen],
|
||||
speed: 500,
|
||||
licenseKey: '`0000-0000-000-0000'
|
||||
});
|
||||
</script>
|
||||
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<th>OS</th><th>Browser</th><th>Format affiché</th><th>Formats reconnus</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>macOS 12.4 arm</td><td>Safari 15.5</td><td>webp</td><td>webp jpg</td></tr>
|
||||
<tr><td>macOS 12.4 arm</td><td>Firefox 100.0.2</td><td>avif</td><td>avif webp jpg</td></tr>
|
||||
<tr><td>macOS 12.4 arm</td><td>Chromium 101.0.4951.64</td><td>avif</td><td>avif webp jpg</td></tr>
|
||||
<tr><td>W10 21H2 19044.1706</td><td>Edge 101.0.1210.53</td><td>webp</td><td>webp jpg</td></tr>
|
||||
<tr><td>W10 21H2 19044.1706</td><td>Firefox 91.8.0esr</td><td>webp</td><td>webp jpg</td></tr>
|
||||
<tr><td>W10 21H2 19044.1706</td><td>Chrome 102.0.5005.62</td><td>avif</td><td>avif webp jpg</td></tr>
|
||||
<tr><td>W11 21H2 22000.613 arm</td><td>Edge 101.0.1210.39</td><td>webp</td><td></td></tr>
|
||||
<tr><td>W11 21H2 22000.613 arm</td><td>Firefox 100.0.2</td><td>avif</td><td></td></tr>
|
||||
<tr><td>W11 21H2 22000.613 arm</td><td>Brave 1.39.111</td><td>avif</td><td></td></tr>
|
||||
<tr><td>W11 21H2 22000.613 arm</td><td>Vivaldi 5.2.2623.48</td><td>avif</td><td></td></tr>
|
||||
<tr><td>iOS 15.5</td><td>Safari</td><td></td><td>webp jpg</td></tr>
|
||||
<tr><td>iOS 15.5</td><td>Firefox</td><td></td><td>webp jpg</td></tr>
|
||||
<tr><td>iOS 15.5</td><td>Brave</td><td></td><td>webp jpg</td></tr>
|
||||
<tr><td>Android</td><td>Chrome 101.0.4951.41</td><td></td><td>avif webp jpg</td></tr>
|
||||
<tr><td>Android</td><td>Firefox 100.1.1</td><td></td><td>avif webp jpg</td></tr>
|
||||
<tr><td>Android</td><td></td><td></td><td></td></tr>
|
||||
<tr><td colpsan="4">No support for heic on any platform [<a href="https://shkspr.mobi/blog/2020/12/coping-with-heic-in-the-browser/">link</a>]</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<pre>
|
||||
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
|
||||
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
|
||||
<!--img
|
||||
...
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width="2032"
|
||||
height="1076"
|
||||
/-->
|
||||
</pre>
|
||||
|
||||
<p><em><small>© 2013-<?php echo date('Y'); ?> sur-le-sentier.fr</small></em></p>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
54
popup.html
54
popup.html
@@ -1,54 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title></title>
|
||||
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" type="text/javascript"></script>
|
||||
<link href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h3> jQuery UI demo </h3>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#btnShow").click(function () {
|
||||
$("#dialog").dialog({
|
||||
modal: true,
|
||||
title: "Google Map",
|
||||
width: 600,
|
||||
height: 450,
|
||||
/*
|
||||
buttons: {
|
||||
Close: function () {
|
||||
$(this).dialog('close');
|
||||
}
|
||||
},
|
||||
*/
|
||||
/*
|
||||
https://api.jqueryui.com/dialog/
|
||||
*/
|
||||
open: function () {
|
||||
var mapOptions = {
|
||||
center: new google.maps.LatLng(19.0606917, 72.83624970000005),
|
||||
zoom: 18,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
}
|
||||
var map = new google.maps.Map($("#dvMap")[0], mapOptions);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<input id="btnShow" type="button" value="Show Maps" />
|
||||
<div id="dialog" style="display: none">
|
||||
<div id="dvMap" style="height: 380px; width: 580px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--iframe src="https://maps.google.com/maps?q=46.61211515,5.8780727&t=&z=11&ie=UTF8&iwloc=&output=embed" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,40 +0,0 @@
|
||||
<?php
|
||||
|
||||
//action.php
|
||||
|
||||
//include('database_connection.php');
|
||||
|
||||
if($_POST['action'] == 'edit')
|
||||
{
|
||||
$data = array(
|
||||
':first_name' => $_POST['first_name'],
|
||||
':last_name' => $_POST['last_name'],
|
||||
':gender' => $_POST['gender'],
|
||||
':id' => $_POST['id']
|
||||
);
|
||||
|
||||
$query = "
|
||||
UPDATE tbl_sample
|
||||
SET first_name = :first_name,
|
||||
last_name = :last_name,
|
||||
gender = :gender
|
||||
WHERE id = :id
|
||||
";
|
||||
$statement = $connect->prepare($query);
|
||||
$statement->execute($data);
|
||||
echo json_encode($_POST);
|
||||
}
|
||||
|
||||
if($_POST['action'] == 'delete')
|
||||
{
|
||||
$query = "
|
||||
DELETE FROM tbl_sample
|
||||
WHERE id = '".$_POST["id"]."'
|
||||
";
|
||||
$statement = $connect->prepare($query);
|
||||
$statement->execute();
|
||||
echo json_encode($_POST);
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
@@ -1,7 +0,0 @@
|
||||
<?php
|
||||
|
||||
//database_connection.php
|
||||
|
||||
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "sncfp1p2");
|
||||
|
||||
?>
|
||||
@@ -1,78 +0,0 @@
|
||||
<?php
|
||||
|
||||
//fetch.php
|
||||
|
||||
include('database_connection.php'); // $connect
|
||||
|
||||
$column = array("id", "first_name", "last_name", "gender");
|
||||
|
||||
$query = "SELECT * FROM tbl_sample ";
|
||||
|
||||
if(isset($_POST["search"]["value"]))
|
||||
{
|
||||
$query .= '
|
||||
WHERE first_name LIKE "%'.$_POST["search"]["value"].'%"
|
||||
OR last_name LIKE "%'.$_POST["search"]["value"].'%"
|
||||
OR gender LIKE "%'.$_POST["search"]["value"].'%"
|
||||
';
|
||||
}
|
||||
|
||||
if(isset($_POST["order"]))
|
||||
{
|
||||
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
|
||||
}
|
||||
else
|
||||
{
|
||||
$query .= 'ORDER BY id DESC ';
|
||||
}
|
||||
$query1 = '';
|
||||
|
||||
if($_POST["length"] != -1)
|
||||
{
|
||||
$query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
|
||||
}
|
||||
//echo $query1;
|
||||
//echo $query;
|
||||
$statement = $connect->prepare($query);
|
||||
|
||||
$statement->execute();
|
||||
|
||||
$number_filter_row = $statement->rowCount(); // nb de result de query
|
||||
|
||||
//echo $query1;
|
||||
$statement = $connect->prepare($query . $query1);
|
||||
|
||||
$statement->execute();
|
||||
|
||||
$result = $statement->fetchAll();
|
||||
|
||||
$data = array();
|
||||
|
||||
foreach($result as $row)
|
||||
{
|
||||
$sub_array = array();
|
||||
$sub_array[] = $row['id'];
|
||||
$sub_array[] = $row['first_name'];
|
||||
$sub_array[] = $row['last_name'];
|
||||
$sub_array[] = $row['gender'];
|
||||
$data[] = $sub_array;
|
||||
}
|
||||
|
||||
function count_all_data($connect)
|
||||
{
|
||||
$query = "SELECT * FROM tbl_sample";
|
||||
$statement = $connect->prepare($query);
|
||||
$statement->execute();
|
||||
return $statement->rowCount();
|
||||
}
|
||||
|
||||
$output = array(
|
||||
'draw' => intval($_POST['draw']),
|
||||
'recordsTotal' => count_all_data($connect),
|
||||
'recordsFiltered' => $number_filter_row,
|
||||
'data' => $data
|
||||
);
|
||||
|
||||
echo json_encode($output);
|
||||
|
||||
?>
|
||||
@@ -1,74 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>How to use Tabledit plugin with jQuery Datatable in PHP Ajax</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
|
||||
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
||||
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h3 align="center">How to use Tabledit plugin with jQuery Datatable in PHP Ajax</h3>
|
||||
<br />
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Sample Data</div>
|
||||
<div class="panel-body">
|
||||
<div class="table-responsive">
|
||||
<table id="sample_data" class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Gender</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script type="text/javascript" language="javascript" >
|
||||
$(document).ready(function(){
|
||||
|
||||
var dataTable = $('#sample_data').DataTable({
|
||||
"processing" : true,
|
||||
"serverSide" : true,
|
||||
"order" : [],
|
||||
"ajax" : {
|
||||
url:"fetch.php",
|
||||
type:"POST"
|
||||
}
|
||||
});
|
||||
|
||||
$('#sample_data').on('draw.dt', function(){
|
||||
$('#sample_data').Tabledit({
|
||||
url:'action.php',
|
||||
dataType:'json',
|
||||
columns:{
|
||||
identifier : [0, 'id'],
|
||||
editable:[[1, 'first_name'], [2, 'last_name'], [3, 'gender', '{"1":"Male","2":"Female"}']]
|
||||
},
|
||||
restoreButton:false,
|
||||
onSuccess:function(data, textStatus, jqXHR)
|
||||
{
|
||||
if(data.action == 'delete')
|
||||
{
|
||||
$('#' + data.id).remove();
|
||||
$('#sample_data').DataTable().ajax.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
BIN
test_sqlite.zip
BIN
test_sqlite.zip
Binary file not shown.
@@ -1,71 +0,0 @@
|
||||
<?php
|
||||
|
||||
//action.php
|
||||
// id, filename, lens, legende, copyright, title,creator,keywords
|
||||
|
||||
//include('database_connection.php');
|
||||
//print_r($_POST);
|
||||
/*
|
||||
*/
|
||||
//$_POST['action'] = 'delete';
|
||||
//$_POST['action'] = 'edit';
|
||||
/*
|
||||
$_POST["id"] = 179;
|
||||
|
||||
$_POST['lens'] = "";
|
||||
$_POST['legende'] = "cso";
|
||||
$_POST['copyright'] = "cso";
|
||||
$_POST['title'] = "cso";
|
||||
$_POST['creator'] = "";
|
||||
$_POST['keywords'] = "";
|
||||
*/
|
||||
$conn = new PDO('sqlite:../db_photo.sqlite3');
|
||||
|
||||
if($_POST['action'] == 'edit') {
|
||||
try {
|
||||
$data = array(
|
||||
':lens' => $_POST['lens'],
|
||||
':legende' => $_POST['legende'],
|
||||
':copyright' => $_POST['copyright'],
|
||||
':title' => $_POST['title'],
|
||||
':creator' => $_POST['creator'],
|
||||
':keywords' => $_POST['keywords'],
|
||||
':id' => $_POST['id']
|
||||
);
|
||||
|
||||
$query = "
|
||||
UPDATE photos
|
||||
SET lens = :lens,
|
||||
legende = :legende,
|
||||
copyright = :copyright,
|
||||
title = :title,
|
||||
creator = :creator,
|
||||
keywords = :keywords
|
||||
WHERE id = :id
|
||||
";
|
||||
// echo $query;
|
||||
// print_r($data);
|
||||
|
||||
$statement = $conn->prepare($query);
|
||||
$statement->execute($data);
|
||||
echo json_encode($_POST);
|
||||
}
|
||||
catch(PDOException $e) {
|
||||
echo $e->getMessage();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if($_POST['action'] == 'delete') {
|
||||
$query = "
|
||||
DELETE FROM photos
|
||||
WHERE id = '".$_POST["id"]."'
|
||||
";
|
||||
$statement = $conn->prepare($query);
|
||||
$statement->execute();
|
||||
echo json_encode($_POST);
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
|
||||
6762
test_sqlite/bootstrap.css
vendored
6762
test_sqlite/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
@@ -1,185 +0,0 @@
|
||||
table.dataTable {
|
||||
clear: both;
|
||||
margin-top: 6px !important;
|
||||
margin-bottom: 6px !important;
|
||||
max-width: none !important;
|
||||
border-collapse: separate !important;
|
||||
}
|
||||
table.dataTable td,
|
||||
table.dataTable th {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
table.dataTable td.dataTables_empty,
|
||||
table.dataTable th.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
table.dataTable.nowrap th,
|
||||
table.dataTable.nowrap td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_length label {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_length select {
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter label {
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
margin-left: 0.5em;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
padding-top: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
||||
margin: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
margin-top: -26px;
|
||||
text-align: center;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
|
||||
table.dataTable thead > tr > td.sorting_asc,
|
||||
table.dataTable thead > tr > td.sorting_desc,
|
||||
table.dataTable thead > tr > td.sorting {
|
||||
padding-right: 30px;
|
||||
}
|
||||
table.dataTable thead > tr > th:active,
|
||||
table.dataTable thead > tr > td:active {
|
||||
outline: none;
|
||||
}
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
table.dataTable thead .sorting:after,
|
||||
table.dataTable thead .sorting_asc:after,
|
||||
table.dataTable thead .sorting_desc:after,
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
display: block;
|
||||
font-family: 'Glyphicons Halflings';
|
||||
opacity: 0.5;
|
||||
}
|
||||
table.dataTable thead .sorting:after {
|
||||
opacity: 0.2;
|
||||
content: "\e150";
|
||||
/* sort */
|
||||
}
|
||||
table.dataTable thead .sorting_asc:after {
|
||||
content: "\e155";
|
||||
/* sort-by-attributes */
|
||||
}
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
content: "\e156";
|
||||
/* sort-by-attributes-alt */
|
||||
}
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
div.dataTables_scrollHead table.dataTable {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
div.dataTables_scrollBody table thead .sorting:after,
|
||||
div.dataTables_scrollBody table thead .sorting_asc:after,
|
||||
div.dataTables_scrollBody table thead .sorting_desc:after {
|
||||
display: none;
|
||||
}
|
||||
div.dataTables_scrollBody table tbody tr:first-child th,
|
||||
div.dataTables_scrollBody table tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div.dataTables_scrollFoot table {
|
||||
margin-top: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dataTables_wrapper div.dataTables_length,
|
||||
div.dataTables_wrapper div.dataTables_filter,
|
||||
div.dataTables_wrapper div.dataTables_info,
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
table.dataTable.table-condensed > thead > tr > th {
|
||||
padding-right: 20px;
|
||||
}
|
||||
table.dataTable.table-condensed .sorting:after,
|
||||
table.dataTable.table-condensed .sorting_asc:after,
|
||||
table.dataTable.table-condensed .sorting_desc:after {
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
table.table-bordered.dataTable th,
|
||||
table.table-bordered.dataTable td {
|
||||
border-left-width: 0;
|
||||
}
|
||||
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
|
||||
table.table-bordered.dataTable td:last-child,
|
||||
table.table-bordered.dataTable td:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
table.table-bordered.dataTable tbody th,
|
||||
table.table-bordered.dataTable tbody td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
div.dataTables_scrollHead table.table-bordered {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
div.table-responsive > div.dataTables_wrapper > div.row {
|
||||
margin: 0;
|
||||
}
|
||||
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
<?php
|
||||
|
||||
//database_connection.php
|
||||
|
||||
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "sncfp1p2");
|
||||
|
||||
?>
|
||||
@@ -1,80 +0,0 @@
|
||||
<?php
|
||||
|
||||
//fetch.php
|
||||
// id, filename, lens, legende, copyright, title,creator,keywords
|
||||
|
||||
$column = array("id", "filename", "lens", "legende", "copyright", "title", "creator", "keywords");
|
||||
|
||||
$query = "SELECT * FROM photos ";
|
||||
|
||||
if(isset($_POST["search"]["value"]))
|
||||
{
|
||||
$query .= '
|
||||
WHERE filename LIKE "%'.$_POST["search"]["value"].'%"
|
||||
OR lens LIKE "%'.$_POST["search"]["value"].'%"
|
||||
OR speed LIKE "%'.$_POST["search"]["value"].'%"
|
||||
';
|
||||
}
|
||||
|
||||
if(isset($_POST["order"]))
|
||||
{
|
||||
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
|
||||
}
|
||||
else
|
||||
{
|
||||
$query .= 'ORDER BY id DESC ';
|
||||
}
|
||||
$query1 = '';
|
||||
|
||||
if($_POST["length"] != -1)
|
||||
{
|
||||
$query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
|
||||
}
|
||||
|
||||
|
||||
$conn = new PDO('sqlite:../db_photo.sqlite3');
|
||||
|
||||
$stmt = $conn->prepare($query);
|
||||
$stmt->execute();
|
||||
$res = $stmt->fetchAll();
|
||||
$number_filter_row = count($res);
|
||||
|
||||
$stmt = $conn->prepare($query . $query1);
|
||||
$stmt->execute();
|
||||
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
|
||||
$data = array();
|
||||
|
||||
foreach($result as $row) {
|
||||
$sub_array = array();
|
||||
$sub_array[] = $row['id'];
|
||||
$sub_array[] = $row['filename'];
|
||||
$sub_array[] = $row['lens'];
|
||||
$sub_array[] = $row['legende'];
|
||||
$sub_array[] = $row['copyright'];
|
||||
$sub_array[] = $row['title'];
|
||||
$sub_array[] = $row['creator'];
|
||||
$sub_array[] = $row['keywords'];
|
||||
$data[] = $sub_array;
|
||||
}
|
||||
// id, filename, lens, legende, copyright, title,creator,keywords
|
||||
|
||||
function count_all_data($connect) {
|
||||
$connect = new PDO('sqlite:../db_photo.sqlite3');
|
||||
$query = "SELECT * FROM photos";
|
||||
$statement = $connect->prepare($query);
|
||||
$statement->execute();
|
||||
return $statement->rowCount();
|
||||
}
|
||||
|
||||
$output = array(
|
||||
'draw' => intval($_POST['draw']),
|
||||
'recordsTotal' => count_all_data($conn),
|
||||
'recordsFiltered' => $number_filter_row,
|
||||
'data' => $data
|
||||
);
|
||||
|
||||
echo json_encode($output);
|
||||
|
||||
?>
|
||||
@@ -1,84 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>How to use Tabledit plugin with jQuery Datatable in PHP Ajax</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
|
||||
<!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /-->
|
||||
<link rel="stylesheet" href="bootstrap.css" />
|
||||
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css" />
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
||||
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h3 align="center">How to use Tabledit plugin with jQuery Datatable in PHP Ajax</h3>
|
||||
<br />
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Sample Data</div>
|
||||
<div class="panel-body">
|
||||
<div class="table-responsive">
|
||||
<table id="sample_data" class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Filename</th>
|
||||
<th>Lens</th>
|
||||
<th>Legende</th>
|
||||
<th>Copyright</th>
|
||||
<th>Title</th>
|
||||
<th>Creator</th>
|
||||
<th>Keywords</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script type="text/javascript" language="javascript" >
|
||||
$(document).ready(function(){
|
||||
|
||||
var dataTable = $('#sample_data').DataTable({
|
||||
"processing" : true,
|
||||
"serverSide" : true,
|
||||
"order" : [],
|
||||
"ajax" : {
|
||||
url:"fetch.php",
|
||||
type:"POST"
|
||||
}
|
||||
});
|
||||
|
||||
// id, filename, lens, legende, copyright, title,creator,keywords
|
||||
// [1, 'filename'],
|
||||
|
||||
$('#sample_data').on('draw.dt', function(){
|
||||
$('#sample_data').Tabledit({
|
||||
url:'action.php',
|
||||
dataType:'json',
|
||||
columns:{
|
||||
identifier : [0, 'id'],
|
||||
editable:[[2, 'lens'], [3, 'legende'], [4, 'copyright'], [5, 'title'], [6, 'creator'], [7, 'keywords']]
|
||||
},
|
||||
restoreButton:false,
|
||||
onSuccess:function(data, textStatus, jqXHR)
|
||||
{
|
||||
if(data.action == 'delete')
|
||||
{
|
||||
$('#' + data.id).remove();
|
||||
$('#sample_data').DataTable().ajax.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -1,23 +0,0 @@
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.container {
|
||||
width: 1370px;
|
||||
}
|
||||
}
|
||||
78
thumbs.php
78
thumbs.php
@@ -1,78 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title><?php gettext('Insert photos in Sqlite base'); ?></title>
|
||||
|
||||
<link rel="stylesheet" href="css/sls.css" />
|
||||
<link rel='stylesheet' href='css/lc_lightbox.min.css' />
|
||||
<link rel='stylesheet' href='css/open_close_fx.css' />
|
||||
<link rel='stylesheet' href='css/minimal.css' />
|
||||
|
||||
<?php //include 'functions.php';
|
||||
session_start();
|
||||
if($_SESSION['Active'] == false){ /* Redirects user to login.php if not logged in */
|
||||
header("location:admin/login.php");
|
||||
exit;
|
||||
}
|
||||
|
||||
$domain = 'sentier';
|
||||
localize($domain);
|
||||
?>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<?php
|
||||
|
||||
function create_thumb($thumb_w, $thumb_h, $image, $src_folder, $dest_folder) {
|
||||
|
||||
list($origin_w, $origin_h) = getimagesize($image);
|
||||
$origin_ratio = round($origin_w / $origin_h, 1);
|
||||
#$outFile = str_replace("photos/img", "photos/thumb", $image);
|
||||
$outFile = str_replace($src_folder, $dest_folder, $image);
|
||||
|
||||
if ($origin_w != null && $origin_h != null) {
|
||||
if ($thumb_w / $thumb_h > $origin_ratio) {
|
||||
$thumb_w = $thumb_h * $origin_ratio;
|
||||
} else {
|
||||
$thumb_h = $thumb_w / $origin_ratio;
|
||||
}
|
||||
|
||||
if ($origin_w >= 400 && $origin_h >= 400) {
|
||||
$image = new Imagick($image); // !!!
|
||||
$image->thumbnailImage($thumb_w, $thumb_h);
|
||||
$image->writeImage($outFile);
|
||||
$image->destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Taille des vignettes
|
||||
$th_w = 300;
|
||||
$th_h = 300;
|
||||
|
||||
$src_folder = 'photos/img/';
|
||||
$dest_folder = 'photos/thumbs/';
|
||||
$dir = (new AdvancedFilesystemIterator($src_folder))->match('/heic|HEIC|jpg|jpeg|JPG|JPEG|webp|WEBP|avif|AVIF$/');
|
||||
|
||||
foreach($dir as $file){
|
||||
$file = $file->getpathName();
|
||||
create_thumb($th_w, $th_h, $file, $src_folder, $dest_folder);
|
||||
}
|
||||
?>
|
||||
|
||||
<p><em><small>© 2013-<?php echo date('Y'); ?> sur-le-sentier.fr</small></em></p>
|
||||
|
||||
<script src='js/lc_lightbox.min.js' type='text/javascript'></script>
|
||||
<script src='js/alloy_finger.min.js' type='text/javascript'></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user