Hogy hozhatok létre ilyen képgalériát?
Azt szeretném megoldani valahogyan hogy itt ( [link] ) az oldal közepén kis képkockák jöjjenek létre és ha rákattintok úgy jelenjen meg mint az alábbi oldalon: [link]
Segítségeket nagyon nagyon megköszönném!!
válasza:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript">
function nagyit(kep){
document.getElementById('nagykep').style.display = 'block';
document.getElementById('nagyitott').src = kep;
}
function bezar(){
document.getElementById('nagykep').style.display = 'none';
}
</script>
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="ie_fixes.css" media="screen" /><![endif]-->
<title>Website Template: Grunge Superstar (demo)</title>
</head>
<body>
<div id="paper_left">
<div id="paper_right">
<div id="layout_wrapper">
<div id="layout_container">
<div id="layout_content">
<div id="site_title">
<h1>Andor</h1>
<h2></h2>
</div>
<div id="header_image"></div>
<div class="navigation">
<ul>
<li><a href="index.html">Életrajz</a></li>
<li class="current_page_item"><a href="comments.html">Galéria</a></li>
<li><a href="page.html">Cikktár</a></li>
<li><a href="archives.html">Képtár</a></l
i>
<li><a href="empty.html">Elérhetőség</a><
/li>
</ul>
<div class="clearer"> </div>
</div>
<!-- Note: Uncomment this section to display subnavigation <div class="clearer"> </div> <div class="navigation" id="subnav"> <ul> <li><a href="#">Subnav item 1</a></li> <li><a href="#">Subnav item 2</a></li> <li><a href="#">Subnav item 3</a></li> </ul> <div class="clearer"> </div> </div> -->
<div id="main">
<div class="post">
<div class="post_top">
<div class="post_title">
<h2>Galéria</h2>
</div>
<div class="post_date"></div>
</div>
<div class="post_body">
<div class="nagykep" id="nagykep" name="nagykep" onclick="bezar()">
<br>
<br>
<img id="nagyitott" />
</div>
<?
$dir = "Galeria_Kepek";
if ($handle = opendir($dir)) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
echo "<img src=\"".$dir."/".$file."\" width=\"108\" height=\"80\" onclick=\"nagyit('".$dir."/".$file."')\" />";
}
}
}
else{
echo "hiba";
}
?>
</div>
<div class="post_metadata">
</div>
</div>
<div class="post">
<div class="post_metadata"></div>
</div>
<div class="post">
<div class="post_metadata">
<div id="bottom">
<div class="clearer"> </div>
</div>
</div>
</div>
</div>
<div id="footer"><br />
<div class="clearer"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
és comments.php legyen ne .html !!
style.css végéhez csapd hozzá ezt
.nagykep{
position:absolute;
top:0;
left:0;
text-align:center;
z-index:2;
background-color:#000;
width:100%;
height:100%;
opacity:0.7;
filter:alpha(opacity=70);
display:none;
}
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!