Trying to get the thumbnails on the right spot
Posted: Fri Jul 01, 2011 12:45 pm
Hello,
i'm trying to make a image gallery were the thumbnails are in a sidebar and when someone click on a thumbnail the bigger picture appears on the right of the sidebar. I'll have the script from the tutorial from betterphp and i thought that the thumbnails where standing apart from the bigger picture. But now i want to style the thumbnails, but the thumbnails are not appearing where i thought they would appear but they appearing in the div id where the bigger picture should appear. I'll hope the code will help to make it more clear;
Can someone help me here?
Thanks, Robbedoesie
i'm trying to make a image gallery were the thumbnails are in a sidebar and when someone click on a thumbnail the bigger picture appears on the right of the sidebar. I'll have the script from the tutorial from betterphp and i thought that the thumbnails where standing apart from the bigger picture. But now i want to style the thumbnails, but the thumbnails are not appearing where i thought they would appear but they appearing in the div id where the bigger picture should appear. I'll hope the code will help to make it more clear;
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{ margin: 0; padding: 0; color: #999; background: #000; font-family: arial, sans-serif; } #sidebarleft{ border-top: solid 1px #404040; border-right: solid 1px #404040; border-bottom: solid 1px #3a3a3a; border-left: solid 1px #404040; padding: 0 auto; position:absolute; margin:10px 0 100px 0; left:8px; width: 175px; height:100%; overflow:hidden; float: left; background-color: #171717; } #thumbnails img{ position: fixed; margin: 10px 5px 20px 5px; } #image{ padding: 0px; width: 50%; float: left; position:fixed; margin-left:28%; top:30%; } </style> <title>Gallery</title> </head> <body> <div id="wrap"> <div id="sidebarleft"> <div id="thumbnails"> <?php if (isset($_GET['img'])){ if (file_exists($_GET['img'])){ ignore_user_abort(true); set_time_limit(120); ini_set('memory_limit', '512M'); $src_size = getimagesize($_GET['img']); if ($src_size === false){ die('Dit is geen afbeelding.'); } $thumb_width = 50; $thumb_height = 50; if ($src_size['mime'] === 'image/jpeg'){ $src = imagecreatefromjpeg($_GET['img']); }else if ($src_size['mime'] === 'image/png'){ $src = imagecreatefrompng($_GET['img']); }else if ($src_size['mime'] === 'image/gif'){ $src = imagecreatefromgif($_GET['img']); } $src_aspect = round(($src_size[0] / $src_size[1]), 1); $thumb_aspect = round(($thumb_width / $thumb_height), 1); if ($src_aspect < $thumb_aspect){ $new_size = array($thumb_width,($thumb_width / $src_size[0]) * $src_size[1]); $src_pos = array(0, ($new_size[1] - $thumb_height) / 2); }else if ($src_aspect > $thumb_aspect){ $new_size = array(($thumb_width / $src_size[1]) * $src_size[0], $thumb_height); $src_pos = array(($new_size[0] - $thumb_width) / 2, 0); }else{ $new_size = array($thumb_width, $thumb_height); $src_pos = array(0, 0); } if ($new_size[0] < 1) $new_size[0] = 1; if ($new_size[1] < 1) $new_size[1] = 1; $thumb = imagecreatetruecolor($thumb_width, $thumb_height); imagecopyresampled($thumb, $src, 0, 0, $src_pos[0], $src_pos[1], $new_size[0], $new_size[1], $src_size[0], $src_size[1]); if ($src_size['mime'] === 'image/jpeg'){ imagejpeg($thumb, "thumbs/{$_GET['img']}"); }else if ($src_size['mime'] === 'image/png'){ imagepng($thumb, "thumbs/{$_GET['img']}"); }else if ($src_size['mime'] === 'image/gif'){ imagegif($thumb, "thumbs/{$_GET['img']}"); } header("location: thumbs/{$_GET['img']}"); } die(); } if (is_dir('./thumbs') === false){ mkdir('./thumbs', 0744); } $images = glob('*.{jpg,JPG,jpeg,JPEG,png,PNG,gif,GIF}', GLOB_BRACE); ?> </div> </div> <div id="image"> <?php foreach ($images as $image){ if (file_exists("./thumbs/{$image}")){ echo "<a href=\"{$image}\"><img src=\"thumbs/{$image}\" alt=\"{$image}\" /></a>"; }else{ echo "<a href=\"{$image}\"><img src=\"?img={$image}\" alt=\"{$image}\" /></a>"; } } ?> </div> </div> </body> </html>I'll tryed to make a foreach loop for the thumbnails and chanche the foreach loop for the images but my php is not good enough and i can't figure it out how i can solve this problem.
Can someone help me here?
Thanks, Robbedoesie
. My wife, son, friends and family and of course myself will appreciative it.
