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:
<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>
<img class="duzy" src="obrazki/1.jpg" alt="obrazki/1.jpg" />
<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>