| Autor | Zpráva | ||
|---|---|---|---|
| Sobky Profil |
#1 · Zasláno: 1. 4. 2015, 19:23:22
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 |
#2 · Zasláno: 1. 4. 2015, 19:30:02
Sobky:
„Javascript alebo stačí css?“ Javascript. Čarovné slovíčko pre Google znie lightbox (lightbox galerie). |
||
| Tomáš123 Profil |
#3 · Zasláno: 1. 4. 2015, 19:49:42
Sobky:
„Čo sa no to používa?“ Teoreticky stačí aj obyčajný hypertextový odkaz. Záleží od toho, aké efekty požaduješ. |
||
| smitka Profil |
#4 · Zasláno: 1. 4. 2015, 19:59:26
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 |
#5 · Zasláno: 1. 4. 2015, 20:49:54
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 * |
#6 · Zasláno: 1. 4. 2015, 22:12:32
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 |
||
|
Časová prodleva: 9 let
|
|||
0