Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Galeria - klikniecie na obrazek wywoluje nastepny
Forum PHP.pl > Forum > Przedszkole
Wolfie
Witam

Mam taki kod :

  1. if($_POST['gallery'] == 'yes') {
  2. $rows = $data->galleryKategory($_POST['kategory'],$_POST['dir']);
  3. $imgs = explode(', ', $rows[0]['img_dir']);
  4. $count = count($imgs);
  5. $width = $count*660;
  6. echo '<div id="gallery" class="gallery">'.
  7. '<div class="img_container" id="img_container" style="width:'.$width.'px;">';
  8. for($i=0; $i<$count; $i++) {
  9. echo '<img src="'.$imgs[$i].'" alt="na">';
  10. }
  11. echo '</div>'.
  12. '<a href="java script:; class="prev"></a>'.
  13. '<a href="java script:; class="next"></a>'.
  14. '</div>';
  15. }


Z grupsza wytlumacze o co chodzi zeby nie trzeba bylo sie meczyc winksmiley.jpg

Wiec pobieram sobie ilosc obrazkow z bazy danych i na tej podstawie generowana jest ilosc znacznikow img o src ktore pochodzi z bazy danych, zawsze generuje sie kilka img.

No i teraz kod jQuery ktory po kliknieciu na obrazek powinien go przesuwac :

  1. //jQuery Doc
  2. //---------------------------
  3. //zmienne dla galerii
  4. $move_by = 660;
  5. $frame_left = 0;
  6. $frame_no = 1;
  7.  
  8. $(document).ready(function() {
  9.  
  10. //------------------------------------------
  11. // Obsluga galerii
  12. $max_clicks = $("#img_container").children.size;
  13.  
  14. $(".img_container img").live("click", function(){
  15. $new_frame_no = (($frame_no/1) + 1);
  16. $new_left = (($frame_left/1) + $move_by);
  17. $new_left_attr = $new_left + "px";
  18. if($new_frame_no < $max_clicks) {
  19. $("#img_container").animate({left: $new_left_attr}, 800);
  20. $frame_left = $new_frame_left;
  21. $frame_no = $new_frame_no;
  22. }
  23. });
  24. });


