136 lines
4.8 KiB
PHP
136 lines
4.8 KiB
PHP
<!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>
|