WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

Ken Burns Media Gallery / Slideshow

— Add-On pour WorldWideScripts.net

@fr1wwsAbonnez-vous à notre RSS pour rester à jour!

Nouveau! Suivez-nous que vous le souhaitez!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress Version

GALERIE supporte les images, vidéo, audio en ligne Téléphone iPad installation minutes compatible Ken Burns vignettes effet navigation et plus encore!

Mises à jour

UPDATE 2.1 [14/06/2011]

  • ajoutée exemple AutoHeight + appels API

UPDATE 2.0 [09/06/2011]

  • Correction de bugs
  • repositionnés à Phoenix Galerie - même galerie fonctionnalités + plus
  • Navigation vignette ajoutée

Introduction

jQuery Ken Burns Slideshowis le moyen parfait pour mettre en valeur vos photos / annonces dans le style. Chaque élément a un temps de diaporama séparée et vous pouvez éditer leur lien, cible et de nombreux autres paramètres individuels simplement en modifiant le code HTML.

Caractéristiques

  • soutient.PNGs,.jpg,.gif
  • API - appeler pause, jouer, gotoNext, gotoPrev de votre html (en dehors de la galerie)
  • AutoHeight - option pour autoSize la galerie en fonction de la hauteur du contenu
  • soutient articles illimités - tournent autant de photos que vous souhaitez
  • mode diaporama - avec le temps indépendante pour chaque élément que vous pouvez définir dans le code HTML fourni
  • valeurs que vous pouvez configurer pour chaque élément - description (la description du haut), initialZoom (toute valeur vous le souhaitez), finalZoom, slideshowTime (le temps du rotateur bannière reste concentré sur l'objet spécifique), brûler le temps de l'effet (le temps que vous souhaite l'effet de prendre), URL (si aucun URL est réglé la question sera juste une image sans lien avec le clic), transitionType (easeInSine, linéaire, etc.), initialPosition, position finale (choisir topleft, topcenter, topright, middleleft, middlecenter, MiddleRight, bottomleft, bottomcenter, bottomright)
  • redimensionnable à votre taille préférée - tous les contenus seront bonne position

Positions de panoramique possibles (initiale et finale)

FAQ

Comment définir le nombre de vignettes, je dois ce portrait images dans le curseur.. la navigation affiche seulement 2 d'entre eux, alors qu'il ya un espace pour 4?

Vous ne pouvez pas définir le nombre de vignettes affichées par page », car il est calculé automatiquement à partir de la largeur du pouce / hauteur et de l'espace de pouce. Donc, essayez d'abaisser ce pour plus de pouces. Il ya aussi un autre paramètre "nav_arrow_size: 40" - ce qui est l'espace qui est alloué pour chaque flèche (de sorte à défaut 80 px est retranché pour les flèches) et vous pouvez également abaisser ce pour plus de pouces.

est-il possible de mettre un lien sur les images (l'image principale offcourse pas les vignettes) Oui, bien sûr, écrivez

 <a href="#"> <img src = "img / def1.jpg" /> </a> 

au lieu de

 <img src = "img / def1.jpg" /> 

Je tente d'ajouter des liens dans la description mais il rompt le scénario

Propably vous faites quelque chose comme ça

MAL :

 données-description = "Mon lien est <a href="http://something"> ici </a>" 

Le problème est que le "href intérieur rompt la" de l'élément de données de description. Les solutions est d'utiliser "au lieu de"

BIEN :
 données-description = 'Mon lien est <a href="http://something"> ici </a>' 
Salut. Comment puis-je arrêter l'auto-glissement de la phoenixgallery

vous avez dans les paramètres

 targetgallery.phoenixgallery ({ transition_type: «aléatoire», nav_type: "thumbsa», nav_position: "up", thumb_width: 100, thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40, settings_shadow: «off», settings_autoresize: «off», settings_autoheight: «off», settings_pauseonrollover: «off», settings_usethumbarrows: «off», transition_strips_x: 10, transition_strips_y: 5, arrows_normal_alpha: 1, arrows_roll_alpha: 0,3, thumbs_normal_alpha: 1, thumbs_roll_alpha: 0,3 }) 
désactiver diaporama suffit d'ajouter un nouveau paramètre settings_slideshow et le mettre à off Vous aimez cette
 targetgallery.phoenixgallery ({ transition_type: «aléatoire», nav_type: "thumbsa», nav_position: "up", thumb_width: 100, thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40, settings_shadow: «off», settings_autoresize: «off», settings_autoheight: «off», settings_slideshow: «off», settings_pauseonrollover: «off», settings_usethumbarrows: «off», transition_strips_x: 10, transition_strips_y: 5, arrows_normal_alpha: 1, arrows_roll_alpha: 0,3, thumbs_normal_alpha: 1, thumbs_roll_alpha: 0,3 }) 
Pour quelque raison quand je ajouter un lien vers l'image l'effet de zoom ne fonctionne plus.

En effet, les attributs de données initialZoom, données finalZoom, données effectTime etc. doivent être sur l'enfant direct de la galerie div. Par exemple, si vous avez

 

effet fonctionnera, mais si vous ajoutez lien comme
 <a href="#"> </a> 
effet ne fonctionnera pas. Vous devez déplacer les attributs de l'enfant direct de la galerie comme ceci:
 <a href="#" data-finalzoom="2"> </a> 

Crédits

Photos Creative - http://www.flickr.com/photos/markjsebastian/

Télécharger
D'autres éléments de ce typeTous les composants de cet auteur
CommentairesFoire aux questions et réponses

Propriétés

Créé:
2 Août 10

Dernière mise à jour:
N / A

Navigateurs compatibles:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Fichiers inclus:
JS JavaScript, HTML, CSS

Une version de logiciel:
jQuery

Mots-clés

eCommerce, eCommerce, Tous les articles, flè, ches, Navigation personnalisé, e, effets, galerie, image, Ken Burns, numé, ros, casserole, soutien photos, rotateur, diaporama, vignettes, transitions, support de la vidé, o, zoom