« Essai » : différence entre les versions
De GrandTerrier
Aucun résumé des modifications |
Aucun résumé des modifications Balise : Révoqué |
||
| Ligne 6 : | Ligne 6 : | ||
Largeur : | Largeur : | ||
{{#tag:iframe|level="www"|width="100%" |height="400px"|path="zoom/photoviewer/examples/zoom.html"}} | {{#tag:iframe|level="www"|width="100%" |height="400px"|path="zoom/photoviewer/examples/zoom.html"}} | ||
<html lang="zh-CN"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<title>PhotoViewer Examples</title> | |||
<!-- Bootstrap --> | |||
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> | |||
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> | |||
<link href="../dist/photoviewer.css" rel="stylesheet"> | |||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |||
<!--[if lt IE 9]> | |||
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> | |||
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> | |||
<![endif]--> | |||
</head> | |||
<body dir="ltr"> | |||
<div class="container"> | |||
<hr> | |||
<div class="image-set"> | |||
<a data-gallery="photoviewer" data-title="Grandterrier" data-group="a" | |||
href="https://grandterrier.bzh/zoom/photoviewer/examples/2G94-1439.jpg"> | |||
<img src="https://grandterrier.bzh/zoom/photoviewer/examples/2G94-1439-s.jpg" alt=""> | |||
</a> | |||
</div> | |||
<hr> | |||
</div> | |||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |||
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> | |||
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |||
<!-- Include all compiled plugins (below), or include individual files as needed --> | |||
<script src="../dist/photoviewer.js"></script> | |||
<script> | |||
// initialize manually with a list of links | |||
$('[data-gallery=photoviewer]').click(function (e) { | |||
e.preventDefault(); | |||
var items = [], | |||
options = { | |||
index: $(this).index(), | |||
positionFixed: false | |||
}; | |||
$('[data-gallery=photoviewer]').each(function () { | |||
items.push({ | |||
src: $(this).attr('href'), | |||
title: $(this).attr('data-title') | |||
}); | |||
}); | |||
new PhotoViewer(items, options); | |||
}); | |||
</script> | |||
</body> | |||
</html> | |||
Version du 14 juillet 2023 à 10:25
colonne gauche
colonne droite
Largeur :
