Pozdrav!
Nemam previše iskustva s jquerijem pa bih vas zamolio za pomoć. Složio sam jednostavnu galeriju koja kad se klikne na neku fotografiju tu istu fotografiju centrira, a pozadinu posivi. Sad bi volio dodat linkove slijedeća i prethodna da se ne mora svaki put vraćati na početnu stranicu i klikat na drugu fotografiju za veći prikaz.
Evo kod.
Zahvaljujem!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
//this.css("top", "25px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$(document).ready(function() {
$("#thumbnail img").click(function(e){
$("#background").css({"opacity" : "0.7"})
.fadeIn("fast");
$("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>")
.center()
.fadeIn("fast");
return false;
});
$(document).keypress(function(e){
if(e.keyCode==27){
$("#background").fadeOut("fast");
$("#large").fadeOut("fast");
}
});
$("#background").click(function(){
$("#background").fadeOut("fast");
$("#large").fadeOut("fast");
});
$("#large").click(function(){
$("#background").fadeOut("fast");
$("#large").fadeOut("fast");
});
});
</script>
<style>
.slike {
margin: 0.5em;
border: 1px solid #ccc;
padding: 1em;
font-size: 10px; }
img {
border:none;
}
#thumbnail img {
cursor: pointer;
}
#large {
display: none;
position: absolute;
background: #FFFFFF;
padding: 5px;
z-index: 10;
min-height: 200px;
min-width: 200px;
color: #336699;
}
#background{
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 1;
}
</style>
</head>
<body>
<?PHP
$folder="slike";
$akcija = opendir($folder);
$prazno=0;
while ($fajl = readdir($akcija)) {
if ($fajl != '.' && $fajl != '..')
{
$prazno++;
$fajlovi[$prazno]=$fajl;
}
}
closedir($akcija);
?>
<div align="center">
<div id="thumbnail">
<?php
foreach ($fajlovi as $img) {
?>
<a href="<? echo 'slike/'.$img ?>"><img class="slike" src="<? echo 'slike/'.$img ?>" height="160" width="240"/></a>
<?php
}
?>
<p id="large"></p>
</div>
<div id="large">
</div>
<div id="background">
</div>
</div>
</body>
</html>