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

— Lisäosa WorldWideScripts.net

Tilaa syötteen pysymään ajan tasalla!

Uusi! Seuraa meitä kuin haluat!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress Versio

GALLERIA tukee kuvia, videota, ääntä inline Puhelin iPad yhteensopiva minuutin asennus Ken Burns vaikutus pikkukuvia navigointi ja enemmän!

Päivitykset

PÄIVITYS 2 0,1 [14/06/2011]

  • Lisätään autoheight esimerkiksi + API

PÄIVITYS 2 0,0 [09/06/2011]

  • korjatut virheet
  • rebranded Phoenix Galleria - sama galleria ominaisuudet + lisää
  • lisätty thumbnail navigointi

Esittely

jQuery Ken Burns Slideshowis täydellinen tapa esitellä kuvia / mainoksia tyyliin. Jokaisella kohteella on oma diaesitys aikaa ja voit muokata linkkiä, kohde ja monet muut yksittäiset asetukset vain muuttamalla HTML.

ominaisuudet

  • tukee.PNGs,.JPGs,.GIFs
  • API - soita tauko, pelata, gotoNext, gotoPrev teidän html (ulkopuolella gallerian)
  • autoheight - vaihtoehto Automaattinen koko gallerian korkeudesta riippuen sisällön
  • rajoittamaton kohdetta - kiertää niin monta kuvaa kuin haluat
  • diaesitys - itsenäinen aikaa jokaiseen, jonka voit määrittää HTML edellyttäen
  • arvoja voit asettaa kunkin kohteen - kuvaus (kuvaus ylhäältä), initialZoom (mikä tahansa arvo haluat), finalZoom, slideshowTime (aika banneri pyöritin pysyy keskityttiin tietyn kohteen), polttaa vaikutus (aika, sinua Toivotan vaikutus ottaa), url (jos ei url on asetettu kohde vain on, jossa ei ole linkki click), transitionType (easeInSine, lineaarinen jne), initialposition, lopullisen kantansa (valitse topleft, topcenter, topright, middleleft, middlecenter, middleright, bottomleft, bottomcenter, bottomright)
  • resizable haluamaasi kokoa - kaikki sisältö sijoittaa oikea

Mahdolliset vieritys kannat (alku- ja lopullinen)

UKK

Miten asettaa pienoiskuvien määrän, minulla on tämä muotokuva kuvia liukusäädintä.. navigointi näyttää vain 2 niistä, kun on tilaa 4?

Et voi määrittää useita pikkukuvia näy kohden "sivu", koska se lasketaan automaattisesti peukalo leveys / korkeus ja peukalon tilaa. Joten yritä laskea, että enemmän peukalot. Lisäksi on olemassa toinen parametri "nav_arrow_size: 40" - tämä on tila, joka on varattu jokaista nuolta (niin maksukyvyttömyyshetkellä 80 px ovat vähennettiin varten nuolet) ja voit myös pienentää tätä enemmän peukalot.

on mahdollista laittaa linkin kuvia (pääkuva offcourse ei pikkukuvia) Kyllä, varmasti, kirjoittaa

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

sijasta

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

Yritän lisätä linkkejä kuvauksessa, mutta se rikkoo käsikirjoituksen

Todennäköisesti olet tekemässä jotain tällaista

BAD:

 data-kuvaus = "Minun linkki on <a href="http://something"> täällä </a>" 

Ongelmana on, että "sisällä href taukoja" datasta-kuvausta. Ratkaisut on käyttää "eikä"

HYVÄ :
 data-kuvaus = 'Minun linkki on <a href="http://something"> täällä </a> " 
Moi. Miten voin lopettaa automaattisen liukumisen phoenixgallery

sinulla on parametrien

 targetgallery.phoenixgallery ({ transition_type: "random", nav_type: "thumbsa", nav_position: "ylös", thumb_width: 100, thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40, settings_shadow: "pois", settings_autoresize: "pois", settings_autoheight: "pois", settings_pauseonrollover: "pois", settings_usethumbarrows: "pois", 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 }) 
poistaa diaesitys vain lisätä uuden parametrin settings_slideshow ja aseta se pois näin
 targetgallery.phoenixgallery ({ transition_type: "random", nav_type: "thumbsa", nav_position: "ylös", thumb_width: 100, thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40, settings_shadow: "pois", settings_autoresize: "pois", settings_autoheight: "pois", settings_slideshow: "pois", settings_pauseonrollover: "pois", settings_usethumbarrows: "pois", 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 }) 
Jostain syystä kun lisään linkki kuvaan zoomaustehoste ei enää toimi.

Tämä johtuu siitä, määritteitä data-initialZoom, data-finalZoom, data-effectTime jne täytyy olla suora lapsi gallerian div. Esimerkiksi jos sinulla on

 

vaikutus toimii, mutta jos lisäät linkin näin
 <a href="#"> </a> 
vaikutus ei toimi. Sinun täytyy siirtää määritteet suoraan lapselle gallerian kuten niin:
 <a href="#" data-finalzoom="2"> </a> 

Laajuus

Luova valokuvia - http://www.flickr.com/photos/markjsebastian/

Lataa
Muut komponentit tässä luokassaKaikki osat tämän tekijän
KommentitUsein kysyttyjä kysymyksiä ja vastauksia

Ominaisuudet

Luotu:
02 elokuu 10

Viimeisin päivitys:
N /

Yhteensopiva Selaimet:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Tiedostoja mukana:
JavaScript JS, HTML, CSS

Ohjelmistoversio:
jQuery

Avainsanoja

eCommerce, eCommerce, Kaikki tuotteet, nuolet, custom navigointi, tehosteet, galleria, kuva, Ken Burns, numerot, pannu, kuvat tuki, pyö, rittä, jä, diaesitys, pikkukuvat, siirtymä, t, video-tuki, zoomaus