Autor Zpráva
Sobky
Profil
Dobrý deň, chcel by som spraviť galériu, tak že na stránke sa zobrazia malé obrázky a po kliknutí naň sa zvačší. To ako sa to má zväčšiť neviem. Čo sa no to používa? Flash? Javascript alebo stačí css?
lionel messi
Profil
Sobky:
Javascript alebo stačí css?
Javascript. Čarovné slovíčko pre Google znie lightbox (lightbox galerie).
Tomáš123
Profil
Sobky:
Čo sa no to používa?
Teoreticky stačí aj obyčajný hypertextový odkaz. Záleží od toho, aké efekty požaduješ.
smitka
Profil
Před mnoha lety jsem udělal poměrně skriptík, který galerie vytváří - stačí nahrát soubory na webhosting a do patřičné složky nahrát obrázky. Už s ním moc spokojený nejsem a chtěl by předělat, ale funguje stále.

https://github.com/LyntServices/PHPminiGallery
Sobky
Profil
Spravil som to podla tohoto, ale je tam jeden problém... Funguje to len pre jeden obrázok.. Ako by sa to dalo vypisovať pre každý obrázok postupne? -> Aby to išlo pre každý obrázok, pretože ono to vypíše všetky naraz
<html>
    <head>
        <title>Quick Simple Light Box</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <style type="text/css">
 
        body
        {
            font-family: Helvetica, Arial;
        }
 
        .backdrop
        {
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background:#000;
            opacity: .0;
            filter:alpha(opacity=0);
            z-index:50;
            display:none;
        }
 
 
        .box
        {
            position:absolute;
            top:20%;
            left:30%;
            width:500px;
            height:300px;
            background:#ffffff;
            z-index:51;
            padding:10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow:0px 0px 5px #444444;
            -webkit-box-shadow:0px 0px 5px #444444;
            box-shadow:0px 0px 5px #444444;
            display:none;
        }
 
        .close
        {
            float:right;
            margin-right:6px;
            cursor:pointer;
        }
 
        </style>
 
        <script type="text/javascript">
 
            $(document).ready(function(){
 
                $('.lightbox').click(function(){
                    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
                    $('.box').animate({'opacity':'1.00'}, 300, 'linear');
                    $('.backdrop, .box').css('display', 'block');
                });
 
                $('.close').click(function(){
                    close_box();
                });
 
                $('.backdrop').click(function(){
                    close_box();
                });
 
            });
 
            function close_box()
            {
                $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                    $('.backdrop, .box').css('display', 'none');
                });
            }
 
        </script>
 
    </head>
    <body>
 
    <h1>This is my webpage...</h1>
    <a href="#" class="lightbox">Open Lightbox</a>
 
    <div class="backdrop"></div>
    <div class="box"><div class="close">x</div>This is the lightbox!!!</div>
 
    </body>
</html>
adam1993
Profil *
Můžeš zkusit použít tohle:
v zipu máš ukázku, takže si to stačí jen upravit podle sebe, jak potřebuješ

www.no-margin-for-errors.com/demos/prettyPhoto-jquery-lightbox-clone/prettyPhoto_compressed_3.1.5.zip

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: