jQuery simple curseur vous permet de créer rapidement une fonctionnalité de diaporama à partir d'une simple liste UL/LI :
1 2 3 4 5 | < ul > "Title 1" >< img title = "Subtitle 1" src = "image1.jpg" / >< / li > < entre eux title = "Titre 1"> < img title = "titre 1" src = "image1.jpg" /> </ eux > "Title 2" >< img title = "Subtitle 2" src = "image2.jpg" / >< / li > < entre eux title = "Titre 2"> < img title = "Subtitle 2" src = "image2.jpg" /> </ eux > li > < sera > ... </ eux > </ ul > |
Tout lien, une image ou sottotiolo, peuvent être entrés sans problème:
1 2 3 4 5 | < ul > "Title 1" >< a href = "#" >< img border = "0" title = "Subtitle 1" src = "image1.jpg" / >< / a >< / li > < entre eux title = "Titre 1"> < une href = "#"> < img border = "0" title = "titre 1" src = "image1.jpg" /> </ une > </ eux > "Title 2" >< img title = "Subtitle 2 with a <a href='#'> link < / a > " src="image2.jpg" /> < / li > < entre eux title = "Titre 2"> < img title = "Subtitle 2 avec <a href='#'> lien </ une > "src =" image2.jpg "/> </ eux > li > < sera > ... </ eux > </ ul > |
Utilisation
Vous pouvez télécharger la dernière version directement à partir du référentiel sur Google Code :
1 2 3 | "text/javascript" src = "http://www.google.com/jsapi" >< / script > < script de type = "text / javascript" src = "http://www.google.com/jsapi"> </ scripts > "text/javascript" > google.load("jquery", "1.3") < / script > < script de type = "text / javascript"> google.load ("jquery", "1.3") </ scripts > |
Une fois que la page est chargée:
1 2 3 4 5 6 7 |
Les options
Vous pouvez passer d'un ensemble de paramètres à la méthode de SimpleSlider ():
1 2 3 4 5 6 7 8 | '0.7' ) , Légende alpha opacité (par défaut 0.7 '0 '), '#000' ) Légende bgColor la couleur de fond (par défaut '# 000') , 'normal' , 'fast' or number of milliseconds ) default 'slow' Contexte bgSpeed image de la vitesse fondu («lent», «normal», «rapide» ou le nombre de millisecondes) par défaut "lente" 'slow' , 'normal' , 'fast' or number of milliseconds ) default 'slow' Légende captionSpeed slideUp / slideDown vitesse ("lent", "normal", "rapide" ou le nombre de millisecondes) par défaut "lente" '50px' ) Hauteur hauteur Légende ('50px défaut ») CSS objet TitleStyle pour le titre CSS objet subtitleStyle des sous-titres 4000 ) Millisecondes temporisation entre intervalle de diaporama (par défaut 4000) |
Très intéressant, la seule chose que je perplime est l'accessibilité de ces outils. En d'autres termes, il mess autour avec Javascript est désactivé, et l'utilisation de position: absolute, il est difficile de gérer la mise en page lorsque l'utilisateur agrandit le texte sur la page (CTRL +). Comment résoudre ces problèmes? Merci
@ Camu: une grande question! La question, en fait, est assez large. Dit simplement, en essayant de répondre à votre question, nous pouvons diviser le problème en deux parties: Javascript est mise actif et liquide.
Des outils tels que celui proposé par moi nécessairement s'écarter de l'hypothèse que Javascript est activé et est correctement chargé dans la bibliothèque jQuery. Cependant, comme dans le cas présenté ici, ce type de script effectue un changement d'exécution dans un format HTML pré-existantes, et souvent assez lisible même sans appliquer le script. Cette technique, connue sous le nom discret JavaScript (JavaScript discret), a comme objectif principal est d'améliorer une page, qui est déjà opérationnel et lisible, effectuer des additions uniquement si JavaScript est activé. Cependant il n'ya pas de véritable ligne de démarcation entre un JavaScript «intrusif» et un «non intrusive». Par exemple, le plugin que j'ai présentés pourraient être considérés comme semi-intrusif.
Sur le plus distinctement dédié à l'accessibilité, comme la possibilité d'agrandir la police, les choses sont encore compliquées car il met en jeu l'image bitmap utilisée pour construire des pages qui habituellement ne souffrent pas des licenciements que des polices. Pour surmonter l'obstacle que vous devez créer un style graphique des feuilles spéciales bien emballés et utiliser une variété de techniques (dont certaines nécessitent Javascript actif) pour "fixer" une disposition de ce type à l'exécution.
Mais nous allons souligner que certains navigateurs ont récemment ajouté des capacités internes, l'accessibilité, de surmonter certains obstacles liés à l'actuelle norme CSS et HTML. Par exemple, vous pouvez «zoomer» pas seulement la police, mais la page entière, en faisant un véritable "zoom optique", permettant à l'ensemble layput d'être toujours visible dans la manière correcte (les bitmaps peuvent apparaître granuleuses un peu ") .
Je crois que ces questions devraient être une partie intégrante de la «base» d'un navigateur afin que les développeurs peuvent être retirés de ce type de problème.
Wow, c'est une rispostona
Merci d'être si détaillée ... j'ai procédé pour prendre des notes!
Bonjour, grand script, ... et surtout dégradables.
Je me demandais une chose, mais il est possible de décider combien chacun devvo diapositives sera la durée?
Je veux dire, peut-être quelques photos sont juste les titres, seulement 4 secondes, puis la suivante, mais si l'image a beaucoup de texte à lire doit être d'au moins 8 / 10 secondes ...
Il serait utile, par exemple, en indiquant la durée de l'image elle-même, comme un [sympa ... Perdu ... ]
Que pensez-vous?
@ Santino Bivacqua:
Je pense que je comprends ce que tu veux dire, même si elle a perdu certains de vos commentaires ... et il semble une bonne idée. Vous pouvez ajouter un attribut, par exemple dans un champ
relou de la coutume (voir heures) et, s'il est présent, de décider individuellement de un à une autre diapositive.Dès que je peux je mettrai à jour et je vais vous citer pour l'excellent conseil. Merci
Oups désolé, j'ai mis la balise
imget je n'ai pas remarqué ....Je vous remercie beaucoup, mais mon idée était d'insérer le montant dans l'attribut rel de l'image
par exemple:
o ancora
rel="4"rel="speed[4]"ou tout simplementrel="speed-4", ourel="4"serait plus "pratique, surtout lorsque vous utilisez un moteur de template et les diapositives montrent la base de données, il serait également créer JavaScript inconfortable, mais pas impossible
@ Santino Bivacqua: en fait, exactement ce que je pensais
[...] Inspiré par la suggestion que Santino Bivacqua j'ai branché simple curseur jQuery peut définir un délai pour chaque diapositive [...]
Vous pouvez placer des liens pour obtenir les diapositives avant et en arrière sans avoir à attendre le temps dehors?
@ G @ Briele Non, ce fonctionnalités de cette version n'a pas été prévue.