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

Abonneer u op onze feed om de hoogte te blijven!

Nieuw! Volg ons als u het wilt!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress Versie

GALERIE ondersteunt afbeeldingen, video, audio inline Phone iPad compatibel minuten installatie Ken Burns-effect thumbnails navigatie en nog veel meer!

Updates

UPDATE 2 0,1 [14/06/2011]

  • toegevoegd AutoHeight bijvoorbeeld + api gesprekken

UPDATE 2 0,0 [09/06/2011]

  • vaste bugs
  • omgedoopt naar Phoenix Gallery - dezelfde galerij functies + meer
  • toegevoegd thumbnail navigatie

Introductie

jQuery Ken Burns Slideshowis de perfecte manier om uw foto / advertenties presenteren in stijl. Elk item heeft een aparte diashow tijd en u kunt hun link doelgroep en vele andere individuele instellingen bewerken gewoon door aanpassing van de HTML.

Kenmerken

  • ondersteunt.PNGs,.jpgs, GIF-bestanden
  • API - noem pauze, spelen, gotoNext, gotoPrev van uw HTML (buiten de gallery)
  • AutoHeight - optie om autoSize de galerie, afhankelijk van de hoogte van de inhoud
  • ondersteunt een onbeperkt aantal items - draaien zoveel foto's als je wilt
  • slideshow-modus - met onafhankelijke tijd voor elk item dat u in de HTML opgegeven definiëren
  • waarden die u kunt instellen voor elk item - beschrijving (de beschrijving van de top), initialZoom (elke waarde die u wilt), finalZoom, slideshowTime (de tijd dat de banner rotator blijft gericht op de specifieke item), burn-effect (de tijd die u wil het effect te nemen), url (indien geen url is ingesteld zal het item alleen een beeld zonder link klik) zijn transitionType (easeInSine, lineaire etc.), initialPosition, eindstand (keuze uit linksboven, topcenter, topright, middleleft, middlecenter, middleright, bottomleft, bottomcenter, bottomright)
  • resizable om de gewenste grootte - alle inhoud juiste positie

Mogelijke panning posities (eerste en laatste)

FAQ

Hoe het aantal miniaturen te stellen, heb ik dit portret beelden in de slider.. de navigatie toont slechts 2 van hen, terwijl er ruimte voor 4?

U kunt niet het aantal van thumbnails weergegeven per 'pagina', omdat het automatisch is berekend op basis van de duim breedte / hoogte en duim ruimte. Dus probeer te verlagen die voor meer duimen. Ook is er een andere parameter "nav_arrow_size: 40" - dit is de ruimte die is toegewezen voor elke pijl (dus op standaard 80 px worden afgetrokken voor de pijlen) en u kunt dit ook verlagen voor meer duimen.

is het mogelijk om een link op de beelden (de belangrijkste imago natuurlijk niet de thumbnails) Ja, zeker, schrijven gezet

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

in plaats van

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

Ik probeer om links toe te voegen in de beschrijving, maar het breekt het script

Propably je zoiets als dit te doen

BAD:

 data-description = "Mijn link is <a href="http://something"> hier </a>" 

Het probleem is dat de "binnen href breekt de" uit de data-beschrijving. De oplossingen gebruiken in plaats van '"

GOED:
 data-description = 'Mijn link is <a href="http://something"> hier </a>' 
Hoi. Hoe kan ik stoppen met de automatische schuifdeuren van de phoenixgallery

je hebt in de parameters

 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: "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 }) 
om slideshow uit te schakelen voeg gewoon een nieuwe parameter settings_slideshow en zet deze af als dit
 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: "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 }) 
Om een of andere reden toen ik een link naar de afbeelding van de zoom-effect niet meer functioneert.

Dat komt omdat de attributen data-initialZoom, data-finalZoom, data-effectTime etc. moeten worden op de directe kind van de galerie div. Bijvoorbeeld als u

 

effect zal werken, maar als je link toe te voegen als dit
 <a href="#"> </a> 
effect zal niet werken. Je nodig hebt om de attributen te verplaatsen naar de directe kind van de galerie als volgt:
 <a href="#" data-finalzoom="2"> </a> 

Credits

Creatieve foto's - http://www.flickr.com/photos/markjsebastian/

Downloaden
Andere onderdelen in deze categorieAlle onderdelen van deze auteur
OpmerkingenVeelgestelde vragen en antwoorden

Eigenschappen

Gemaakt:
2 augustus 10

Laatste update:
N / A

Compatibele Browsers:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Bestanden Inbegrepen:
JS JavaScript, HTML, CSS

Software Version:
jQuery

Trefwoorden

eCommerce, eCommerce, Alle spullen, pijlen, aangepaste navigatie, effecten, galerij, afbeelding, Ken Burns, getallen, schaal, foto ondersteuning, rotator, slideshow, miniaturen, overgangen, video-ondersteuning, zoom