Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: animacja flash jako link
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
adrian1987
hej chciałbym zrobić coś takiego, że mam diva o ustawionym background-image w cssie. W tym divie osadzam półprzezroczystego flasha którego celem jest stworzenie animowanej powłoki nad zdjęciem w zależności czy się najedzie na zdjęcie czy się z niego zjedzie. Moim celem jest aby po kliknięciu na zdjęcie otworzyło się ono przy pomocy efektu fancybox.
Problem mój jest taki, że aby to się otworzyło jako fancybox to muszę mieć linka <a> o zadanej klasie... Więc powinienem wsadzić flasha pomiędzy znaczniki <a></a>, ale to nie zadziała... Czy macie jakiś pomysł jak to zrobić??
O co mi chodzi możecie zobaczyć tutaj
teraz efekt flasha jest proste rozjaśnianie, ale docelowo to byłyby bardziej finezyjne animacje nad zdjęciami z dźwiękiem itd dlatego chciałbym wykorzystać flasha, a jednocześnie niechciałbym wszystkich zdjęć ładować do wewnątrz flasha, żeby to było łatwoedytowalne poprzez CMS...
erix
Zostaje albo stworzenie buttona we flashu, albo nałożenie warstwy z linkiem na animację.
adrian1987
we flashu z tego co się orientuję to nie ma możliwości żeby stworzyć element który będzie działać jako link i nadać temu jeszcze parametr class. A jeśli chodzi o nałożenie jako wyższa warstwa to w jaki sposób? przy pomocy z-index w css mi się nie udało...
erix
Cytat
we flashu z tego co się orientuję to nie ma możliwości żeby stworzyć element który będzie działać jako link i nadać temu jeszcze parametr class

Yyyy, a po co...?

Cytat
przy pomocy z-index w css mi się nie udało...

A wmode zmieniłeś? snitch.gif
adrian1987
wmode ustawione jest jako transparent, inaczej nie byłoby widać tego zdjęcia pod spodem... a utworzyć link z parametrem class potrzebuję do tego aby Fancybox na jQuery mi zadziałało...
erix
No to mówię - nałóż warstwę nad filmikiem. Pamiętaj, że przy domyślnym position nie możesz ustawić własności z-index.

