Zaloguj się

w4wer · (Ten post był ostatnio modyfikowany: 02-09-2014, 16:42 przez w4wer.)

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.

**Kartofelek** · (Ten post był ostatnio modyfikowany: 19-09-2014, 02:55 przez Kartofelek.)

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ć

**Kartofelek** · 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>

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie