[JavaScript][CSS][HTML]Prosta animacja galerii w jQuery, Prosta animacja galerii w jQuery Opcje

[Moodey]

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

Ten post edytował Moodey 15.02.2012, 17:25:47

[kamil4u]

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