A jeśli chodzi o Fancybox - można wywołać bezpośrednio metodę JS z poziomu animacji; wywoływanie przez klasę jest tylko sposobem na zwiększenie wygody. [;
adrian1987
a mógłbyś coś więcej podpowiedzieć na temat tego wywołania fancy z poziomu animacji flash??
sowiq
We Flashu tworzysz button (może być też tekstowy) i nadajesz mu akcję:
Kod
on(release){
    getURL("javascript:tutaj_nazwa_twojej_funkcji_JS();", "_self");
}
adrian1987
hmm, czy ktoś mógłby dać mi jeszcze jakąś podpowiedź na temat odpalenia fancyboxa poprzez wywołanie funkcji w sposób
  1. on(release){
  2. getURL("javascript:tutaj_nazwa_twojej_funkcji_JS();", "_self");
  3. }

mianowicie, nie mogę znaleźć jak zadeklarować funkcję wywołującą fancyboxa w sposób inny niż poprzez link...
to będzie coś w rodzaju
  1. jQuery("#zdjecie").fancybox().start();

questionmark.gif
erix
Howto byś czasem przejrzał... :X

Dokumentacja tak gryzie, czy oczy wydłubuje, że jej nikt nie chce czytać...?
adrian1987
jedyna dokumentacja jaką znalazłem znajduje się tutaj
http://fancy.klade.lv/howto
i tam nie widzę, żeby było powiedziane jak to zrobić... :/
erix
Ajj, chyba muszę w końcu kupić okulary... sad.gif

Cytat
4. Fire plugin using jQuery selector
If you are not familiar with jQuery, please, read at least this tutorial for beginners
adrian1987
albo wybrać się na dodatkowe lekcje angielskiego :/

No ok, przeczytałem to, ale szczerze mówiąc nie widzę tam odpowiedzi na mój problem:/ bo jak uruchomić fancyboxa żeby działał po kliknięciu na link to wiem, ale rozwiązania swojego problemu nadal nie widzę... napisałem sobie coś takiego
  1. jQuery("#z1").click(function(event){
  2. jQuery("#z1_link").fancybox();
  3. });


jeżeli kliknę na diva o id="z1" to uruchamiam fancyboxa dla linka o id="z1_link" żeby mieć parametr href... no i zdjęcie mi się nie otwiera:/ tam coś jeszcze chyba powinno być, żeby włączyć pokazywanie zdjęcia... bo na moje póki co to znaczy tyle, że jeśli kliknę na link z1_link to wtedy pokaże się zdjęcie... a co zrobić, żeby wywołując funkcję już pokazać zdjęcie?
erix
Po pierwsze, jeśli wywołujesz z flashki, musisz zrobić osobną funkcję, która będzie wywoływana przez animację.
Po drugie:
Kod
jQuery("#z1_link").fancybox();

W tym selektorze dajesz uchwyt do rodzica obrazka.
adrian1987
póki co narazie próbuję dojść do tego jak uruchomić otwarcie zdjęcie bez kliknięcia na link z poziomu kodu strony, jak mi się to uda to wtedy będę pracować nad flashem...

czy ma ktoś może pomysł jak możnaby wywołać tą funkcję w ten sposób żeby zaraz po jej wywołaniu pokazało się te nieszczęsne zdjęcie bez żadnego klikania itd? bo mi już wszystkie pomysły się wyczerpały...
phpmax
Cytat(erix @ 8.06.2009, 08:48:53 ) *
Zostaje albo stworzenie buttona we flashu, albo nałożenie warstwy z linkiem na animację.



A można na szybko jakiś kod dopisać w AS do sekcji embed aby link działałquestionmark.gif

robię na szybkiego zwykłe polecenie a href i niestety nic ;/




  1. <a href="http://www.wp.pl/" target="_blank">
  2.  
  3. WIDTH=700 HEIGHT=200>
  4. <PARAM NAME=movie VALUE="http://www.atb-music.com.pl/test/apptogo.swf">
  5. <PARAM NAME=quality VALUE=high>
  6. <PARAM NAME=bgcolor VALUE=#FFFFFF>
  7. <EMBED src="http://www.atb-music.com.pl/test/apptogo.swf" quality=high bgcolor=#FFFFFF WIDTH=700 HEIGHT=200 TYPE="application/x-shockwave-flash"></EMBED>
  8.  
  9. </a>

erix
Cytat
A można na szybko jakiś kod dopisać w AS do sekcji embed aby link działał

Nie.

Zostaje Ci zrobić hrefa o rozmiarach animacji, który będzie ponad nią z opacity: 0.
phpmax
Cytat(erix @ 13.09.2011, 14:15:55 ) *
Nie.

Zostaje Ci zrobić hrefa o rozmiarach animacji, który będzie ponad nią z opacity: 0.



Niestety dalej nie mam pomysłu jak to zrobić, gdy ładuje tam zwykłe zdjęcia to nie działa (img) z przezroczystością zero.


Możesz na szybkiego zrobić ten trik z grafiką (w sekcji td width="750" jak się domyślam), albo i bez byle po kliką na tę animację przekierowywało na np: www.wp.pl?



Storna testowa: http://www.atb-music.com.pl/test/

Poniżej zwykły kod html z tabelą:

  1.  
  2. <table border=0 bordercolor=green cellpadding=0 cellspacing=0 background="http://www.my-mobile.com.pl/html/bslide.png" width=1000 height=200>
  3.  
  4. <tr>
  5.  
  6. <td width="125" valign="bottom">
  7.  
  8. </td>
  9.  
  10.  
  11. <td width="750" valign="middle">
  12.  
  13.  
  14. WIDTH=700 HEIGHT=200>
  15. <PARAM NAME=movie VALUE="http://www.atb-music.com.pl/test/doublebillboard.49kb.swf">
  16. <PARAM NAME=quality VALUE=high>
  17. <PARAM NAME=bgcolor VALUE=#FFFFFF>
  18. <EMBED src="http://www.atb-music.com.pl/test/doublebillboard.49kb.swf" quality=high bgcolor=#FFFFFF WIDTH=700 HEIGHT=200 TYPE="application/x-shockwave-flash"></EMBED>
  19.  
  20.  
  21.  
  22.  
  23. </td>
  24.  
  25.  
  26.  
  27. <td width="125" valign="bottom">
  28.  
  29.  
  30. <a href="#fblike"><img src="http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png" alt="My mobile - Teraz takze na Facebooku!" title="My mobile - Teraz takze na Facebooku!" border=0></a>
  31.  
  32. <a href="http://www.my-mobile.com.pl"><img src="http://www.my-mobile.com.pl/html/pl.png" alt="Polish original version" title="Polish original version" border=0></a>
  33.  
  34. <a href="http://translate.google.pl/translate?js=n&prev=_t&hl=pl&ie=UTF-8&layout=2&eotf=1&sl=pl&tl=en&u=www.my-mobile.com.pl"><img src="http://www.my-mobile.com.pl/html/us.png" alt="English/US version" title="English/US version" border=0></a>
  35.  
  36. <a href="http://translate.google.pl/translate?js=n&prev=_t&hl=pl&ie=UTF-8&layout=2&eotf=1&sl=pl&tl=de&u=www.my-mobile.com.pl"><img src="http://www.my-mobile.com.pl/html/ger.png" alt="Deutsch version" title="Deutsch version" border=0></a>
  37.  
  38. <a href="http://www.my-mobile.com.pl/index.php/english/"><img src="http://www.my-mobile.com.pl/html/rest.png" alt="Rest of world version" title="Rest of world version" border=0></a>
  39.  
  40.  
  41. </td>
  42.  
  43.  
  44.  
  45. </tr>
  46.  
  47.  
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.