Il a été libéré dès maintenant (merci à l'auteur d'alerte Michael Jackson JI ) la version 3.0 bêta Shadowbox.js . En plus de la conception du site nouveau ici, c'est les changements les plus importants dans le présent communiqué avant:
Articles taggés avec 'diaporama'
Shadowbox 3.0 beta
Shadowbox assetURL: définir le chemin de l'image
Lorsque Shadowbox ouvre sa fenêtre pour afficher un contenu (images, des iframes, Film, etc ...), les écrans, en attendant un gif animé qui vient dans le paquet. Si la page utilise Shadowbox est au même niveau du dossier des images, tout fonctionne bien. Par défaut, en fait, regardez pour le gif animé ci-dessous Shadowbox images ou loading.gif - ou des images / chargement-light.gif si vous avez choisi styles légers (shadowbox-light.css). Sinon, et souvent il ya aussi le risque de ne pas accorgesene, si nous sommes dans un arbre différent, il génère un code 404 nice - page non poutre, dans notre dossier non trouvé!
Pour résoudre le problème vient de l'initialisation Shadowbox avec un paramètre approprié, qui pointe vers le chemin absolu vers le dossier images: undolog.com, par exemple, j'ai placé le gif animé de chargement directement dans le présent racine dans le dossier images (que diriez-vous d'un milliard de d'autres les sites 
. Pour rendre ce dossier accessible à Shadowbox, quel que soit le chemin, je suis entré dans semplicemenete:
1 2 | / / Init shadowbox avec le paramètre assetURL assetURL : 'http://www.undolog.com/' } ) ; Shadowbox Init ({assetURL: «http://www.undolog.com/ '}).; |
Tous les clones de la Visionneuse d'un tableau dynamique
Planetozh a créé un beau paysage de l'outil dynamique qui permet de lister toutes les librairies Javascript comme la Visionneuse.
L'utilisation d'un panneau (voir l'image à gauche) avec un certain nombre de "ticks" (case à cocher), qui indiquent les différentes fonctions des bibliothèques, vous pouvez exécuter un filtre obtenant ainsi une liste d'un ou plusieurs bibliothèques qui font le travail. Nous espérons que l'auteur maintient à jour cette page une grande, très utile à dégager l'une des nombreuses bibliothèques et puissant de ce type.
Lumière galerie: Lightview 2.0.0_rc1
Voici encore un autre récemment publié bibliothèque discrète JavaScript pour des galeries d'images et plus encore. Lightview dans 2.0.0_rc1 communiqué , ajoute également des fonctionnalités pour fenêtre «Ouvrir» avec le contenu qui va au-delà de la simple image: animations Flash, QuickTime , Forme et IFRAME! Par rapport à la version précédente (1.1.0 - qui ne traite que des images), puis, cette release candidate est des fonctionnalités améliorées sont également présents dans d'autres bibliothèques . . Les outils requis par Lighview de travailler sont très bien connus Prototype 1.6.0.2 et 1.8.1 Scriptaculous . Gliattributi utilisé pour gérer la bibliothèque sont class et de rel .
Intéressant un aspect de cette bibliothèque est l'extrême soin avec lequel le graphique apparaît.
Note: 9 - Accueil Lightview
Bibliothèque de lumière: Slimbox par une Shadowbox, les galeries en Javascript
Certains pourraient dire - et à juste titre - assez! Librairies Javascript (discrète - non intrusive, ou partiellement) pour gérer les images et les galeries sont si nombreux. Quoi qu'il en soit, voici la liste, avec les avantages et les inconvénients, le meilleur que j'ai essayé.
Slimbox 01:41
Extrêmement minime, 7K (version 1.41), exige mootools à travailler. Comme indiqué sur la page d'accueil est un clone réel graphe Visionneuse , nous allons voir ci-dessous. Honnêtement, mis à part la compacité extrême de la bibliothèque n'est pas propres caractéristiques. Sur le même site, cependant, vous pouvez également trouver un script pour générer run-time réflexions ... vous voudrez peut-être de limiter cette 
Note: -6 - Page d'accueil Slimbox, Reflection.js Page d'accueil pour MooTools
Lightbox2
L'un des plus connu et simple. Gère les images contenues dans ce communiqué sont (de sorte qu'il ne fonctionne pas avec QuickTime, Flash, etc.) Pour son fonctionnement, exige Prototype et Scriptaculous . Utilisez l'attribut rel pour identifier les liens de vos images à traiter:
1 |
Comme les autres bibliothèques que nous allons voir, il prend en charge le mode diaporama, en insérant entre parenthèses tout identifiant dans une série de lien / image:
1 2 3 | "images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < une href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> sur l'image # 1 </ une > "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < une href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> sur l'image # 2 </ une > "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < une href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> sur l'image # 3 </ une > |
Note: 6 - Page d'accueil Lightbox2
LIGHTWINDOW 2,0
Même cela est assez fréquent! Après tout, comment comprendre ce qui est le plus utilisé? . Toutefois, il est extrêmement complet et polyvalent. Sur le site de la demande est pour les dons pour l'achat d'un Mac ... un peu invasive et urgent ... Quoi qu'il en soit, comme la précédente, pour son fonctionnement, nécessite la présence de Prototype et Scriptaculous . Contrairement à son prédécesseur, cependant, cela vous permet de visualiser les types de fichiers moltisiimi: à partir des images, des films QuickTime, films Flash, pages HTML externes et PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). En revanche, utilise des attributs différents, dont certains en option ( author, caption et title ) que les autres exigences ( class et params - pour définir le comportement de la bibliothèque). Par exemple, pour afficher une galerie d'exposition ou une diapositive en utilisant l'attribut rel :
1 2 3 | "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < une href = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "super savoureuse Look!" author = "Inconnu"> sur l'image # 1 </ à > "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < une href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Méfiez-vous des warewolves ..." caption = "Je ne devrais pas faire ça quand je suis affamé" author = "Inconnu" image> # 2 </ une > "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < une href = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "C'était bien!" caption = "Prenez ce que des sushis!" author = "Inconnu"> image # 3 </ une > |
Score: 8 - Page d'accueil LightWindow 2,0
ShadowBox 1.0B
Bien que la version beta 1.0, c'est peut-être la bibliothèque la plus complète, tant du point de vue fonctionnel pour les deux bibliothèques en charge. Pour son fonctionnement, en fait, vous pouvez choisir parmi une variété de cadres, avec le fichier "adaptateurs" spécialement fabriqués et fournis par l'auteur:
- Yahoo! User Interface Library (yahoo, dom, un événement, anim)
- Ext (autonome, poste-core.js)
- Prototype + Scriptaculous
- jQuery
- MooTools (nécessite Fx.Styles et ses dépendances)
- Dojo Toolkit (merci Peter Higgins)
L'effet visuel (configurable via la peau / css), puis, contrairement aux autres, est certainement plus attrayant. Les attributs sont utilisés seulement rel où, à son intérieur, trouver de l'espace tous les autres paramètres de configuration. Par exemple, pour réaliser une galerie, il suffit d'utiliser:
1 2 |
Si vous souhaitez définir des options ( voir le site web pour la liste complète ) il suffit d'utiliser la syntaxe suivante:
1 |
Sur l'Internet, ils peuvent trouver d'autres, comme Highslide JS . En effet, si une autre bibliothèque que vous voulez me rendre compte ... Quoi qu'il en soit, personnellement, je préfère Shadowbox pour plus de simplicité, d'évolutivité et de cross-cadre.
Note: 9 - Page d'accueil Shadowbox 1.0B
Derniers Commentaires
Gabriel : Bonjour, article intéressant. J'aurais besoin de quelque chose de similaire, mais avec quelques modifications. Dans un ...
sebastian : la part de la Grande - merci!
Sujet : très utile en effet! Je l'ai essayé et il est juste ce dont j'avais besoin. Maintenant, je me demande comment puis-je obtenir ...
vik : Avec l'aide stratégique!
Pepper : Salut, je ne sais pas si vous êtes l'un des créateurs du plugin WP Bannerize. J'ai repéré un ...