Forum PHP.pl

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

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?

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

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.

Ten post edytował Moodey 17.02.2012, 03:41:01

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

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