Le plug-in Photoswipe peut réaliser un zoom plein écran sur le téléphone mobile et double-cliquez sur l'image pour agrandir l'image.
Site officiel du plugin Photoswipe http://www.photoswipe.com/
Les élargissements et les vues de l'image du terminal mobile de Photoswipe, les diapositives pour passer à l'image suivante et enregistrer l'image à local.
<style> .pnav {margin-top: 30px; text-align: Center; line-height: 24px; Font-Size: 16px} .pnav a {padding: 4px} .pnav a.cur {background: # 007bc4; couleur: #fff;}. Demo {width: 80%; marge: 10px auto} / * style requis * / # photos {width: 150px; Border: 1px solide # d3d3d3; marge: 20px auto; Text-Align: Centre; rembourrage: 4px; curseur: pointeur; position: relative} #photos p {position: absolue; En bas: 0; gauche: 0; rembourrage: 4px; arrière-plan: # 000; couleur: #ffff} .my-gallery {largeur: 100%; float: gauche;}. My-Gallery IMG {largeur: 100%; Hauteur: auto;}. My-Gallery Figure {affichage: bloc; flottant: à gauche; marge: 0 5px 5px 0; Largeur: 150px;}. My-Gallery FigCaption {affichage: Aucun;} </ Style>Code js:
<script type = "text / javascript"> var openphotoswipe = function () {var pswPelement = document.QuerySelector ('. PSWP') [0]; var items = [{src: 'images / s1.jpg', w: 800, h: 1142}, {src: 'images / s2.jpg', w: 800, h: 1142}, {src: 'images / s3.jpg', w: 800, h: 1142}, {src: ' }, {src: 'images / s4.jpg', w: 800, h: 1142}, {src: 'images / s5.jpg', w: 800, h: 1142}]; var options = {History: False, focus: false, showanimationDuration: 0, HideaIMationDuration: 0}; var Gallery = Nouveau Photoswipe (PSWPelement, Photoswipeui_default, articles, options); gallery.init ();}; document.getElementByid ('photos'). onclick = openphotoswipe; </cript>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.