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

Subskrybuj nasz kanał aby być na bieżąco!

Nowy! Dołącz do nas, jak chcesz!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress w wersji

GALERIA obsługuje obrazy, wideo, audio, wbudowany Telefon iPad instalację kompatybilny minut Kena Burnsa efekt miniatury nawigację i wiele więcej!

Aktualizacje

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

  • Przykład + dodaje autoheight wywołania API

UPDATE 2 0,0 [06.09.2011]

  • Naprawiono błędy
  • przemianowane do Phoenix Gallery - galeria same funkcje + więcej
  • dodany miniatur nawigacji

Wprowadzenie

jQuery Ken Burns Slideshowis doskonały sposób, aby pokazać swoje zdjęcia / reklamy w stylu. Każdy element ma oddzielny czas pokazu slajdów i można edytować ich związek, cel i wielu innych indywidualnych ustawień tylko poprzez modyfikację kodu HTML.

Cechy

  • obsługuje.PNGs,.jpgs,.gifs
  • API - zadzwoń pauza, grać, gotonext, gotoPrev z html (poza galerii)
  • autoheight - opcja automatyczną zmianę rozmiaru galerię zależności od wysokości treści
  • Obsługuje nieograniczoną przedmiotów - obrócić tyle zdjęć, ile chcesz
  • Tryb pokazu slajdów - z niezależnym czasie dla każdego elementu, który można zdefiniować w kodzie HTML, pod warunkiem
  • Wartości, które można ustawić dla każdego elementu - opis (opis od góry), initialZoom (dowolna wartość chcesz), finalZoom, slideshowTime (czas banner rotator pozostaje koncentruje się na określonej pozycji), nagrać efekt czas (godzinę, chcą efekt podjęcia), url (jeśli nie url jest pozycja będzie tylko obraz bez linku na kliknięcia), transitionType (easeInSine, liniowe itd.), initialPosition, pozycja końcowa (wyboru topLeft, topcenter, TopRight, middleleft, middlecenter, middleright, bottomleft, bottomcenter, bottomright)
  • skalowalny do preferowanego rozmiaru - cała zawartość będzie ustawić właściwe

Możliwe pozycje panningu (początkowe i końcowe)

FAQ

Jak ustawić liczbę miniatur, mam ten portret obrazy w suwaka.. nawigacja pokazuje tylko 2 z nich, podczas gdy nie ma miejsca dla 4?

Nie można ustawić liczbę miniatur wyświetlanych na "stronie", ponieważ jest obliczany automatycznie z wysokości / szerokości kciuka i przestrzeni kciuka. Więc starają się obniżyć, coraz kciuki. Istnieje również inny parametr "nav_arrow_size: 40" - jest to przestrzeń, która jest przeznaczona dla każdego strzałką (tak na domyślne 80 px są odjąć za pomocą strzałek), można także obniżyć to więcej kciuki.

czy jest możliwe, aby umieścić link na obrazach (główny obraz offcourse nie miniaturki) Tak, na pewno, pisać

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

zamiast

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

Staram się dodawać linki w opisie, ale łamie skrypt

Propably robisz coś takiego

BAD:

 Dane-description = "Mój związek jest <a href="http://something"> tutaj </a>" 

Problemem jest to, że "wewnątrz href zrywa" z danych-opisem. Rozwiązania jest używać "zamiast"

DOBRY :
 Dane-description = "Mój związek jest <a href="http://something"> tutaj </a>" 
Cześć. Jak mogę zatrzymać automatyczne przesuwanie phoenixgallery

masz w parametrach

 targetgallery.phoenixgallery ({ transition_type: "przypadkowe", 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 }) 
aby wyłączyć pokaz slajdów, wystarczy dodać nowy parametr settings_slideshow i ustawić go do off tak
 targetgallery.phoenixgallery ({ transition_type: "przypadkowe", 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 }) 
Z jakiegoś powodu, kiedy dodać link do zdjęcia efekt powiększenia nie funkcje.

To dlatego, że atrybuty danych initialZoom dane-finalZoom dane-effectTime itp muszą być w bezpośrednim dzieckiem galerii div. Na przykład, jeśli masz

 

Efekt będzie działać, ale jeśli dodać link, jak to
 <a href="#"> </a> 
Efekt nie będzie działać. Trzeba przenieść atrybuty do bezpośredniego dziecka galerii tak:
 <a href="#" data-finalzoom="2"> </a> 

Kredyty

Pień zdjęcia - http://www.flickr.com/photos/markjsebastian/

Pobierz
Inne akcesoria w tej kategoriiWszystkie składniki tego autora
KomentarzeNajczęściej zadawane pytania i odpowiedzi

Właściwości

Utworzono:
02 sierpnia 10

Ostatnia aktualizacja:
N / A

Zgodne przeglądarki:
IE7, IE8, IE9, Firefox, Safari, Opera, Google Chrome

Pliki wliczony:
JavaScript JS, HTML, CSS

Wersja oprogramowania:
jQuery

Słowa kluczowe

eCommerce, eCommerce, Wszystkie przedmioty, Strzałki, zwyczaj nawigacji, Efekty, galeria, obraz, ken spala, numery, rondel, Wsparcie zdjęcia, rewolwer, pokaz slajdó, w, Miniatury, Przejścia, Wsparcie wideo, zoom