Il a été libéré dès maintenant (merci d'alerter l'auteur Michael Jackson MOC ) de la version 3.0 beta Shadowbox.js . En plus de la conception du nouveau site ici est le changement le plus important avant ce communiqué:
Articles taggés avec 'scriptaculous'
Shadowbox 3.0 beta
Accordéon simple avec la classe de USimpleTabStrip
La classe USimpleTabStrip , présenté discret TabStrip simple , peut également être utilisé pour créer un menu simple accordéon .
offerti da Scriptaculous : En utilisant les effets de la BlindUp() et BlindDown() offerts par Scriptaculous :
1 2 3 4 5 6 7 8 9 10 | fonction init () { USimpleTabStrip ( ) ; UTS USimpleTabStrip = new (); ; UTS Init ().; function ( e ) { UTS. OnShow = function (e) { ( e ) ; . Effet de nouvelles BlindDown (s); } function ( e ) { UTS. OnHide = function (e) { ( e ) ; . Effet de nouvelles BlindUp (s); } } |
Et la relocalisation des éléments HTML ( source HTML ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | "accordion" > < div class = "accordéon"> "#acc1" > Accordion 1 < / a > < une href = "# ACC1"> Accordéon 1 </ une > "acc1" >< / a > < une name = "ACC1"> </ une > < div > h1 > < h1 > # 1 Content </ h1 > p > < p > Blah blah blah .... </ p > </ div > "#acc2" > Accordion 2 < / a > < une href = "# ACC2"> Accordéon 2 </ une > "acc2" >< / a > < une name = "ACC2"> </ une > < div > h1 > < h1 > # 2 Contenu </ h1 > p > < p > Blah blah blah .... </ p > </ div > "#acc3" > Accordion 3 < / a > < une href = "# ACC3"> Accordéon 3 </ une > "acc3" >< / a > < une name = "ACC3"> </ une > < div > h1 > < h1 > # 3 Content </ h1 > p > < p > Blah blah blah .... </ p > </ div > </ div > |
Vous obtenez un menu simple accordéon qui peut être utilisé très rapidement.
Discret TabStrip Simple
USimpleTabStrip discret JavaScript est d'améliorer les liens d'ancrage classique (encore) dans une page HTML. Cette source est une amélioration de la fonction présentée dans TabStrip discret . Dans cette version, ainsi que d'aligner le Code de la version 1.6 de prototype.js a créé une véritable classe pour gérer les TabStrip. Le communiqué présenté ici est très simple et directe. Son travail principal réside dans l'ajout d'un événement de clic de l'ancre du lien normal. Les styles CSS sont également pas présenté, juste pour laisser le maximum de liberté d'action, mais vous pouvez obtenir une TabStrip efficaces avec quelques lignes supplémentaires de code CSS, voir Ajout de styles CSS ci-dessous.
HTML
La classe USimpleTabStrip travaille sur un code HTML simple, le sftuttando ancre ( <a name></a> ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <! - Simple liste de liens sur la page -> < ul > = "#tbs1" > Link 1 < / a >< / li > < sera > < une href = "# tbs1"> Lien 1 </ une > </ eux > = "#tbs2" > Link 2 < / a >< / li > < sera > < une href = "# TBS2"> Lien 2 </ une > </ eux > = "#tbs3" > Link 3 < / a >< / li > < sera > < une href = "# tbs3"> Lien 3 </ une > </ eux > </ ul > <! - Blocs / onglets -> "tbs1" >< / a > < une name = "tbs1"> </ une > < div > h1 > < h1 > Liste n ° 1 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "tbs2" >< / a > < une name = "TBS2"> </ une > < div > h1 > < h1 > Liste n ° 2 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "tbs3" >< / a > < une name = "tbs3"> </ une > < div > h1 > < h1 > Data # 3 </ h1 > p > < p > Blah blah blah .... </ p > </ div > |
funziona da contenitore. La balise div juste en dessous du point d'ancrage a travailler comme un conteneur.
Google AJAX API des bibliothèques: un tournant pour les développeurs
Google , dans la dernière période, a publié une multitude d'outils pour les développeurs, constamment à jour leurs versions. Détient maintenant un accord avec AJAX populaires, et non seulement de centraliser la distribution de la bibliothèque jQuery , Prototype , script.aculo.us , Mootools et dojo !
En pratique, il est possible d'accéder à ces bibliothèques en prenant avantage de l'infrastructure et le réseau Google, avec des avantages significatifs en termes de vitesse et de sécurité.
La vitesse, le chargement, est garanti par le même réseau que Google, en plus de fournir, en soi, une structure de serveurs distribués, permet (par défaut) pour charger compressé (gzip / rapetisser) bibliothèques. L'hébergement le plus proche de Google à la demande sera utilisée pour envoyer le code et, s'il n'est pas d'atteindre une base temporaire ou vers le bas, cependant, le réseau assurera la livraison du code Javascript de Google!
Shadowbox assetURL: définir le chemin d'image
Lorsque Shadowbox ouvre sa fenêtre pour afficher le contenu (images, iframes, Film, etc ...), affiche, en attendant, un gif animé qui vient dans le paquet. Si la page est d'utiliser Shadowbox est au même niveau du dossier d'images, tout fonctionne bien. Par défaut, en fait, regardez le gif animé ci-dessous Shadowbox images / loading.gif - ou des images / chargement-light.gif si vous avez choisi les styles de lumière (shadowbox-light.css). Sinon, il ya un risque et souvent même pas accorgesene, si nous sommes dans une arborescence différente, il génère un code 404 Nice - page not poutre, dans notre dossier ne se trouve pas!
Pour résoudre ce problème suffisante pour initialiser Shadowbox avec un paramètre approprié qui indique le chemin absolu de votre dossier d'images: undolog.com, par exemple, j'ai placé le gif animé de chargement directement dans le dossier des images présentes dans la racine (comme un milliard d'autres les sites 
. Pour rendre ce dossier accessible à Shadowbox, quel que soit le chemin, j'ai mis semplicemenete:
1 2 | / / Init shadowbox assetURL avec le paramètre assetURL : 'http://www.undolog.com/' } ) ; Shadowbox Init ({assetURL: «http://www.undolog.com/ '}).; |
Tous les clones Lightbox dans un tableau dynamique
Planetozh a créé un paysage magnifique de l'outil dynamique qui permet de lister l'ensemble des bibliothèques Javascript comme Lightbox.
L'utilisation d'un panneau (voir photo à gauche) avec une série de "ticks" (case à cocher), qui indiquent les différentes fonctions des bibliothèques, vous pouvez exécuter un filtre, l'obtention de la liste d'un ou plusieurs bibliothèques qui font le travail. Nous espérons que l'auteur maintient à jour cette page très, très utile en dégageant une des bibliothèques les nombreux et puissants de ce type.
Ajouter de nouvelles transitions de Scriptaculous
Pas tout le monde sait, peut-être, mais vous pouvez remplacer ou ajouter des effets de transitions scriptaculous.js très facilement et rapidement. Transitions Scriptaculous, les effets utilisés pour déterminer le type d'animation, tels que ceux qui ne sont pas mises en œuvre dans Flash (je recommande un oeil à ce fichier PDF de la grande Penner, Robert ), mais l'effet net est - en fait - de la même . En outre, le colis Scriptaculous, certaines transitions ne sont pas présents invence basée en Actionscript. Si nous voulions ajouter une nouvelle transition d'Scriptaculous suffit d'insérer ce code avant d'utiliser un quelconque effet:
1 2 3 | = function ( pos ) { Effet. Transitions. Exponentielle = function (pos) { - Math. pow ( 1 - pos , 2 ) ; return 1 - Math pow (1 - pos, 2).; } |
A partir de maintenant nous pouvons utiliser la nouvelle transition exponentielle dans tous les effets Scriptaculous. Pour une série de transitions utiles - près d'un portage sur Actionscript Scriptaculous - voir Ajouter un peu de piquant à Scriptaculous .
Scriptaculous Effect.Tween: comment ça marche
Parmi toutes les bibliothèques «Web 2.0» disponibles, scriptaculous est certainement le plus mal documenté! Sur le site officiel, souvent lente, la documentation est incomplète, mal fait et difficiles à utiliser. Avec les dernières versions, puis, quelques nouvelles fonctionnalités sont totalement absents, tout comme le nouvel effet de base de Tween (Effect.Tween). Ce dernier, à l'instar de Tween dans Flash, vous permet de manipuler des transitions personnalisées. SYNOPSIS Sa base est la suivante:
Lumière galerie: 2.0.0_rc1 Lightview
. Voici encore une autre bibliothèque nouvellement libérés discret JavaScript pour des galeries d'images et plus Lightview dans 2.0.0_rc1 communiqué , a également ajouté des fonctions pour «ouvrir» la fenêtre avec le contenu qui va au-delà de l'image simple: animations Flash, QuickTime , forme et IFRAME! Comparé à la version précédente (1.1.0 - qui ne gère que les 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 à travailler très bien connus sont le prototype 1.6.0.2 et 1.8.1 Scriptaculous . Gliattributi bibliothèque sont utilisés pour gérer la class et la rel .
Intéressant qu'un aspect de cette bibliothèque est le soin extrême avec laquelle le graphique apparaît.
Score: 9 - Accueil Lightview
Bibliothèque lumière: Slimbox par une Shadowbox, les galeries en Javascript
Certains pourraient dire - et à juste titre - assez! Bibliothèques JavaScript (discrètes - et non intrusive ou en partie) pour gérer les images et les galeries il ya tant d'années. Quoi qu'il en soit, voici la liste, avec avantages et inconvénients, la meilleure que j'ai essayé.
Slimbox 01:41
Extrêmement minime, 7K (version 1.41), nécessite mootools au travail. Comme indiqué sur la page d'accueil est un clone de véritables graphe Visionneuse , nous allons voir ci-dessous. Honnêtement, à part la compacité extrême de la bibliothèque ne possède pas des caractéristiques particulières. 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 - Slimbox Accueil, Accueil Reflection.js pour MooTools
Lightbox2
Un des plus connu et simple. Gère les images contenues dans ce communiqué sont (donc il ne fonctionne pas avec QuickTime, Flash ou autre). Pour fonctionner, nécessite Prototype et Scriptaculous . Utiliser l'attribut rel pour identifier les liens d'images à traiter:
1 |
Comme les autres bibliothèques que nous allons le voir, supporte le mode diaporama, entrez un identifiant entre crochets 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]"> l'image # 1 </ une > "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < une href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> l'image # 2 </ une > "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < une href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> image # 3 </ une > |
Score: 6 - Lightbox2 Haut
LIGHTWINDOW 2.0
Ceci est également assez courant! Après tout comment pouvez-vous dire lequel est utilisé? . Toutefois, il est extrêmement complet et polyvalent. Sur le site de stands de la demande de dons pour l'achat d'un Mac ... et en appuyant un peu envahissante ... Cependant, comme ci-dessus, mais pour son fonctionnement, nécessite la présence de Prototype et de Scriptaculous . Contrairement à son prédécesseur, cependant, cela vous permet d'afficher les types de fichiers moltisiimi: à partir des images, des films QuickTime, films Flash, externe pages HTML et PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). En revanche, utilise des attributs différents, d'autres facultatives ( author, caption et title ) d'autres obligatoires ( class et params - pour définir le comportement de la bibliothèque). Par exemple, pour afficher une galerie ou un diaporama 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 savoureux! Look" author = "Inconnu"> l'image # 1 </ une > "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 j'ai faim" l'image author = "Inconnu"> n ° 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 bon!" caption = "Prenez cette sushis!" author = "Inconnu"> image # 3 </ une > |
Score: 8 - Accueil LightWindow 2.0
ShadowBox 1.0B
Bien que la version 1.0 beta, c'est peut-être la bibliothèque la plus complète, tant du point de vue fonctionnel est supporté par les bibliothèques. Pour son fonctionnement, en fait, vous pouvez choisir parmi une variété de cadres, avec le fichier "adaptateur" spécialement fabriqués et fournis par l'auteur:
- Yahoo! User Interface Library (Yahoo, Dom, Événement, anim)
- Ext (autonome core.js-poste)
- 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 utilisés sont uniquement rel où, dans son espace interne sont tous les autres paramètres de configuration. Par exemple, pour créer une galerie, il suffit d'utiliser:
1 2 |
Si vous souhaitez définir des options ( voir site Internet pour la liste complète ) il suffit d'utiliser la syntaxe suivante:
1 |
Sur Internet, ils peuvent trouver d'autres, tels que JS Highslide . En fait, si vous voulez signaler une autre bibliothèque ... En tout cas, personnellement, je préfère Shadowbox pour plus de simplicité, d'évolutivité et de la Croix-cadre.
Score: 9 - Haut Shadowbox 1.0B
Derniers Commentaires
Giovambattista Fazioli : @ Simon: Je recommande le nettoyage d'entrer un code comme celui de ...
Simon : @ Giovambattista Fazioli: Je vous remercie pour votre patience, c'est tout clair ... maintenant je me sens maintenant, ...
Giovambattista Fazioli : @ Simon est assez simple. Maintenant, je ne sais pas si vous avez besoin frontend main, backend o. ..
Simon : Bonjour, désolé si vous volez cet espace ... J'aurais besoin d'aide si possible ... J'ai besoin de ...
kainone : Mais comment pouvez-vous créer le pouce et l'attacher à la poste à imamgine?