Jak zrobić takie coś animowane przed otwarciem obrazka?

Jak zrobić takie coś animowane przed otwarciem obrazka? - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Jak zrobić takie coś animowane przed otwarciem obrazka? (/thread-jak-zrobic-takie-co%C5%9B-animowane-przed-otwarciem-obrazka)

Jak zrobić takie coś animowane przed otwarciem obrazka? - puma - 10-09-2009

Jak zrobić takie coś animowane przed otwarciem obrazka?
Obrazek,który dużo waży będzie się powoli odsłaniał...
Jak zrobić tak żeby najpierw pojawiła się animacja,odliczanie % lub coś podobnego,a dopiero potem wskoczył cały obrazek ?

Podkreśle,że robie strone w prostym htmlu.
Trzebaby mi to trochę dokładniej wyjaśnić bo jak Ktoś napisze,że np. we flashu to tyle też wiem Tongue

dzięki z góry za pomoc

RE: Jak zrobić takie coś animowane przed otwarciem obrazka? - ery - 10-09-2009

Tak we Flashu, nazywa się to preloader. A w necie poszukaj informacji na temat - moviecliploader

Nawet podam ci adres tutka:
http://www.flashzone.pl/item/2613/Preloader-na-bazie-MovieClipLoader/

RE: Jak zrobić takie coś animowane przed otwarciem obrazka? - KCS - 10-09-2009

A właśnie że nie Tongue

Robisz to przez LightBox. Bardzo prosta instalacja, nie ma żadnego kombinowania z flashami ani nic z tych rzeczy. Użyłem tego np na tej stronie: http://www.sprzedaztarcicy.pl (w galerii oczywiście) Wystarczy kilka linijek kodu i wszystko działa.

Tutaj http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm masz dokładny opis jak takie cuś odpalić, tak jak pisałem wcześniej, jest to bardzo proste ale gdybyś miał jakieś problemy to pisz. Powiem ci co i jak Smile

RE: Jak zrobić takie coś animowane przed otwarciem obrazka? - puma - 11-09-2009

Poddaje się... próbowałem modyfikować tego Light Boxa ,próbowałem z flashem i kaplica...

Powiedzmy,że poniżej to moja strona.Ma sie na niej otwierać [samoistnie,bez klikania i bez zaczerniania reszty strony] jeden duży obrazek zapowiedziany przed całkowitym ściagnięciem przez przeglądarkę takim oto preloaderem - [Obrazek: 2ihqwrs.gif]

Mógłby Ktos wkleić co trzeba tu i tam ? Nie żebym szedł na łatwizne ale stoje ,a nie zrobiłem nawet kroku :/

Kod PHP:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<title>strona www</title>
</head>
<BODY BACKGROUND="images/tlo.jpg">

<IMG SRC="image/abs.jpg" WIDTH="1200" HEIGHT="900" BORDER="0">

</body>
</html> 

RE: Jak zrobić takie coś animowane przed otwarciem obrazka? - KCS - 11-09-2009

Wszystko pisze na stronie którą ci podałem i w readme po ściągnięciu skryptu ale ok Proszę:
1. Pobierasz to:
http://www.dynamicdrive.com/dynamicindex4/lightbox2/lightbox2.03a.zip
2. Foldery CSS, images, js kopiujesz tam gdzie masz swój plik ze stroną czyli np index.html

3. Do sekcji HEAD dodajesz:

Kod:
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

4. Jeżeli jest to jedno zdjęcie na stronie dodajesz do linku do obrazka:

Kod:
rel="lightbox"

Jeżeli więcej to do każdego linku dodajesz:

Kod:
rel="lightbox[roadtrip]"

Przykład dla pojedynczego obrazka:

Kod:
<a href="images/obrazek.jpg" rel="lightbox" title="my caption">Link do obrazka lub tekst</a>

Dla całej galerii:

Kod:
<a href="images/obrazek1.jpg" rel="lightbox[roadtrip]">Link do obrazka lub tekst</a>

<a href="images/obrazek2.jpg" rel="lightbox[roadtrip]">Link do obrazka lub tekst</a>

<a href="images/obrazek3.jpg" rel="lightbox[roadtrip]">Link do obrazka lub tekst</a>

5. Przykładowa strona:

Kod:
<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<title>strona www</title>

</head>

<BODY BACKGROUND="images/tlo.jpg">

<IMG SRC="image/abs.jpg" WIDTH="1200" HEIGHT="900" BORDER="0" rel="lightbox">

</body>

</html>

Jeżeli dalej czegoś nie wiesz lub nie rozumiesz topisz Smile

EDIT//
Niestety ale wprowadziłem cię w mały błąd. LightBox nie działa na coś takie jak ty chcesz czyli żeby zdjęcie samo się wyświetlało z efektem ładowania. LightBox działa dopiero po kliknięciu. Sad

Rano jak będę miał chwilkę to załatwię ci jakiś skrypt Smile

RE: Jak zrobić takie coś animowane przed otwarciem obrazka? - puma - 11-09-2009

to nie działa.... robie identycznie jak piszesz,robilem też wcześniej i obrazek wyświetla sie normalnie..
testowałem w IE FF Op

edit//
siedzialem nad tym do teraz i poddaje sie ,amen
w Tobie moja nadzieja Sad

RE: Jak zrobić takie coś animowane przed otwarciem obrazka? - KCS - 11-09-2009

A w ogóle coś ci się udało zrobić? W IE napewno nie działa. Chodzi o to że ten LightBox działa ale np w taki sposób że dasz jakąś miniaturkę zdjęcia a po kliknięciu wyswietla się duże i to duże właśnie tak fajnie będzie się ładowało czyli np:

Kod:
<a href="images/obrazek_duzy.jpg" rel="lightbox" title="Moja Fotka"><img src="images/obrazek_maly.jpg"></a>

I otrzymujesz taki efekt http://www.sprzedaztarcicy.pl/galeria.html (nie działa na IE)
Rozumiesz?

RE: Jak zrobić takie coś animowane przed otwarciem obrazka? - puma - 12-09-2009

ogólnie to nic mi z tego nie wyszło...obrazek i tak otwierał standartowo
mniejsza o LightBoxa...
w dalszym ciagu chce to [Obrazek: 2ihqwrs.gif]

tu znalazłem kilka w javie ale jak to edytować żeby obrazek był na środku to niewiem... http://www.70.pl/main.php?id=48#15