Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [inne] Prościutki slider
Woytek950
post 4.01.2012, 18:09:54
Post #1





Grupa: Zarejestrowani
Postów: 130
Pomógł: 2
Dołączył: 6.06.2008
Skąd: jesteś ?

Ostrzeżenie: (0%)
-----

Witam. Czy może mnie ktoś nakierować w jaki sposób mogę wykonać taki slider obrazkowy, wraz z ładnymi przejściami? bo chciał bym wstawić taki na swoje portfolio. Klikało by się na kropeczki i by się zmieniały slajdy.


Ten post edytował Woytek950 4.01.2012, 18:10:47
Go to the top of the page
+Quote Post
prowseed
post 4.01.2012, 18:33:07
Post #2





Grupa: Zarejestrowani
Postów: 433
Pomógł: 64
Dołączył: 29.01.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

google >> jquery slider exclamation.gif!!
nie szukales


--------------------
portfolio | blog
Go to the top of the page
+Quote Post
pedro84
post 4.01.2012, 18:55:45
Post #3





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

1. Zdjęcia wrzucasz do tablicy. W sensie ścieżki - możesz je pobrać, np. z listy.
2. Obsługujesz zdarzenie onclick(), dla danego elementu.
3. Jeśli używasz jQuery, efekty możesz w prosty sposób dodać za pomocą animate() bądź pluginów.


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
Woytek950
post 4.01.2012, 19:10:29
Post #4





Grupa: Zarejestrowani
Postów: 130
Pomógł: 2
Dołączył: 6.06.2008
Skąd: jesteś ?

Ostrzeżenie: (0%)
-----

No tak ale będzie nie porządany efekt wczytywania obrazka:(
Go to the top of the page
+Quote Post
pedro84
post 4.01.2012, 19:13:46
Post #5





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

Cytat(Woytek950 @ 4.01.2012, 19:10:29 ) *
No tak ale będzie nie porządany efekt wczytywania obrazka:(

Co masz na myśli? Po prostu tworzysz listę nieuporządkowaną z kilki obrazków. Za pomocą CSS / JS ukrywasz wszystkie inne poza pierwszym, potem w JS zmieniasz widoczność.


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
Woytek950
post 10.01.2012, 19:57:09
Post #6





Grupa: Zarejestrowani
Postów: 130
Pomógł: 2
Dołączył: 6.06.2008
Skąd: jesteś ?

Ostrzeżenie: (0%)
-----

Ok. Ale chciał bym dokładnie wiedzieć jak ten proces wygląda (w skrypcie).

Wszystko nadal do przykładu po wyżej.
Stworzyłem skrypcik który dodaje tyle samo kropek co ilość slajdów. Wystarczy że wstawi się li dowolną treść i gotowe.
Ogólnie to wymyśliłem żeby dać zdzarzenie onclick i w nim pętlę ustawiającą wszystkim li zindex 4 a pod pętlą pojedyńcza linijka ustawiająca li (this.)(czyli temu który został nacisnięty) zindex 5. Ogólnie wszystko ok tylko jak dodać do tego animację z "opacity"?

Wiem że będzie to kolidować i że nie nie wystarczy dodać animate(opacity... . Trzeba by zmienić całą strukturę i logikę kodu.

Cytat(prowseed @ 4.01.2012, 18:33:07 ) *
google >> jquery slider exclamation.gif!!
nie szukales

Gdybym szukał i znalazł bym, to bym tu nie pisał.
A uwież mi że szukałem dłużej niż by się chciało Tobie:P

Ten post edytował Woytek950 10.01.2012, 20:00:25
Go to the top of the page
+Quote Post
sazian
post 10.01.2012, 20:03:56
Post #7





Grupa: Zarejestrowani
Postów: 1 045
Pomógł: 141
Dołączył: 19.09.2006
Skąd: B-tów

Ostrzeżenie: (0%)
-----

http://jquery.malsup.com/cycle/
Go to the top of the page
+Quote Post
Woytek950
post 10.01.2012, 20:24:28
Post #8





Grupa: Zarejestrowani
Postów: 130
Pomógł: 2
Dołączył: 6.06.2008
Skąd: jesteś ?

Ostrzeżenie: (0%)
-----

Wolał bym się trochę pouczyć i dlatego u mnie jquery ogranicza się do animate itd. a ten plugin odwala robotę za mnie:P

Ten post edytował Woytek950 10.01.2012, 20:24:41
Go to the top of the page
+Quote Post
celbarowicz
post 10.01.2012, 21:37:18
Post #9





Grupa: Zarejestrowani
Postów: 253
Pomógł: 31
Dołączył: 30.03.2009
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

Prosty skrypt, resztę dopracuj.
[HTML] pobierz, plaintext 
  1. <html>
  2.    <head>
  3.       <title>Przykład 1-2</title>
  4.         <script type="text/javascript" src="jquery-1.4.2.js"></script>
  5.        <script type="text/javascript">
  6. 	   var n=1;var i;var k=4;var i1; var l=0;
  7.  
  8.         function zmien(){ 		      
  9. 		                         n=n+1;
  10. 		                             if(n>k){n=1;}            // k  ilość fotek , numeruj   bolko2.jpg  itd...
  11. 		                              i="bolko"+n+".jpg";
  12. 									  n1=eval(n+1);
  13.                                       i1="bolko"+n1+".jpg";
  14.  
  15. 									var z={'position':'absolute','width':'200','height':'150','top':l,'left':l};
  16.  
  17. 									  $('#f2').css(z);
  18. 									$("#f2").attr({ 
  19.                                                 src:i1,
  20.                                                 title: "",
  21.                                                 alt: ""
  22.                                                });		   								  
  23.                             }                                          
  24.        </script>
  25.     </head>
  26.  <body>
  27.  <div id="ed" >Klikaj w fotkę</div>
  28.  <div id="fotka2"  style="position:absolute;top:100px;left:100px;"><img id="f2" alt="" src="bolko1.jpg" style="width:200px;height:150px;"onClick="zmien()"></div>
  29.   </body>
  30.  </htm
  31.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.07.2025 - 04:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn