Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Slider] Pomoc przy pisaniu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
SpiJay
Witajcie !

Pilnie potrzebuję pomocy z "wprawieniem w ruch" następującego fragmentu mojej strony.



KOD (wyszczuplony):
  1. <div id="slide">
  2. <div class="slide-desc">
  3. <h1>Wino nazwa1</h1>
  4. <div id="kraj">Kraj: <span>Włochy</span></div>
  5. <div id="smak">Smak: <span>słodkie</span></div>
  6. <div id="kolor" style="padding-bottom: 15px;">Kolor: <span>Czerwone</span></div>
  7. <div id="opis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam.</div>
  8. <div class="price">
  9. <span>Cena: <span style="padding: 0 !important;">250zł</span></span>
  10. <a class="more" href="#">Szczegóły</a>
  11. </div>
  12. </div>
  13. <img src="images/slide.jpg" />
  14. </div>
  15.  
  16. <div style="clear: both; margin-bottom: 25px;"></div>
  17.  
  18. <div id="mini-slide">
  19. <div class="mini-wraper">
  20. <div class="mini-desc">
  21. <div class="mini-name">Nazwa wina</div>
  22. <div><span class="color cena" cena="240">Cena:</span><br/>210zł</div>
  23. <div><span class="color kraj" kraj="Szwecja">Kraj:</span><br/>Szwecja</div>
  24. <div><span class="color smak" smak="słodkie">Smak:</span><br/>słodkie</div>
  25. <div><span class="color kolor" kolor="czerwone">Kolor:</span><br/>Czerwone</div>
  26. </div>
  27. <img src="thumbs/1.jpg" slide="fullsize/1.jpg" class="quick" nazwa="Wino nazwa1" cena="250zł" kraj="Włochy" smak="słodkie" kolor="czerwone" opis="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam." />
  28. </div>
  29. <div class="mini-wraper">
  30. <div class="mini-desc">
  31. <div class="mini-name">Nazwa wina</div>
  32. <div><span class="color cena" cena="240">Cena:</span><br/>220zł</div>
  33. <div><span class="color kraj" kraj="Włochy">Kraj:</span><br/>Włochy</div>
  34. <div><span class="color smak" smak="słodkie">Smak:</span><br/>słodkie</div>
  35. <div><span class="color kolor" kolor="czerwone">Kolor:</span><br/>Czerwone</div>
  36. </div>
  37. <img src="thumbs/2.jpg" slide="fullsize/2.jpg" class="quick" nazwa="Wino nazwa2" cena="250zł" kraj="Włochy" smak="słodkie" kolor="czerwone" opis="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam." />
  38. </div>
  39. <div class="mini-wraper">
  40. <div class="mini-desc">
  41. <div class="mini-name">Nazwa wina</div>
  42. <div><span class="color cena" cena="240">Cena:</span><br/>230zł</div>
  43. <div><span class="color kraj" kraj="Chorwacja">Kraj:</span><br/>Chorwacja</div>
  44. <div><span class="color smak" smak="słodkie">Smak:</span><br/>słodkie</div>
  45. <div><span class="color kolor" kolor="czerwone">Kolor:</span><br/>Czerwone</div>
  46. </div>
  47. <img src="thumbs/3.jpg" slide="fullsize/3.jpg" class="quick" nazwa="Wino nazwa3" cena="250zł" kraj="Włochy" smak="słodkie" kolor="czerwone" opis="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam." />
  48. </div>
  49. <div class="mini-wraper">
  50. <div class="mini-desc">
  51. <div class="mini-name">Nazwa wina</div>
  52. <div><span class="color cena" cena="240">Cena:</span><br/>240zł</div>
  53. <div><span class="color kraj" kraj="Francja">Kraj:</span><br/>Francja</div>
  54. <div><span class="color smak" smak="słodkie">Smak:</span><br/>słodkie</div>
  55. <div><span class="color kolor" kolor="czerwone">Kolor:</span><br/>Czerwone</div>
  56. </div>
  57. <img src="thumbs/4.jpg" slide="fullsize/4.jpg" class="quick" nazwa="Wino nazwa4" cena="250zł" kraj="Włochy" smak="słodkie" kolor="czerwone" opis="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam." />
  58. </div>


Zasada miałaby być taka jak na obrazku, aczkolwiek ładowanie zdjęć do dużego slidera, miałoby się także odbywać po kliknięciu na miniaturkę.
Brak auto przewijania.

Proszę o pomoc,
pozdrawiam !
artuross
Ale ze co, ktos ma Ci to napisac za darmo czy co?

Poza tym nawet gdyby ktos chcial, to:
1. podajesz adres do malego zdjecia, ale na jakiej podstawie jest pobierany z tego adres do duzego zdjecia? gdyby to bylo adres-do-zdjecia-MALY.jpg i adres-do-zdjecia-DUZY.jpg byloby to proste, ale rownie dobrze w Twoim przypadku zdjecie male moze byc pod nazwa zagsdg52436d2124.jpg, a duze pod nazwa misieLubiaMiod.jpg,
2. a moze nazwy zdjec beda jakasnazwa-malego-zdjecia.jpg i jakasnazwa-duzego-zdjecia.jpg, ale wtedy napisz czy tak, bo skrypt musi znac zasade smile.gif
3. przesuniecie duzego zdjecia wprawia takze w ruch slider z malymi zdjeciami?
4. czemu w atrybucie rel znajduje sie opis zdjecia? chcesz zeby Google zeswirowalo?
SpiJay
Poprawilem gorny, przykladowy kod - moj blad.

Chciałbym uzyskać pomoc, dlatego piszę tutaj.
Uczę się zasady działania i zachowania elementow w jQuery i taki slider, to dla mnie nie lada wyzwanie.

Cytat
czemu w atrybucie rel znajduje sie opis zdjecia? chcesz zeby Google zeswirowalo?

i tutaj wlasnie pytanie, jaki wplyw na np seo ma budowanie takich elementow:
  1. <img src="male.jpg" slide="duze.jpg" nazwa="nazwa" rodzaj="test" kolor="czerwone" opis="bla bla" />


Dotychczas zrobilem cos takiego:
[JAVASCRIPT] pobierz, plaintext
  1. $('.mini-wraper').click(function () {
  2. var duzy = $(this).find('img').attr('slide');
  3. var duzy_aktywny = $('#slide img').attr('src');
  4.  
  5. if(duzy != duzy_aktywny) {
  6. $('.slide-desc').fadeOut(400,function () {
  7. $('#slide img').fadeOut(400,function () {
  8. $(this).attr("src", duzy).fadeIn(400,function () {
  9. $('.slide-desc').fadeIn(400);
  10. });
  11.  
  12. });
  13. });
  14. }
  15. });
[JAVASCRIPT] pobierz, plaintext


Adresy do obrazow beda wyswietlane z bazy.

Tam gdzie sa te 4 obrazki miniaturek, bedzie wynik w petli z bazy, dlatego ten slider nie ma byc wymagajacy i ma korzystac z danych dostepnych w atrybutach przypisanych do obrazkow. Pozdrawiam !

PS. Chyba, że masz lepsze rozwiazanie ?
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.