[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]

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

Ten post edytował kamil4u 15.02.2012, 17:50:53

[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 (IMG:style_emoticons/default/smile.gif) to na pewno mi pomoże (IMG:style_emoticons/default/wink.gif) ) wygląda prosto i logicznie i przede wszystkim sensownie (IMG:style_emoticons/default/smile.gif) )))) postaram się poinformować jak mi poszło jak rozwiąże problem (IMG:style_emoticons/default/smile.gif) )

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?

Ten post edytował Moodey 16.02.2012, 20:36:17