[JavaScript]Przesuwanie ofert. Opcje

[MeGusta]

Witam,
Mam problem z zrobieniem przesuwania ofert, po kliknięciu w div który ma data-id="x" funkcja generuje z tablicy kod html a następnie wstawia go do diva .galery, problem w tym, że po kliknięciu na .move-left przesuwa się tylko o jedno lub wogole, dodatkowo funkcja generate_min ktora generuje html z miniaturkami zdjęć z tej samej tablicy generuje ostatnie zdjecie + nowe, a nie tylko nowe.

Klikniecie na oferte:

[HTML] pobierz, plaintext 
$('.realize').click(function(){
 
		$this = $(this);
 
		var data = $this.attr('data-id'); 
 
		$('body').append('<div class="black-screen"><div class="galery">' + generateview(data) + '</div></div>');
 
		$('.move-right').click(function(){
			data++;
			$('.galery').html(generateview(parseInt(data) + 1))
			console.log(parseInt(data) + 1)
		});
 
		$('.move-left').click(function(){
			$('.galery').html(generateview(parseInt(data) - 1))
			console.log(parseInt(data) - 1)
			data--;
		});
 
	});
[HTML] pobierz, plaintext 

Funkcja generująca miniaturki:

[HTML] pobierz, plaintext 
var min_img_for = [];
 
function generate_min(data)
{
	$.each(data_realize[data][7], function(key, value) {
		min_img_for += '<div class="img-sml"> ' + value + ' </div>';
	});
 
	return min_img_for;
}
[HTML] pobierz, plaintext 

Do funkcji generateview podaję id z atrybutu data-id po którym wyswietlam dane z tablicy.

Struktura html:

[HTML] pobierz, plaintext 
<div data-id="1" class="realize">
                <img src="img/realizacja-1.png" alt="" />
                <div class="realize-hover"></div>
                <div class="desc-realize">
                  Tablice Reklamowe (Billboard)
                </div>
              </div>
              <div data-id="2" class="realize">
                <img src="img/realizacja-1.png" alt="" />
                <div class="realize-hover"></div>
                <div class="desc-realize">
                  Tablice Reklamowe (Billboard)
                </div>
              </div>
 
i tak dalej
[HTML] pobierz, plaintext 

Sama tablica wygląda tak:

[HTML] pobierz, plaintext 
var data_realize = 
	[[
		0,
		'<img src="./img/big-img-realize.png" />',
		'Bilboard dla <br>"Galeria Krakowska"',
		'Lorem Ipsum jes...',
		'21 dni',
		'5m x 2.5m',
		'500 zł',
		['<img src="./img/min-image-realize.png" />', ''] // tu sa miniaturki
	],
];
[HTML] pobierz, plaintext 

Ten post edytował MeGusta 28.08.2016, 13:07:20

[MeGusta]

Poprawione:

[HTML] pobierz, plaintext 
$('.realize').click(function(){
 
		$this = $(this);
 
		var data = parseInt($this.attr('data-id'));
 
		$('body').append('<div class="black-screen"><div class="galery">' + generateview(data) + '</div></div>');
 
		$('.move-right').click(function(){
			data++;
			$('.galery').html(generateview(data))
		});
 
		$('.move-left').click(function(){
			$('.galery').html(generateview(data))
			data--;
		});
 
	});
[HTML] pobierz, plaintext 

Dalej to samo, przerzuca się tylko o jedno, tak jakby data++ wykonywał się tylko raz.
Dodatkowo funkcja generate_min() tak jakby do starych zdjęć z pierwszego elementu tablicy dopisuje z drugiego elementu.

Ten post edytował MeGusta 28.08.2016, 13:18:16