Kódovátko: gallery.php - Pěkná galerie plná tykadel...

Vytvářím galerii k webu achatinka.mysteria.cz a celkem jsem si s tím php na celém webu zarochnil...

Nyní jsem dokončil galerii.

gallery.php

<?php
$id=$_GET["obrazek"];
?>
<?php
$head=file_get_contents("./data/include/head.inc");
$head=str_replace("<title>Achatinka Web</title>", "<title>Galerie - Achatinka Web</title>", $head);
$head=str_replace("<body>", "<body id='gal'>", $head);
echo $head;
if(file_exists("./data/upload/".$id.".jpg")){
$nazev=file_get_contents("./data/upload/nazev/".$id.".inc");
$komentar=file_get_contents("./data/upload/komentar/".$id.".inc");
$first_thumb=($id-2);
$second_thumb=($id-1);
$third_thumb=($id);
$fourth_thumb=($id+1);
$fifth_thumb=($id+2);
$posledni=file_get_contents("./admin/log/foto_id.inc");
echo'
<div id="map"><img src="http://achatinka.mysteria.cz/data/upload/'.$id.'.jpg" id="image"></div>
<div id="nazev">'.$nazev.'</div>
<div id="komentar">'.$komentar.'</div>
<div id="list">';
if($id!="1"){echo'<a href="gallery.php?obrazek=1" class="gal"><img src="./data/nazacatek.png" class="thumb"></a>';}
if(file_exists("./data/upload/".$first_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$first_thumb."'><img src='./data/upload/".$first_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./data/upload/".$second_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$second_thumb."'><img src='./data/upload/".$second_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./data/upload/".$third_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$third_thumb."'><img src='./data/upload/".$third_thumb.".jpg' class='thumb' id='this'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./data/upload/".$fourth_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$fourth_thumb."'><img src='./data/upload/".$fourth_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if(file_exists("./data/upload/".$fifth_thumb.".jpg")){echo"<a href='gallery.php?obrazek=".$fifth_thumb."'><img src='./data/upload/".$fifth_thumb.".jpg' class='thumb'></a>";}else{echo"<img src='./data/upload/thumb.png' class='thumbp'>";}
if($id!=$posledni){echo'<a href="gallery.php?obrazek='.$posledni.'" class="gal"><img src="./data/nakonec.png" class="thumb"></a>';}
echo'</div>';
if(file_exists("./data/upload/".$second_thumb.".jpg")){echo'<a href="gallery.php?obrazek='.$second_thumb.'" id="predchozi"><</a>';}
if(file_exists("./data/upload/".$fourth_thumb.".jpg")){echo'<a href="gallery.php?obrazek='.$fourth_thumb.'" id="dalsi">></a>';}
echo'
</body>
</html>
';}
else{
echo'
<div id="map"><img src="http://achatinka.mysteria.cz/data/warning.png" id="image"></div>
<div id="nazev">CHYBA: Obrázek s ID '.$id.' neexistuje!</div>
<div id="list"></div>
</body>
</html>
   ';
   };
?>

V souboru head.inc includovaném na začátku stránky je <link který obsahuje page.css a v něm určenou část pro galerii...

page.css > gallery

/* obrazkova galerie */

body#gal
{
background: #222;
color: #BBB;
overflow: hidden;
}

div#map
{
width: 100%;
height: 77%;
text-align: center;
}

div#list
{
background: url("shadebg.png") bottom #444 repeat-x;
width: 100%;
height: 22%;
margin-top: 10px;
text-align: center;
}

img#image
{
max-width: 100%;
max-height: 100%;
-moz-box-shadow: -1px 0px 20px 5px #000;
-webkit-box-shadow: -1px 0px 20px 5px #000;
box-shadow: -1px 0px 20px 5px #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
}

div#nazev
{
position: absolute;
top: 20px;
left: 20px;
min-width: 100px;
font-size: 18px;
font-weight: bold;
color: #fff;
background: url("shadebg.png") #444 bottom repeat-x;
height: 23px;
font-family: arial;
padding: 2.5px 5px 2.5px 5px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border: 1px solid #111;
}

div#komentar
{
position: absolute;
top: 70%;
left: 20px;
min-width: 100px;
font-size: 18px;
font-weight: bold;
color: #fff;
background: url("shadebg.png") #444 bottom repeat-x;
height: 23px;
font-family: arial;
padding: 2.5px 5px 2.5px 5px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border: 2px solid #111;
}

a#predchozi
{
position: absolute;
top: 35%;
left: 2px;
font-size: 100px;
color: #888;
text-decoration: none;
font-style: normal;
text-shadow: 0px 0px 20px #0F0;
}

a#dalsi
{
position: absolute;
top: 35%;
right: 2px;
font-size: 100px;
color: #888;
text-decoration: none;
font-style: normal;
text-shadow: 0px 0px 20px #0F0;
}
a#dalsi:hover , a#predchozi:hover
{text-shadow: 0px 0px 20px #F00;}

img.thumb , img.thumbp
{
max-height: 95%;
-moz-box-shadow: -1px 0px 10px 2.5px #000;
-webkit-box-shadow: -1px 0px 10px 2.5px #000;
box-shadow: -1px 0px 10px 2.5px #000;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
margin: 0px 5px 0px 5px;
border: 1px solid #000;
opacity: 0.8;
}

img#this
{
opacity: 0.5;
border: 1px solid #0F0;
}

img#this:hover , img.thumb:hover
{
opacity: 1;
border: 1px solid #F00;
}

Tyhle věci bastlím poslední dobou zásadně v noci. Líp mi to myslí a mám na to čas. :)

Kódovátko

úterý 10. července 2012

gallery.php - Pěkná galerie plná tykadel...

1 komentář: