Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JQUERY] galeria z miniaturami
Terrorizer
post
Post #1





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 31.03.2012

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

Kupiłem pewną książkę o jquery, która okazała się dla mnie kompletnym niewypałem.
Zamiast opisów i czegokolwiek treściwego są gotowce ledwie opisywane manualowym językiem.
Postanowiłem użyć skryptu do galerii z miniaturkami, jednak mam wrażenie ,że ten skrypt w ogóle nie chodzi.
Tzn. załączenie skryptu kompletnie nic nie wnosi. Mam na ekranie jedynie jakieś jedno obcięte zdjęcie i tyle
Mógłby ktoś na to zerknąć? Kod właściwie przepisany z książki od dechy do dechy.
Dodam ,że nie mam pojęcia o js i jquery, chciałem jedynie zaczerpnąć czegokolwiek z książki która była reklamowana jako przewodnik "dla każdego" .......

[HTML] pobierz, plaintext 
  1. ...
  2. <head>
  3. <link rel="stylesheet" href="css/gallery.css">
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  5. <script src="jquery_easing.1.3.js"></script>
  6. <script src="jquery_functions.js"></script>
  7. </head>
  8.  
  9. <div id="gallerybox">
  10. <div id="gallery">
  11.  
  12. <div id="photos">
  13. <div id="bigphotos">
  14. <div><img src="gfx/back1.jpg" alt="img1"></div>
  15. <div><img src="gfx/back1.jpg" alt="img2"></div>
  16. <div><img src="gfx/back1.jpg" alt="img3"></div>
  17. <div><img src="gfx/back1.jpg" alt="img4"></div>
  18. </div>
  19.  
  20. <div id="smallphotos">
  21. <div><a href="#"><img src="gfx/back2.jpg" alt="img1"></a></div>
  22. <div><a href="#"><img src="gfx/back2.jpg" alt="img2"></a></div>
  23. <div><a href="#"><img src="gfx/back2.jpg" alt="img3"></a></div>
  24. <div><a href="#"><img src="gfx/back2.jpg" alt="img4"></a></div>
  25. </div>
  26. </div>
  27.  
  28. </div>
  29. </div>
[HTML] pobierz, plaintext

functions:
[PHP] pobierz, plaintext 
  1. $(document)ready.(function(){
  2.  
  3. var liczba_fotografii = $("#bigphotos div");
  4.  
  5. var pokaz_fotografie = $("#smallphotos a");
  6.  
  7. var aktualna_pozycja_fotografii;
  8.  
  9. var przesun_fotografie = $("#photos");
  10.  
  11. var szerokosc_fotografii = 600; 
  12.  
  13. pokaz_fotografie.on('click'.zmienna_fotografii);
  14.  
  15. function zmienna_fotografii() {
  16. aktualna_pozycja_fotografii = liczba_fotografii.eq( pokaz_fotografie.index( this) ).position();
  17. przesun_fotografie.animate({'scrollLeft' : aktualna_pozycja_fotografii.left}.2500.'easeOutElastic');}
  18.  
  19. $("#bigphotos").css('width'.liczba_fotografii.length * szerokosc_fotografii);
  20. });
[PHP] pobierz, plaintext

gallery.css:
[PHP] pobierz, plaintext 
  1. img{
  2. margin:0px;
  3. padding:0px;
  4. border:0px;
  5. }
  6. div#gallerybox{
  7. width:800px;
  8. margin-top:50px;
  9. margin-bottom:0px;
  10. margin-right:auto;
  11. margin-left:auto;
  12. padding:0px;
  13. }
  14. div#gallery{
  15. width:600px;
  16. height:400px;
  17. margin-top:0px;
  18. margin-bottom:0px;
  19. margin-left:auto;
  20. margin-right:auto;
  21. padding-bottom:10px;
  22. }
  23. div#photos{
  24. width:600px;
  25. height:400px;
  26. position:relative;
  27. overflow:hidden;
  28. }
  29.  
  30.  
  31. div#bigphotos{
  32. position:relative;
  33. }
  34. div#bigphotos div{
  35. width:600px;
  36. height:400px;
  37. float:left;
  38. position:relative;
  39. }
  40. div#smallphotos a:hover{
  41. border-bottom:3px solid #ff0000;
  42. }
  43. div#smallphotos{
  44. text-align:center;
  45. }
[PHP] pobierz, plaintext


Ten post edytował Terrorizer 23.09.2014, 04:54:57
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 807
Pomógł: 1828
Dołączył: 11.03.2014

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

$(document)ready.(function(){



pokaz_fotografie.on('click'.zmienna_fotografii);


przesun_fotografie.animate({'scrollLeft' : aktualna_pozycja_fotografii.left}.2500.'easeOutElastic');}

$("#bigphotos").css('width'.liczba_fotografii.length * szerokosc_fotografii);
Go to the top of the page
+Quote Post

Posty w temacie
- Terrorizer   [JQUERY] galeria z miniaturami   23.09.2014, 04:32:16
- - in5ane   Nie zagłębiałem się na razie w ogóle w kod, ale cz...   23.09.2014, 07:21:13
- - Terrorizer   Mam plik easing w którym mam wklejony kod z tego l...   23.09.2014, 12:37:05
- - trueblue   $(document)ready.(function(){ pokaz_fotogr...   23.09.2014, 13:18:42
- - Terrorizer   Dziękuje za uwagi, przepisywałem kod o 5 rano i ni...   23.09.2014, 13:31:11

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 14.10.2025 - 00:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn