Witam,

Dopiero zaczynam zabawę programowaniem, a wybrałem na to JavaScript. Po zapoznaniu się z podstawowymi zasadami tworzenia czegokolwiek w tym języku chcę również poznać "gotowca" jakim jest framework jQuery. Jednakże dopadł mnie brak praktyki i po usiłowaniu stworzenia galerii na stronie opartej na identycznym kodzie html i css i sposobie animacji w JQ jednakże działających niezależnie względem siebie otrzymuje problem nie do przeskoczenia na moim poziomie. Próbowałem wprowadzać dodatkowe klasy pomocnicze w JS/JQ do już oklasowanych wcześniej elementów i mimo to nie chcą się dodać, próbowałem operować na położeniu obiektów w DOM ale i to odmówiło mi posłuszeństwa. Domyślam się, że zmiana klas strzałek to konieczność no ale tutaj właśnie jest moje zapytanie. Jak przerobić mój kod podany poniżej tak aby te galerie oparte były na tym samym kodzie animacji i hmtl ale pracowały niezależnie względem siebie? zależy mi na nie zmienianiu czystego html, a ewentualnej przeróbce tego kodu w JS/JQ.

[HTML] pobierz, plaintext 
 
<div class="gal-container">
	<div class="arow-left"></div>
	<div class="window">
        <ul class="gal">
    		<li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
    		<li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
    	        <li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
                <li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
                <li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
                <li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
                <li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
        </ul>      
        </div>
        <div class="arow-right"></div>
</div>
 
<div class="gal-sep"></div>
 
<div class="gal-container">
	<div class="arow-left"></div>
	<div class="window">
        <ul class="gal">
    	        <li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
    		<li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
    		<li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
        	<li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
        	<li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
        	<li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
        	<li class="gal-item"><img src="images/empty.jpg" alt="" /></li>
        </ul>      
        </div>
        <div class="arow-right"></div>
</div>
 
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
div.gal-container {
	position: relative; margin: 0 auto;
	width: 948px; height: 236px;
}
 
/* maskowanie lini zdjęć */
 
div.window {
	position: absolute;	overflow: hidden;
	left: 48px;
	width: 850px; height: 236px;
}
 
/* linia zdjęć */
 
ul.gal {
	position: absolute;
	height: 236px; width: 10000px;
	left: -40px; /* omijanie CSS3 na margin-left dla gal-item*/ /* przesuwanie */
}
 
li.gal-item img {
	display: block;
	margin-left: 40px;
	float: left;
}
 
div.arow-left {
	display: block;	width: 38px; height: 236px;
	background: url(images/arrow-l.png) no-repeat;
	float: left;
	margin: 0; padding: 0;
}
 
div.arow-right {
	display: block;	width: 38px; height: 236px;
	background: url(images/arrow-r.png) no-repeat;
	float: right;
	margin: 0; padding: 0;
}
 
 
div.gal-sep {
	width: 1200px; height: 96px;
	background: url(images/gal-sep.jpg) no-repeat;
	clear: both; 
	margin: 0 auto;
}
[CSS] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
 
$(document).ready(function() {
 
var $galeria = $('.gal-container');	
var $liniaobrazkow = $('ul.gal');
var $lewy = $('.arow-left');
var $prawy = $('.arow-right');
 
var przesun = 0;
 
 
	$prawy.click(	
		function(){
			if(przesun > -1800 ) {
 
				przesun -=900;
		 		$liniaobrazkow.animate({
				left: -40 + przesun	 			 
				}) 
			}
		} ); 
 
 
	$lewy.click(
		function(){
			if (przesun<0) {
 
				przesun +=900;
				$liniaobrazkow.animate({ 
      			        left: -40 + przesun
				})
			} 
		} ); 		
 
 
});
 
 
[JAVASCRIPT] pobierz, plaintext 

PS: Temat pewnie przewija się od czasów wynalezienia koła ale mój mózg już nie potrafi wymyślić odpowiedniego zapytania w opcji "szukaj". Przepraszam z góry i jeśli temat juz był byłbym wdzięczny za odsyłacz.


Pozdrawiam,
-Moodey

Zrób to tak:
- pobierz tylko <div class="gal-container"> do zmiennej
- jako, że jQuery robi i z tego tablicę( masz kilka elementów, które mają taką klasę ) to wertujesz po wszystkich ( each )
- teraz poznajesz magiczne słówko this, które zawsze w obrębie each wskazuje na aktualny element
- następnie przerabiasz cały swój kod:
a ) przyciski lewy, prawy itd. wyszukujesz właśnie w tym elemencie: czyli $( this ).pobierzDzieci( ',lewyPrzycisk')
B ) reszta kodu praktycznie bez zmian, a jak już to na tyle proste, że sobie poradzisz

Dziękuje to na pewno mi pomoże ) wygląda prosto i logicznie i przede wszystkim sensownie )))) postaram się poinformować jak mi poszło jak rozwiąże problem )

EDIT:

Hmm... mam problem... bo o ile dobrze zrozumialem chodziło bym zrobił to tak:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
 
var $galeria = $('div.gal-container');	
//var $liniaobrazkow = $('ul.gal');
//var $lewy = $('.arow-left');
//var $prawy = $('.arow-right');
 
 
$.each($galeria, function () {
 
 
var $liniaobrazkow = $(this).children('.gal');
var $lewy = $(this).children('.arow-left');
var $prawy = $(this).children('.arow-right');
 
 
var przesun = 0;
 
	$prawy.click(	
		function(){
			if(przesun > -1800 ) {
 
				przesun -=900;
		 		$liniaobrazkow.animate({
				left: -40 + przesun	 			 
				}) 
			}
		} ); 
 
 
	$lewy.click(
		function(){
			if (przesun<0) {
 
				przesun +=900;
				$liniaobrazkow.animate({ 
      			        left: -40 + przesun
				})
			} 
		} ); 		
 
 
});
 
 
});
[JAVASCRIPT] pobierz, plaintext 

niby kod w przeglądarce nie wywala błędów, a mimo to nie działa...

co robię nie tak?

Umieść to online z obrazkami. W całości.

Wydaje się, że jest dobrze( nie sprawdzałem warunków animacji, więc może tu jest błąd )

Cały kod strony online znajduje się <<tutaj>>

PS: strona jeszcze nie była jeszcze optymalizowana pod kątem przeglądarek za co przepraszam - działa poprawnie pod google chrome.

Zacznijmy od tego, że brakuje 'px' przy w animate.
I zmienna przesun jest niepotrzebna, gdyż możesz wykorzystać własność funkcji animate += lub -=.

--po zamianach wrzuć wynik na serwer, jeżeli nadal nie będzie działać--
--zrób sobie jeszcze test czy w ogóle działa zdarzenie click na tych elementach - zamień całą funkcję na alert-a (tu tylko napisz, czy działało i nie wrzucaj na serwer) --

Ha! udało mi się znaleźć błąd! ) już wszystko działa jak trzeba ))


chodziło o tą deklaracje elementu:

[JAVASCRIPT] pobierz, plaintext 
var $liniaobrazkow = $(this).children('.window').children('.gal');
[JAVASCRIPT] pobierz, plaintext 

Jak widzisz ani ja ani Ty nie dopatrzyliśmy się tak przyziemnego błędu w pobraniu elementu html ), a mianowicie klasa .gal była dodatkowo zagnieżdżona w divie o klasie .window i dlatego nie łapało i padało już na samej funkcji animate


Dziękuje za pomoc i zaangażowanie ! ) Wiele się nauczyłem.. min. nauczyłem się korzystać z manuala co ułatwi mi życie

PS: efekt poprawki zobaczysz >>>tutaj<<<