Photoswipe est un album / jeu photo conçu spécifiquement pour les appareils tactiles mobiles. Il est compatible avec tous les navigateurs iPhone, iPad, BlackBerry 6+ et Desktop. L'implémentation sous-jacente est basée sur HTML / CSS / JavaScript, et est un produit d'album photo gratuit et open source.
Pour qui
Laissez le site mobile découvrir l'album de l'album comme l'application native.
Excellentes fonctionnalités
Photoswipe offre aux utilisateurs une interface interactive de l'album photo familier et intuitif.
Site officiel
http://www.photoswipe.com/
Exemple de code source
http://github.com/downloads/codecomputerlove/photoswipe/code.photoswipe-3.0.5.zip
Github
https://github.com/codecomputerlove/photoswipe
Démo en ligne
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
Caractéristiques de compatibilité
Photoswipe est compatible avec un grand nombre d'appareils mobiles et toutes les bibliothèques de classe / frameworks de développement JavaScript populaires. Il existe à la fois des versions basées sur JQuery, des versions sans jQuery et des versions compatibles mobiles jQuery. Bien sûr, tout est dans le package de code source.
Comment utiliser
Photoswipe est une bibliothèque JavaScript indépendante qui peut être facilement intégrée à votre site Web. Beaucoup d'optimisations ont été faites pour les navigateurs mobiles (webkits). Bien sûr, pour les navigateurs de bureau et JQueryMobile, des versions correspondantes sont également fournies dans le package de code source.
Références de bibliothèque de classe
<! - Photoswipe a déjà référencé Klass. Si vous devez augmenter la vitesse de chargement, vous pouvez ajouter une balise / attribut de différence au script ->
<script type = "text / javascript" src = "klass.min.js"> </ script>
<! - Remarque importante, si vous n'utilisez pas la version jQuery, une erreur se produira sous IE. Bien sûr, si vous utilisez la version jQuery, vous devez introduire jQuery ->
<script type = "text / javascript" src = "code.photoswipe-3.0.5.min.js"> </ script>
Code d'appel
/ * Ajouter une écoute d'événement téléchargée DomContent, similaire à la fonction prête de jQuery.
Exemples de méthode par défaut / 01-default.html
Veuillez vérifier les .Examples / 09-Exclusive-mode-no-thumbnails.html pour aucun mode miniature.
* /
// La méthode Photoswipe.attach reçoit 3 paramètres (collection d'éléments HTML, informations de configuration facultative et ID de type de chaîne en option lorsque plusieurs instances)
document.addeventListener ('DomContentloaded', function () {
// Définissez Photoswipe pour se lier à toutes les <a> balises sous le conteneur avec ID comme galerie. Cliquez pour activer
// L'objet ici est une instance Photoswipe, et vous pouvez utiliser des méthodes correspondantes, telles que Show (0), Hide (), etc.
var myphotoswipe = code.photoswipe.attach (window.document.QuerySelectorAll ('# galerie a'), {pertiablemousewheel: false, activeKeyboard: false});
}, FAUX);
Si vous utilisez jQuery, le code d'appel est le suivant:
// version jQuery, le fichier JS correspondant doit également être modifié dans le fichier js
// Voir des exemples / 02-jQuery.html pour plus de détails pour des exemples
$ (document) .ready (function () {
// L'objet ici est une instance Photoswipe, et vous pouvez utiliser des méthodes correspondantes, telles que Show (0), Hide (), etc.
var myphotoswipe = $ ("# galerie a"). Photoswipe ({pertiableMousewheel: false, activeKeyboard: false});
});
Code html
<! - UL LI et d'autres choses sont utilisées pour afficher des miniatures et peuvent également être ajustées au besoin. L'élément <Mg> ci-dessous est une miniature. Si ce n'est pas nécessaire, SRC peut être réglé sur vide ->
<ul id = "galerie">
<li> <a href = "images / full / 01.jpg"> <img src = "images / thumb / 01.jpg" /> </a> </li>
<li> <a href = "images / full / 02.jpg"> <img src = "images / thumb / 02.jpg" /> </a> </li>
<li> <a href = "images / full / 03.jpg"> <img src = "images / thumb / 03.jpg" /> </a> </li>
<li> <a href = "images / full / 04.jpg"> <img src = "images / thumb / 04.jpg" /> </a> </li>
<li> <a href = "images / full / 05.jpg"> <img src = "images / thumb / 05.jpg" /> </a> </li>
<li> <a href = "images / full / 06.jpg"> <img src = "images / thumb / 06.jpg" /> </a> </li>
</ul>
Description du paramètre
1.AllowUserZoom: permet aux utilisateurs de double-cliquer pour afficher les images en zoomant / bouge. Valeur par défaut = True
2.Autostartslideshow: Lorsque Photoswipe est activé, le diaporama sera automatiquement joué. Valeur par défaut = false
3.AllowrotationonUserZoom: Seule pris en charge par iOS - permet aux utilisateurs de faire pivoter des images avec des gestes en mode zoom / pan. Valeur par défaut = false
4.BackButtonHideenabled: Appuyez sur la touche de retour pour masquer les diapositives de l'album. Il est principalement utilisé par Android et BlackBerry. Il prend en charge BB6, Android V2.1, iOS 4 et les versions plus récentes. Valeur par défaut = True
5.CaptionandToolBarAutohidedELAY: Le temps de retard caché automatiquement par la barre de titre et la barre d'outils. La valeur par défaut est = 5000 (ms). S'il est réglé sur 0, il ne sera pas caché automatiquement (appuyez sur / cliquez pour changer de visible et masqué)
6.CaptionAndToolBarflipposition: bascule la barre de titre et la barre d'outils (laissez la légende s'afficher en bas et la barre d'outils s'affiche en haut). Valeur par défaut = false
7.CaptionandToolBarHide: Masquer la barre de titre et la barre d'outils. Valeur par défaut = false
8.CaptionandToolBaropacity: Transparence de la barre de titre et de la barre d'outils (0-1). Valeur par défaut = 0,8
9.CaptionAndToolBarshowEmpTyCaptions: La barre de titre est affichée même si le titre de l'image actuelle est vide. Valeur par défaut = True
10.cachemode: mode cache, code.photoswipe.cache.mode.normal (par défaut, normal) ou code.photoswipe.cache.mode.aggressif (radical, actif). Décide comment Photoswipe gère le cache d'image du cache.
11. Le mode agressif définira activement le type de "actuels, les images suivantes, précédentes" vides. Il sera utile pour les débordements de mémoire dans les navigateurs iOS plus anciens. Dans la plupart des cas, le mode normal est OK.
12.Doubletapspeed: l'intervalle maximal pour le double clic. Valeur par défaut = 300 (ms)
13.DoubleTapzoomLevel: Lorsque l'utilisateur double-cliquez, le multiple de grossissement est le niveau de "zoom-in" par défaut. Valeur par défaut = 2,5
14.EnabledRag: permet de faire glisser l'image précédente / suivante vers l'interface actuelle. Valeur par défaut = True
15.EnableKeyboard: Autoriser les opérations du clavier (commutation de flèche gauche et droite, sortie ESC, entrez la lecture automatique, affichage de la barre d'espace / barre de titre caché / sortie). Par défaut = true
16.EnableMouse Wheel: permet le fonctionnement des roues de la souris. Par défaut = true
17.fadeinspeed: la vitesse (durée) de l'élément d'effet, millisecondes. Par défaut = 250
18. Par défaut = 250
19.ImagesCaleMethod: Méthode de mise à l'échelle de l'image (mode). Valeurs facultatives: "Fit", "FitnousCale" et "Zoom". Le mode "ajustement" garantit que l'image s'adapte à l'écran. "FitnousCale" est similaire à "Fit" mais n'élargit pas l'image. "Zoom" sera criblé l'image en entier, mais il est possible que la mise à l'échelle de l'image ne soit pas également proportionnelle. Default = "fit"
20.InvertMouseheel: inversez la roue de la souris. Par défaut, le défilement vers le bas de la souris passera à l'image suivante et jusqu'à l'image précédente. Par défaut = false
21.JQUERYMOBILE: indique si Photoswipe est intégré dans le projet mobile jQuery. Par défaut, Photoswipe essaiera de résoudre ce problème pour vous
22.JQUERYMOBILEDIAGHASH: la balise de hachage de JQuery Mobile utilisée sur la fenêtre et les pages de dialogue. Valeur par défaut = "& ui-state = Dialog"
23.loop: si l'album boucle automatiquement. Par défaut = true
24.Margin: l'intervalle entre deux images, l'unité est des pixels. Par défaut = 20
25.MaxUserzoom: grossissement maximum. Par défaut = 5.0 (défini sur 0 sera ignoré)
26.MinUserZoom: le plus petit multiple de réduction de l'image. Par défaut = 0,5 (réglé sur 0 sera ignoré)
27.Mousewheelspeed: Sensibilité en réponse à la roue de la souris. Par défaut = 500 (ms)
28.NextPreviousSlidesPeed: combien de millisecondes seront retardées lorsque les boutons précédents et suivants seront cliqués. Par défaut = 0 (commutateur maintenant)
29.Preventhide: empêche les utilisateurs de fermer Photoswipe. Il masquera également le bouton "Fermer" dans la barre d'outils. Utilisez-le sur la page exclusive (l'exemple est des exemples / 08-exclusive-mode.html dans le code source). Par défaut = false
30.PREVENTSLIDESHOW: bloque le mode de lecture automatique. Il masquera également le bouton de lecture dans la barre d'outils. Par défaut = false
31.SlideshowDelay: Combien de temps faut-il pour lire l'image suivante en mode de jeu automatique? Par défaut = 3000 (ms)
32.Slidespeed: le moment où l'image glisse dans la vue. Par défaut = 250 (ms)
33. Par défaut = 50
34.Wipetimethreshold: définit le nombre maximal de millisecondes pour déclencher le geste de balayage. S'il est trop lent, il ne déclenchera pas la diapositive et ne fera que faire glisser la position de la photo actuelle. Par défaut = 250
35.SlidetimingFunction: fonction d'assouplissement lors du glissement. Default = "faciliter"
36.zindex: la valeur zindex initiale. Par défaut = 1000
37.enableUiwebViewRepositionTimeout: Vérifiez si l'orientation de l'appareil a changé. Par défaut = false
38.UiWebViewReSetPositionDelay: Le temps pour vérifier si la direction de l'appareil change régulièrement est de 500 (ms)
39.PreventDefaultTouchevents: bloque l'événement tactile par défaut, tel que le défilement de la page. Par défaut = true
40.target: doit être un élément DOM légal (tel que div). La par défaut est la fenêtre (pleine page). S'il s'agit d'un DOM de bas niveau, il sera affiché dans le DOM et peut ne pas être plein écran.
Fonctions personnalisées
getToolbar: function () {/ * renvoie la chaîne HTML à afficher dans la barre d'outils * /}, getImagesource: function (el) {/ * Tell Gallery Comment obtenir le SRC de l'image. Par défaut, la galerie suppose que vous utilisez la balise <a> pour envelopper la vignette <img>, et l'attribut HREF de la balise <a> est l'url de l'image complète. À l'heure actuelle, cette méthode peut être utilisée pour retourner le chemin de l'image de l'élément correspondant. Cela peut être de toutes sortes. Par exemple, attribut REL ou quelque chose. Il serait plus facile d'avoir jquery. * / return el.getAttribute ('rel'); }, getImageCaption: function (el) {/ ** Comme la méthode getImagesource, cette méthode renvoie le titre de l'image. Par défaut, la galerie recherche l'attribut alt de l'image. * /}, getImageMetAdata: function (el) {/ ** Si vous écoutez onDisplayImage, vous pouvez obtenir des méta-informations supplémentaires via cette fonction. Et utiliser * / return dans onDisplayImage {longDescription: el.getAttribute (el, 'data-long-description')}}Pour les téléphones Android, un clic entraînera la fermeture du problème de clic sur un calque, et le calque inférieur déclenchera toujours l'événement de clic. Notre solution est la suivante:
// déclenche des clics à plusieurs niveaux sur les téléphones Android. Nous utilisons une minuterie pour intercepter var event_timeout = 500; // empêcher plusieurs déclencheurs d'événements // les événements consécutifs de blocs dans un court laps var multiclickprevent = false; function prevetMulticlick () {if (multiclickPrevent) {return false; } multiclickPrevent = true; window.setTimeout (function () {multiclickPrevent = false;}, event_timeout); Retour Vrai; }; // s'adapter au navigateur var userAgent = Navigator.UserAgent; var likeios = userAgent.match (/ iPad | iPhone | iPod / i); var likEndroid = userAgent.match (/ android / i); var spécialclick = "click"; if (likeios) {spécialclick = "touchstart click"; } else if (likeanDroid) {spécialclick = "touchstart click"; } / Exemple $ (". T_right"). Live (spécialclick, function () {if (empêchémulticlick ()) {// effectuer d'autres opérations} else {// else est de rejeter l'opération, vous pouvez directement retourner false ou autre return false;}}); // Exemple $ ("body"). Live (spécialclick, function () {if (prestMulticlick ()) {// effectuer d'autres opérations}});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.