[JS] [jQuery] Przejście po kliknieciu Opcje

[ololol]

Cześć,

mam pewien problem z ktorym nie potrafie sobie poradzic - otóż mam slider w jquery, gdzie przejście do kolejnego obrazka wywołuje sie przez klikniecie strzałki. a ja chciałbym jeszcze, zeby procz tej strzalki, przejscie wywolywalo tez klikniecie kolejnego obrazka. zreszta, zobaczcie sami - http://tympanus.net/Development/3DGallery/index.html# tutaj jest demo

a ponizej wstawiam skrypt w zipie - podpowiedzcie co poprawic w skryptach javascript, bo ciagle jakies bledy

http://tympanus.net/Development/3DGallery/3DGallery.zip

[AdIoS_Neo]

Witam,
zmiany jakich trzeba dokonać by osiągnąć ten efekt:

js/jquery.gallery.js - linijka 44
zmieniamy:

[JAVASCRIPT] pobierz, plaintext 
this.$nav = this.$el.find('nav');
this.$navPrev = this.$nav.find('.dg-prev');
this.$navNext = this.$nav.find('.dg-next');
[JAVASCRIPT] pobierz, plaintext 

na:

[JAVASCRIPT] pobierz, plaintext 
this.$nav = this.$el.find('nav');
this.$navPrev = this.$el.find('.dg-prev');
this.$navNext = this.$el.find('.dg-next');
[JAVASCRIPT] pobierz, plaintext 

index.html
dodajemy:

[HTML] pobierz, plaintext 
<section id="dg-container" class="dg-container">
				<div class="dg-prev"></div> <!-- TOOOOOOOOO -->
				<div class="dg-wrapper">
					<a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a>
					<a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>
					<a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>
					<a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>
					<a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>
					<a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>
					<a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>
					<a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a>
					<a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>
					<a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a>
					<a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a>
					<a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a>
				</div>
				<div class="dg-next"></div><!-- ORAZ TOOOOOOOOO -->
				<nav>	
					<span class="dg-prev"><</span>
					<span class="dg-next">></span>
				</nav>
			</section>
[HTML] pobierz, plaintext 

style.css (od galerii)
dodajemy:
do .dg-wrapper (6 linijka):

[CSS] pobierz, plaintext 
float: left;
[CSS] pobierz, plaintext 

oraz byle gdzie (może być na końcu):

[CSS] pobierz, plaintext 
.dg-container > .dg-prev, .dg-container > .dg-next{
	float: left;
	position: relative;
	width: 376px;
	height: 316px;
	z-index: 99;
}
[CSS] pobierz, plaintext 

Gotowe !

Ten post edytował AdIoS_Neo 16.09.2012, 03:36:53