Jak widzimy w pierwszej linijce :
  1. $(".img_container img").click(function(){

Klikniecie na img powinno spowodowac wywolanie danego dzialania zawartego dalej w funkcji ale tak sie niestety nie dzieje.

Wszystkie obrazki laduja sie prawidlowo ale nie chca sie przesuwac......
nitek
po pierwsze: o co chodzi z tym?

Kod
'<a href="java script:; class="prev"></a>'

cudzysłów w href niedomknięty, do tego nie ma czegoś takiego jak "java script:"...

po drugie:
w JS nie tworzymy zmiennych $move_by=60; tylko jak już, to var move_by=60;

od tego zacznij...
erix
Cytat
cudzysłów w href niedomknięty, do tego nie ma czegoś takiego jak "java script:"...

Z tego co zauważyłem, to forum rozbija ten ciąg.

Cytat
w JS nie tworzymy zmiennych $move_by=60; tylko jak już, to var move_by=60;

A próbowałeś? snitch.gif

Cytat
Wszystkie obrazki laduja sie prawidlowo ale nie chca sie przesuwac......

Puść to gdzieś na żywo.
Wolfie
Cytat
po pierwsze: o co chodzi z tym?



To pierwotnie mialo sluzyc do tego aby po kliknieciu na jeden z nich przesunac zdjecie na kolejne, juz poprawilem

  1. <a href="java script:;" class="prev"></a>
  2. <a href="java script:;" class="next"></a>


i dalej mialo byc :

  1. $(".next").live("click", function(){
  2. $new_frame_no = (($frame_no/1) + 1);
  3. $new_left = (($frame_left/1) + $move_by);


Ale ze zniknely mi z pola widzenia te linki to postanowilem przesuwac obrazak po kliknieciu na zdjecie, zreszta tak ma byc docelowo...

Cytat
w JS nie tworzymy zmiennych $move_by=60; tylko jak już, to var move_by=60;


W tutorialu bylo bez var....zreszta to jest jQuery i tutaj deklaruje sie tak : $zmienna....

Poprawilem i jest teraz z 'var' ale i tak nic z tego nie wyniklo....
wookieb
A ja z innej beczki.
Co to?

[JAVASCRIPT] pobierz, plaintext
  1. ($frame_no/1)
[JAVASCRIPT] pobierz, plaintext

Bo w szkole mnie uczono, że w takim przypadku ZAWSZE będzie $frame_no ...
nospor
Cytat
W tutorialu bylo bez var....
nie chodzilo o VAR a o dolara $ smile.gif

No i jak juz proszono: daj to na zywo
Wolfie
Bez dolara firebug wywala mi blad.....

Stronke mozna zobaczyc tutaj

Po wejsciu na stronke trzeba zaczekac az zaladuje sie menu i tresc,
Po najechaniu myszka na powiedzmy datę (wrzucenia wiadomosci/tresci/aktualnosci - zwal jak chcial winksmiley.jpg) pojawia/zmienia sie obrazek, zeby odpalic galerie trzeba kliknac na datę, wtedy pojawia sie ramka i w tej ramce wlasnie ma byc galeria, po kliknieciu na zdjecie w ramce powinno przewijac sie do kolejnego zdjecia.......
wookieb
o jezu... $(document).ready wywalasz ze skryptu, który ładujesz ajaxem. A kod, który ładujesz ajaxem możesz wykonać jeżeli ustawisz type "script"
http://docs.jquery.com/Ajax/jQuery.ajax#options
Wolfie
Ostatnio mialem ten problem ze ladowalem ajaxem kod ktory generowal kolejny load() i wtedy uzywalem poprostu funkcji live().

A czy musze przerabiac cala funkcje na ajax() czy wystarczy ze podam DataType jako parametr load() ?

-------------------------------------------------------
Zrobilem taka kombinacje :

  1. $("div.data a").live("click",function(){
  2. $('#foto').ajax({
  3. url: "gallery.php",
  4. type: "POST",
  5. data: ({'dir':$(this).parent('div.data').attr('rel'),
  6. 'kategory':$(this).parent('div.data').attr('value'),
  7. 'gallery':'yes'}),
  8. dataType: "script",
  9. success: function(){
  10. $(this).hide().fadeIn('slow');
  11. }
  12. });


No ale wywala mi blad ze ajax to nie funkcja, no i teraz sie zamotalem bo nie wiem jak mam obsluzyc click w takim wypadku, no bo nie podepne do $('#foto') click bo przeciez chce klikac na $('#div.data a') ale chce tez ladowac skrypt do $('#foto').....no i sie pogubilem....

Firebug wywala mi taki blad :

Cytat
$("#foto").ajax is not a function
[Break on this error] success: function(){\r\n
erix
$.ajax wywołuje się anonimowo. W przeciwieństwie do load musisz SAMODZIELNIE obsłużyć wstrzykiwanie wczytanych danych.
Wolfie
A jakas mala podpowiedz jakiej funkcji najlepiej uzyc zeby wstrzyknac wczytane ajaxem dane ?

Cytat
o jezu... $(document).ready wywalasz ze skryptu, który ładujesz ajaxem.


A dlaczego nastepuje to 'wywalenie' $(document).ready ?
erix
Cytat
A jakas mala podpowiedz jakiej funkcji najlepiej uzyc zeby wstrzyknac wczytane ajaxem dane ?

Przecież dostałeś... :|

Wolfie
No nie no ja rozumiem ze trzeba uzyc $.ajax() ale nie mam pojecia jak pozniej to wstrzyknac do diva o id="foto"......

Zreszta nie rozumiem dlaczego wychodze z $(document).ready, wiec to tez nie ulatwia mi sprawy

zrobilem cos takiego :

  1. $("div.data a").live("click",function(){
  2. $.ajax({
  3. url: "gallery.php",
  4. type: "POST",
  5. data: ({'dir':$(this).parent('div.data').attr('rel'),
  6. 'kategory':$(this).parent('div.data').attr('value'),
  7. 'gallery':'yes'}),
  8. dataType: "script",
  9. success: function(){
  10. $(this).hide().fadeIn('slow');
  11. }
  12. });
  13. return false;
  14. });


Ale wyskakuja errory :

Cytat
XML tag name mismatch (expected img)

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://85.89.177.130/deigie/jquery/jquery.js :: anonymous :: line 808" data: no]


Zreszta nawet jakby nie wyskakiwaly to nie ma tutaj obslugi wstrzykniecia tego co mi zwroci ajax do diva, wiec i tak d... blada.....

Probowalem tez inicjowac funkcjie $(document).ready.. zaraz po zdarzeniu live("click", function() {... ale wtedy wogole nie przekazuje mi parametrow do skryptu, probowalem tez po zakonczeniu ajax() wywolac skrypt za pomoca load() ale to samo , czyli nie przekazuje parametrow, googluje juz od rana ale nie moge znalezc nic podobnego do mojego przypadku.......
erix
Też nie zrozumiałem, o co mu chodzi. biggrin.gif

Cytat
No nie no ja rozumiem ze trzeba uzyc $.ajax() ale nie mam pojecia jak pozniej to wstrzyknac do diva o id="foto"......

Dokumentacja: html().
Wolfie
No i jeszcze jedna kwestia, z tego co dzisiaj czytalem to wychodzenie z DOM zalatwia funkcja live() wiec dlaczego mialbym uzywac $.ajax() z parametrem "script" zamiast load()?

-----------------------------------------------------------

Ok zrobilem tak :

  1. $("div.data a").live("click",function(){
  2. $.ajax({
  3. url: "gallery.php",
  4. type: "POST",
  5. data: ({'dir':$(this).parent('div.data').attr('rel'),
  6. 'kategory':$(this).parent('div.data').attr('value'),
  7. 'gallery':'yes'}),
  8. dataType: "script",
  9. success: function(msg){
  10. $( "#foto" ).html(msg).hide().fadeIn('slow');
  11. }
  12. });
  13. return false;
  14. });


No i wyszlo na to ze poprostu zamienilem funkcjie load() na ajax(), bo dzieje sie to samo co wczesniej, czyli wszystko sie ladnie laduje, ale po kliknieciu na div o id="foto" nic sie nie dzieje a powinny przesuwac sie zdjecia.

Czyli dzieje sie to samo co w przypadku tego :

  1. $("div.data a").live("click",function(){
  2. $('#foto').load('gallery.php', {
  3. 'dir':$(this).parent('div.data').attr('rel'),
  4. 'kategory':$(this).parent('div.data').attr('value'),
  5. 'gallery':'yes'}, function() {
  6. $(this).hide().fadeIn('slow');
  7. });


Moze jeszcze raz przedstawie kod do obslugi przesuwania sie zdjec, moze tu jest cos nie tak :

  1. //jQuery Doc
  2. //---------------------------
  3. //zmienne dla galerii
  4. var $move_by = 660;
  5. var $frame_left = 0;
  6. var $frame_no = 1;
  7.  
  8. $(document).ready(function() {
  9.  
  10. //------------------------------------------
  11. // Obsluga galerii
  12. $max_clicks = $("#img_container").children.size;
  13.  
  14. $("#foto").live("click", function(){
  15. var $new_frame_no = (($frame_no/1) + 1);
  16. var $new_left = (($frame_left/1) + $move_by);
  17. var $new_left_attr = $new_left + "px";
  18. if($new_frame_no < $max_clicks) {
  19. $("#img_container").animate({left: $new_left_attr}, 800);
  20. $frame_left = $new_frame_left;
  21. $frame_no = $new_frame_no;
  22. }
  23. });
  24. $(".img_container img").live("click", function(){
  25. $new_frame_no = (($frame_no/1) - 1);
  26. $new_left = (($frame_left/1) - $move_by);
  27. $new_left_attr = $new_left + "px";
  28. if($new_frame_no > 0) {
  29. $("#img_container").animate({left: $new_left_attr}, 800);
  30. $frame_left = $new_frame_left;
  31. $frame_no = $new_frame_no;
  32. }
  33. });


Jeszcze raz zamieszczam tez link do stronki, tym razem zamiast load() ladowanie jest obslugiwane przez ajax()

stronka jest tutaj,

Jeszcze dodam ze w przypadku gdy uzywam ajax() to wyskakuje mi taki blad w firebug :

Cytat
XML tag name mismatch (expected img)
[Break on this error] a"></div><a href="java script:;" class="p..."java script:;" class="next"></a></div> \n


A ja nadal nie rozumiem o co chodzi z tym wychodzeniem z DOM, moze tutaj jest jakis blad ?
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.