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 auf WorldWideScripts.net

@de1wwsAbonniere den Feed um auf dem neuesten Stand zu bleiben!

Neu! Folge uns, wie Du es möchtest!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Wordpress-Version

GALLERY unterstützt Bilder, Video, Audio Inline-Phone iPad kompatibel Minuten-Installation Ken Burns Effekt Thumbnails Navigation und vieles mehr!

Aktuelles

UPDATE 2.1 [14.06.2011]

  • hinzugefügt Autoheight beispiels + API-Aufrufe

UPDATE 2 0,0 [09.06.2011]

  • Fixed bugs
  • umbenannt nach Phoenix Gallery - Galerie gleichen Funktionen + mehr
  • hinzugefügt Thumbnail-Navigation

Einbringen

jQuery Ken Burns Slideshowis der perfekte Weg, um Ihre Bilder / Anzeigen in der Art zu präsentieren. Jedes Einzelteil hat einen separaten Diashow Zeit und Sie können ihrer Link, Ziel und viele andere individuelle Einstellungen einfach durch Änderung der HTML zu bearbeiten.

Eigenschaften

  • unterstützt.PNGs,.jpgs,.gifs
  • API - Aufruf Pause zu spielen, gotoNext, gotoPrev von Ihrem html (außerhalb der Galerie)
  • Autoheight - Möglichkeit, die Galerie autosize in Abhängigkeit von der Höhe des Inhalts
  • unterstützt eine unbegrenzte Anzahl Artikel - drehen Sie so viele Bilder wie Sie wollen
  • Diashow-Modus - mit unabhängigen Zeit für jedes Element, das Sie in der HTML bereitgestellt definieren
  • Werte können Sie sich für jede Position eingestellt - Beschreibung (die Beschreibung von oben), initialZoom (beliebig gewählt), finalZoom, slideshowTime (die Zeit, die Banner Rotator bleibt auf dem bestimmten Punkt fokussiert), Burn-Effekt Zeit (die Zeit, die Sie wollen die Wirkung zu nehmen), url (falls keine URL festgelegt wird der Artikel nur ein Bild ohne Link auf Klick) zu sein, transitionType (easeInSine, linear usw.), Anfangsposition, Endposition (wählen Sie aus topleft, topcenter, topright, middleleft, Middlecenter, Middle, bottom, Bottom, bottom)
  • resizable, um Ihre bevorzugte Größe - werden alle Inhalte positionieren ordnungsgemäße

Mögliche Schwenkpositionen (erste und letzte)

FAQ

Wie stellt man die Anzahl der Miniaturbilder gesetzt, habe ich dieses Bild Portrait Bilder im Schieber.. der Navigation zeigt nur 2 von ihnen, während es gibt Platz für 4?

Sie können die Anzahl von Miniaturansichten angezeigt pro "Seite" nicht gesetzt, weil es automatisch von Daumen Breite / Höhe und Daumen Raum berechnet. So versuchen, dass zu senken für mehr Daumen. Auch gibt es einen weiteren Parameter "nav_arrow_size: 40" - das ist der Raum, der für jeden Pfeil zugeordnet ist (so bei Standard 80 Pixel sind für die Pfeile subtrahiert) und Sie können auch senken das seit mehr Daumen.

ist es möglich, einen Link auf die Bilder (das Hauptbild offcourse nicht die Vorschaubilder) Ja, sicher, schreiben Sie setzen

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

anstatt

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

Ich versuche, Links in der Beschreibung hinzufügen, aber das Skript bricht

Vermutlich sind Sie so etwas wie dies zu tun

BAD:

 Daten-description = "Ihr Link <a href="http://something"> hier </a>" 

Das Problem ist, dass die "Innenseite href bricht die" aus der Datenbeschreibung. Die Lösungen eine Benutzung "statt"

GUT :
 Daten-description = 'Meine Link <a href="http://something"> hier </a>' 
Hallo. Wie kann ich verhindern das automatische Verschieben des phoenixgallery

Sie in den Parametern haben

 targetgallery.phoenixgallery ({ transition_type: "random", nav_type: "thumbsa", nav_position: "up", thumb_width: 100, thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40, settings_shadow: "Aus", settings_autoresize: "Aus", settings_autoheight: "Aus", settings_pauseonrollover: "Aus", 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 }) 
, um die Diashow zu deaktivieren fügen Sie einfach einen neuen Parameter settings_slideshow und schalten Sie diese aus wie diese
 targetgallery.phoenixgallery ({ transition_type: "random", nav_type: "thumbsa", nav_position: "up", thumb_width: 100, thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40, settings_shadow: "Aus", settings_autoresize: "Aus", settings_autoheight: "Aus", settings_slideshow: "Aus", settings_pauseonrollover: "Aus", 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 }) 
Aus irgendeinem Grund, wenn ich einen Link zu dem Bild der Zoom-Effekt funktioniert nicht mehr.

Das ist, weil die Attribute Daten initialZoom, daten finalZoom, daten effectTime usw. müssen auf dem direkten Kind der Galerie div sein. Zum Beispiel, wenn Sie

 

Effekt wird funktionieren, aber wenn Sie etwa folgenden Link hinzufügen
 <a href="#"> </a> 
Effekt wird nicht funktionieren. Sie müssen die Attribute der direkten Kinder der Galerie wie so bewegen:
 <a href="#" data-finalzoom="2"> </a> 

Credits

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

Herunterladen
Weitere Komponenten in dieser KategorieAlle Komponenten dieses Autors
KommentareHäufige Fragen und Antworten

Eigenschaften

Erstellt:
2. August 10

Letzte Aktualisierung:
N / A

Unterstützte Browser:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Dateien enthalten:
JavaScript JS, HTML, CSS

Softwareversion:
jQuery

Stichworte

eCommerce, eCommerce, Alle Elemente, Pfeile, benutzerdefinierte Navigations, Effekte, Galerie, Bild, Ken Burns, Nummern, Pfanne, Bilder Unterstü, tzung, Rotator, slideshow, Thumbnails, Ü, bergä, nge, Video-Unterstü, tzung, Zoom