Prosta galeria w jQuery Opcje

[Mayka]

Witam, znalazłem sobie taki prosty skrypcik do zrobienia galeri w jquery, wszystko chodzi tylko chciałem żeby po zmianie obrazka i kliknieciu na niego można było odczytać wartość "alt" obrazka, wszystko było by fajnie tylko że zawsze przyjmuje wartość pierwszego obrazka, czy ktoś moze mi powiedzieć jak to przerobić żeby pobierało alt z odpowiedniego obrazka (aktualnie wyświetlanego w ".duzy") ?

[JAVA] pobierz, plaintext 
$(function() { 
 
			$('.miniatury ul li:first-child a img').css('opacity',0.5);
			$(".miniatury a").click(function(){	
				$('.miniatury a img').css('opacity',1);
				$(this).children().css('opacity',0.5);
 
				var sciezka = $(this).attr("href");
				var tytul = $(this).attr("title");
 
				$(".duzy").attr({ src: sciezka, alt: tytul });
 
				return false;
			});
			$(".duzy").click(function(){
				var val = $('.miniatury a img').attr("alt");
				alert(val);
				});
		});
[JAVA] pobierz, plaintext 

[_Borys_]

[JAVASCRIPT] pobierz, plaintext 
$(".duzy").click(function(){
   var val = $(this).attr("alt");
   alert(val);
});
[JAVASCRIPT] pobierz, plaintext 

[Mayka]

Nie pomyslałem o tym (IMG:style_emoticons/default/wink.gif)


Dzięki

dobra teraz ktoś jak by mógł mi wytłumaczyć dodać do colorboxa wszystkie obrazki a w zasadzie wszystkie linki do dużych obrazków żeby nie trzeba było zamykać i otwierać każdego po kolei ?

[JAVA] pobierz, plaintext 
	$(".duzy").click(function(){
			var tablica = new Array();
			var alt = $(this).attr("alt");
			tablica.push(alt);
				$(".group1").each(
				function()
				{
				if($(this).attr('title')!=alt){
				tablica.push($(this).attr('title'));
				}
				}
				);
				console.log(tablica); 				
				$.colorbox({
				href: "obrazki/1.jpg" ,
				width:"95%",
				height:"95%",
				title:"Galeria 11",
				rel: "group1"
				});
				});
[JAVA] pobierz, plaintext 

edit:
zbieram sobie wszystkie wszystkie pola do tablicy, tylko jak to teraz przekazać do href żeby stało się galerią ?

Ten post edytował Mayka 21.02.2014, 16:22:21

[_Borys_]

Po co tyle kombinacji.
W .miniatury a masz ścieżki do dużych obrazków a więc dajesz jakąś klasę, <a class="group1"> i potem

[JAVASCRIPT] pobierz, plaintext 
$(".group1").colorbox({rel:'group1'});
[JAVASCRIPT] pobierz, plaintext 

i żadnych hrefów, altów nie musisz pobierać.

Ten post edytował _Borys_ 21.02.2014, 14:17:21

[Mayka]

No bo tak nie bedzie działało, mam 4 miniaturki z których ładuje obrazki do class="duzy" i dopiero po kliknięciu w duzy chce otwierać duże zdjęcia.
Jak zrobie tak jak ty Piszesz to nie bedzie ładowało do duzego obrazka tylko odrazu wyswietlało w colorboxie.
Chyba że Cie nie zrozumiałem....

[_Borys_]

Klikasz w którąś miniaturę, otwiera się duży obrazek, klikasz w ten duży obrazek, otwiera się colorbox z dużymi ?
Tak to ma działać ?

[Mayka]

Tak dokładnie tak ma działać.
Zrobiłem, może troche na okrętke wiec jak da się to uprościć to prosze poprawcie ale dla potomności niech zostanie:

[JAVA] pobierz, plaintext 
<script type="text/javascript">
		$(function() { 
 
			$('.miniatury ul li:first-child a img').css('opacity',0.5);
			$(".miniatury a").click(function(){	
				$('.miniatury a img').css('opacity',1);
				$(this).children().css('opacity',0.5);
 
				var sciezka = $(this).attr("href");
				var tytul = $(this).attr("title");
 
				$(".duzy").attr({ src: sciezka, alt: tytul });
 
				return false;
			});
			$(".duzy").click(function(){
			$(".obrazki_color").remove();
			var $gallery = $('<div class="obrazki_color">').hide().appendTo('body');
			var tablica = new Array();
			var alt = $(this).attr("alt");
			tablica.push(alt);
				$(".group1").each(
				function()
				{
				if($(this).attr('title')!=alt){
				tablica.push($(this).attr('title'));
				}
				}
				);
				console.log(tablica); 				
				$.each(tablica, function(i){
				$('<a href="'+tablica[i]+'"></a>').appendTo($gallery);
				});
				$gallery.find('a').colorbox({rel:'mygroup', width:'95%', height:'95%',open:true});
				});
		});
	</script>
[JAVA] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="kontener">
 
		<div class="galeria">
			<img class="duzy" src="obrazki/1.jpg" alt="obrazki/1.jpg" />
		</div>
 
		<div class="miniatury">
			<ul>
				<li><a href="obrazki/1.jpg"class="group1"   title="obrazki/1_d.jpg"><img src="obrazki/1-mini.jpg"  alt="" /></a></li>
				<li><a href="obrazki/2.jpg"class="group1"  title="obrazki/2_d.jpg"><img src="obrazki/2-mini.jpg" alt=""   /></a></li>
				<li><a href="obrazki/3.jpg"class="group1"  title="obrazki/3_d.jpg"><img  src="obrazki/3-mini.jpg" alt="" /></a></li>
				<li><a href="obrazki/4.jpg"class="group1"  title="obrazki/4.jpg"><img  src="obrazki/4-mini.jpg" alt="" /></a></li>
			</ul>
		</div>
 
	</div>
[HTML] pobierz, plaintext