Simple gallery loading. Adding a Next link.
I'm working on a simple gallery and have run into a problem. The navigation is a long div with thumbnails, when you click on a thumbnail it loads the full size image into a container without refreshing the entire page. That works great and doesn't cause the thumbnails to reset. The problem I'm running into is how would I create a button to go to the next image based on the full size image that is currently loaded? The main problem I'm running into is how to define the current position so that the next image can be determined. Below is how I have the gallery built.
-
<script type="text/javascript" src="jscript/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p")
$(".scroll a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("p").html( largeAlt ); return false;
});
});
</script>
</head>
<body>
<img id="largeImg" src="" alt="" />
<br />
<p></p>
<?php
mysql_select_db($database, $dbconnection);
$sql = "SELECT * FROM Gallery";
$result = mysql_query($sql);
echo "<div class=\"scroll\">";
while($row = mysql_fetch_array($result)){
echo "<a href=\"gallery/".$row{'FileLocation'}."\" title=\"".$row{'ImageName'}."<br />".$row{'Description'}."\"><img src=\"gallery/thumbs/".$row{'ThumbLocation'}."\" alt=\"".$row{'ImageName'}."\" /></a>";
}
echo "</div>";
mysql_close($dbconnection);
?>
</body>