[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

[kamil4u]

Aktywny obrazek to <a> z klasą "dg-center". Teraz musisz za pomocą DOM znaleźć ten element. Następnie znaleźć element(<a>) za nim i przypisać odpowiednie zdarzenie.

Nie będę ściągał zip-a. Umieść to na swoim serwerze albo na stronie takiej jak ta: http://jsfiddle.net/
A najlepiej jak uda Ci się zrobić to samemu po moich wskazówkach. Pytaj o co chcesz

[ololol]

dzięki za odpowiedź. wiem, że muszę wstawić kod mniej więcej taki -

Kod

this.$el.on(“click”,”img”, function(evt){
evt.preventDefault();
if ($(this).attr(“src”)==_self.$rightItm.children().attr(“src”)){
_self._navigate(‘next’);
}else if($(this).attr(“src”)==_self.$leftItm.children().attr(“src”)){
_self._navigate(‘prev’);
}
});

tylko nie wiem w którym miejscu go wrzucić. w każdym wydającym się poprawnym, galeria się psuje. poniżej wstawiam pliki javascript

http://speedy.sh/X6KNs/jquery.gallery.js oraz http://speedy.sh/cmVkJ/modernizr.custom.53451.js

css i html myślę ze nie są potrzebne

[kamil4u]

Wstaw działające demo tu: http://jsfiddle.net/
Nigdy nie używałem tego skryptu, więc muszę( a przynajmniej tak mi będzie najszybciej ) to zrobić za pomocą prób i błędów. HTML i CSS są potrzebne. W kodzie używaj tabulatorów - poprawiają czytelność kodu.

[ololol]

Nie potrafię tego tam wrzucić - strona nie potrafi wykonać poprawnie kodu i pojawiają się krzaczki. Wstawię tutaj pozostałe pliki które byly w paczce ZIP.

http://speedy.sh/w2urf/demo.css
http://speedy.sh/4eQ37/style.css
http://speedy.sh/9XyDh/index.html

css byly w folderze css, javascripty w js

do tego byl folder images z obrazkami do galerii.

podbijam bo temat zanikł

[Damonsson]

A my nie potrafimy ściągnąć plików na dysk.

Nie chcesz dać sobie pomóc, to temat zanikł proste.

http://fredhq.com/projects/roundabout/ masz tu taki efekt, kombinuj.

[ololol]

wyrzuca mi błędy. ta galeria ma zbyt dużo plików i css, i js zeby dało się ją wrzucić na stronę, którą podał kolega wyżej. niepotrzebna ironia, chciałem tylko się czegoś dowiedzieć. javascript jest mi dość obca, dlatego liczyłem na pomoc profesjonalistów.

[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

[ololol]

dziekuje bardzo ! własnie takie odpowiedzi oczekiwałem. wielkie dzięki za pomoc