[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 (IMG:style_emoticons/default/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 :

[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

[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