19-09-2014, 02:56
Poniżej zamieszczam kompletny kod strony z powyższym przykładem. Nieco go na szybko przerobiłem tak by przed załadowaniem pokazywał loading (ładownaie)
Kod:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie ie6 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8 lt-ie9"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700,600&subset=latin,latin-ext">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
//dla każdej galerii
$('.gallery').each(function() {
//pobieramy ją pod zmienną
var $gallery = $(this);
//duże zdjęcie
var $bigPhoto = $gallery.find('.big-photo');
//miniaturki
$thumbs = $gallery.find('.thumbs a');
//po kliknięciu na minitaturkę...
$thumbs.on('click', function(e) {
e.preventDefault(); //olej jej domyślą czynność czyli nie przeność po kliknięciu linka
$bigPhoto.empty(); //usuń wszystko z div.big-photo
$bigPhoto.append('<span class="loading"></span>'); //dodaj do niego ładowanie
var image = new Image(); //tworzymy nowy wittualny obrazek (w pamięci)
//podpinamy mu zdarzenie, ktore sie wykona po zaladowaniu tego obrazka
$(image).on('load', function() {
//gdy wirtualny obrazek sie zaladuje tworzymy jeszcze jeden obrazek
//na bazie src wirtaulnego
var $img = $('<img src="'+this.src+'" />');
//czyscimy .big-photo z loadinga
$bigPhoto.empty();
//i wrzucamy do niego obrazek ktory przed chwila stworzylismy
$bigPhoto.append($img);
});
//wirtualnego obrazkowi ustawiamy jako src obrazek z href klikniętej miniaturki
//jak ustawimy to src to obraze zacznie sie ladowac do pamieci i jak sie zaladuje
//to wykona sie powyzsze zdarzenie (dlatego podpielismy je przed ponizsza linia)
image.src = $(this).attr('href');
})
});
});
</script>
<style>
/* duże zdjęcie */
.big-photo {display: block; width:500px; height:500px; vertical-align: middle; text-align: center; position: relative; border:1px solid #ddd;
display:table-cell;
}
.big-photo .loading {
position: absolute;
left:0; top:0; right:0; bottom:0;
background: url(http://jimpunk.net/Loading/wp-content/uploads/loading5.gif) center center no-repeat; display: block;
}
.big-photo img {max-width:100%; max-height:100%; height:auto; display:block; margin:0 auto;}
/* miniaturki */
.thumbs {margin: 5px 0; list-style:none; padding:0;}
.thumbs li {
display: inline-block;
vertical-align: top;
width:100px; height:100px;
line-height: 100px;
text-align: center;
margin:5px 5px 0 0;
}
</style>
</head>
<body>
<div class="gallery">
<div class="big-photo">
<img src="http://placehold.it/500x500&text=majki">
</div>
<ul class="thumbs">
<li><a href="http://placehold.it/400x400&text=lorem1"><img src="http://placehold.it/100x100" /></a></li>
<li><a href="http://placehold.it/400x400&text=lorem2"><img src="http://placehold.it/100x100" /></a></li>
<li><a href="http://placehold.it/400x400&text=lorem3"><img src="http://placehold.it/100x100" /></a></li>
</ul>
</div>
</body>
</html>