+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Galeria zdjęć (/thread-galeria-zdjec--11204)
Galeria zdjęć - w4wer - 02-09-2014
Witam, mam prośbę.
Chcę utworzyć zakładkę galeria w której będą zdjęcia samochodów, ale tylko po jednym zdjęciu danego modelu, i gdy kliknę na któryś chciałbym żeby otwierało się okienko popup i w nim było jedno duże zdjęcie a obok czy pod spodem miniaturki, które po kliknięciu wskakiwały na miejsce dużego.
Adres do pliku próbnego:
http://w4wer.hekko24.pl/schronisko/galeri.html
Zrobiłem wyskakujące okienka sposobem:
<a href="#example1" class="openModal"><img src="psy/1_small.jpg">Max<br />wiek: 7 lat<br />płeć: pies</a>
<aside id="example1" class="modal">
<div>
<div style=" width:100%; background-color:#ffffff"><h2>Max #0001<br />wiek: 7 lat<br />płeć: pies</h2></div>
<p>
</div>
</div>
</p>
<a href="#close" title="Close">Close</a>
</div>
</aside>
Ale nie mogę umieścić w nich galerii.
Proszę o pomoc. Z góry dziękuje.
RE: Galeria zdjęć - Kartofelek - 06-09-2014
Zadanie jest banalnie proste. Rozbij je na 2 części:
1) pokazanie właściwego popupa
2) zmiana zdjęć
Do calosci uzyje jquery, ale zwykly js tez zbytnio sie nie bedzie roznic
1) Pkt 1 - poczytaj http://domanart.pl/popupy/
2) W takim popupie umieszczamy galerie z duzym zdjeciem a pod nim miniaturki. Powiedzmy ze kazde duze zdjecie ma klasę class="big-majki" a miniaturki klasę class="big-majki-brothers". Kod html mogl by miec postac
Kod:
<div class="gallery">
<img src="big-majki.jpg" class="big-majki">
<ul class="big-majki-brothers">
<li><a href="small-brother.jpg"><img src="thumb-small-brother.jpg" /></a></li>
<li><a href="small-sister.jpg"><img src="thumb-small-sister.jpg" /></a></li>
<li><a href="small-rafalata.jpg"><img src="thumb-small-rafalala.jpg" /></a></li>
</ul>
</div>Po kliknieciu na miniaturkę podmieniamy src duzego majkiego.
Kod:
$(function() {
$('.gallery').each(function() {
var $gallery = $(this);
var $bigPhoto = $gallery.find('.big-majki');
$thumbs = $gallery.find('.big-majki-brothers a');
$thumbs.on('click', function(e) {
e.preventDefault();
$bigMajki.attr('src', $(this).attr('href')); //zmieniam big majkiemu src na href klikietego linka
})
});
});Dodatkowo warto dla braci big majkiego sprawdzić, jakiej płci jest kliknięty brat:
Kod:
var href = $(this).attr('href')
if (href.indexOf('sister')!==0) {
console.log('dobra jest')
} else if (href.indexOf('brother')!==0) {
console.log('dobra jest')
} else {
$('*').remove(); // :(
}No dobra tego powyższego kodu nie musisz wykonywać
RE: Galeria zdjęć - Kartofelek - 19-09-2014
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>