[jQuery] Galeria - klikniecie na obrazek wywoluje nastepny Opcje

[Wolfie]

Witam

Mam taki kod :

[PHP] pobierz, plaintext 
if($_POST['gallery'] == 'yes') {
        $rows = $data->galleryKategory($_POST['kategory'],$_POST['dir']);
        $imgs = explode(', ', $rows[0]['img_dir']);
        $count = count($imgs);
        $width = $count*660;
        echo '<div id="gallery" class="gallery">'.
                '<div class="img_container" id="img_container" style="width:'.$width.'px;">';
        for($i=0; $i<$count; $i++) {
            echo '<img src="'.$imgs[$i].'" alt="na">';
        }
        echo '</div>'.
                '<a href="java script:; class="prev"></a>'.
                '<a href="java script:; class="next"></a>'.
            '</div>';
    }
[PHP] pobierz, plaintext 

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

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 :

[HTML] pobierz, plaintext 
//jQuery Doc
//---------------------------
//zmienne dla galerii
$move_by = 660;
$frame_left = 0;
$frame_no = 1;
 
$(document).ready(function() {
 
    //------------------------------------------
    // Obsluga galerii
    $max_clicks = $("#img_container").children.size;
 
    $(".img_container img").live("click", function(){
        $new_frame_no = (($frame_no/1) + 1);
        $new_left = (($frame_left/1) + $move_by);
        $new_left_attr = $new_left + "px";
        if($new_frame_no < $max_clicks) {
            $("#img_container").animate({left: $new_left_attr}, 800);
            $frame_left = $new_frame_left;
            $frame_no = $new_frame_no;
        }
    });
});
[HTML] pobierz, plaintext 

Jak widzimy w pierwszej linijce :

[HTML] pobierz, plaintext 
$(".img_container img").click(function(){
[HTML] pobierz, plaintext 

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......

Ten post edytował Wolfie 18.09.2009, 12:03:36

[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]

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.

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

A próbowałeś?

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

Puść to gdzieś na żywo.

[Wolfie]

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

[HTML] pobierz, plaintext 
<a href="java script:;" class="prev"></a>
<a href="java script:;" class="next"></a>
[HTML] pobierz, plaintext 

i dalej mialo byc :

[HTML] pobierz, plaintext 
$(".next").live("click", function(){
        $new_frame_no = (($frame_no/1) + 1);
        $new_left = (($frame_left/1) + $move_by);
[HTML] pobierz, plaintext 

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

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....

Ten post edytował Wolfie 18.09.2009, 12:33:57

[wookieb]

A ja z innej beczki.
Co to?

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

Bo w szkole mnie uczono, że w takim przypadku ZAWSZE będzie $frame_no ...

Ten post edytował wookieb 18.09.2009, 12:33:51

[nospor]

W tutorialu bylo bez var....

nie chodzilo o VAR a o dolara $

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 ) 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.......

Ten post edytował Wolfie 18.09.2009, 15:27:52

[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 :

[HTML] pobierz, plaintext 
$("div.data a").live("click",function(){
        $('#foto').ajax({
              url: "gallery.php",
              type: "POST",
              data: ({'dir':$(this).parent('div.data').attr('rel'),
                            'kategory':$(this).parent('div.data').attr('value'),
                            'gallery':'yes'}),
              dataType: "script",
              success: function(){
                 $(this).hide().fadeIn('slow');
                }
        });
[HTML] pobierz, plaintext 

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 :

$("#foto").ajax is not a function
[Break on this error] success: function(){\r\n

Ten post edytował Wolfie 18.09.2009, 16:34:57

[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 ?

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

A dlaczego nastepuje to 'wywalenie' $(document).ready ?

Ten post edytował Wolfie 19.09.2009, 11:10:14

[erix]

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 :

[HTML] pobierz, plaintext 
$("div.data a").live("click",function(){
		$.ajax({
			  url: "gallery.php",
			  type: "POST",
			  data: ({'dir':$(this).parent('div.data').attr('rel'),
							'kategory':$(this).parent('div.data').attr('value'),
							'gallery':'yes'}),
			  dataType: "script",
			  success: function(){
				 $(this).hide().fadeIn('slow');
				}
		});
      return false;
	});
[HTML] pobierz, plaintext 

Ale wyskakuja errory :

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.......

Ten post edytował Wolfie 19.09.2009, 12:16:02

[erix]

Też nie zrozumiałem, o co mu chodzi.

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 :

[HTML] pobierz, plaintext 
$("div.data a").live("click",function(){
		$.ajax({
			  url: "gallery.php",
			  type: "POST",
			  data: ({'dir':$(this).parent('div.data').attr('rel'),
							'kategory':$(this).parent('div.data').attr('value'),
							'gallery':'yes'}),
			  dataType: "script",
			  success: function(msg){
				 $( "#foto" ).html(msg).hide().fadeIn('slow');
				}
		});
      return false;
	});
[HTML] pobierz, plaintext 

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 :

[HTML] pobierz, plaintext 
$("div.data a").live("click",function(){
		$('#foto').load('gallery.php', {
					'dir':$(this).parent('div.data').attr('rel'),
					'kategory':$(this).parent('div.data').attr('value'),
					'gallery':'yes'}, function() {
			$(this).hide().fadeIn('slow');
		});
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
//jQuery Doc
//---------------------------
//zmienne dla galerii
var $move_by = 660;
var $frame_left = 0;
var $frame_no = 1;
 
$(document).ready(function() {
 
	//------------------------------------------
	// Obsluga galerii
	$max_clicks = $("#img_container").children.size;
 
	$("#foto").live("click", function(){
		var $new_frame_no = (($frame_no/1) + 1);
		var $new_left = (($frame_left/1) + $move_by);
		var $new_left_attr = $new_left + "px";
		if($new_frame_no < $max_clicks) {
			$("#img_container").animate({left: $new_left_attr}, 800);
			$frame_left = $new_frame_left;
			$frame_no = $new_frame_no;
		}
	});
	$(".img_container img").live("click", function(){
		$new_frame_no = (($frame_no/1) - 1);
		$new_left = (($frame_left/1) - $move_by);
		$new_left_attr = $new_left + "px";
		if($new_frame_no > 0) {
			$("#img_container").animate({left: $new_left_attr}, 800);
			$frame_left = $new_frame_left;
			$frame_no = $new_frame_no;
		}
	});
[HTML] pobierz, plaintext 

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 :

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 ?

Ten post edytował Wolfie 19.09.2009, 13:06:46