[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

[Moodey]

Ha! udało mi się znaleźć błąd! (IMG:style_emoticons/default/smile.gif) ) już wszystko działa jak trzeba (IMG:style_emoticons/default/smile.gif) ))


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 (IMG:style_emoticons/default/smile.gif) ), 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 (IMG:style_emoticons/default/smile.gif)


Dziękuje za pomoc i zaangażowanie ! (IMG:style_emoticons/default/smile.gif) ) Wiele się nauczyłem.. min. nauczyłem się korzystać z manuala co ułatwi mi życie (IMG:style_emoticons/default/smile.gif)

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

Ten post edytował Moodey 17.02.2012, 22:40:51