|
PHP - Can Anyone Help Me With Creating Some Thumbnails From My Originals For A Gallery
Hello,
I'm very new to working with images and headers, i've never done it at all even. But i've been trying to make a gallery its got about 150 photos in it. And i know there are much better ways than me resizeing and saving 150 thumbs. So ive tried to research and implement a code to make this so i can recall the original images url from a database and this will be the end viewable picture. And use php to create a thumbnail from the original, and then make that a link so it moves onto a lightbox viewer. this is the code i've got so far, i'm having problems with the headers. I know that they must be put first but when i move the header to the start of file it still errors. I'd really appreciate any help that people would be willing to give <!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 content="text/html; charset=utf-8" http-equiv="Content-type" /> <title></title> <link rel="alternate" type="application/rss+xml" title="" href="http://www.loukafinefinish.com/rss.xml" /> <link rel="stylesheet" type="text/css" href="css/portfolio.css" /> <link rel="stylesheet" type="text/css" href="css/portfolio_image.css" /> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/arial.js"></script> <script type="text/javascript" src="js/cuf_run.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/portfolio.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('.thumb a').lightBox(); }); </script> <style type="text/css"> /* Reset CSS */ html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } td, th, caption { font-weight: normal; text-align: left; } img, fieldset { border: 0; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em; list-style:square; } q:before, q:after { content:''; } /* End of CSS Reset*/ </style> </head> <body> <div id="content-wrapper"> <div id="header"> <h1><a id="logo" href="index.html"><span>Carpentery</span></a></h1> </div> <div id="navigation"> <div class="menu_nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="services.htm</ul> <--header above etc--> <?php echo '<div class="container"> <ul class="thumb">'; require_once('include/connect.php'); $display = 5; // Number of results if (isset($_GET['p']) && is_numeric($_GET['p'])) { // Determine number of pages $pages = $_GET['p']; } else { // Need to determine $q = "SELECT COUNT(id) FROM portfolio"; $r = @mysqli_query($dbc, $q); $row = @mysqli_fetch_array($r, MYSQLI_NUM); $records = $row[0]; // Calculate the number of pages... if($records > $display) { // More than 1 page $pages = ceil($records/$display); } else { $pages = 1; } } // End IF if (isset($_GET['s']) && is_numeric($_GET['s'])) { $start = $_GET['s']; } else { $start = 0; } // Query $q = "SELECT imageUrl FROM portfolio ORDER BY id LIMIT $start, $display"; $r = @mysqli_query($dbc, $q); while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) { $filename[] = $row['imageUrl']; foreach ($filename as $url) { // The file $filename = $url; // Set a maximum height and width $width = 100; $height = 100; header('Content-type: image/jpeg'); // Header is here for my example, but i have tried // placing it at the top of my page // Get new dimensions list($width_orig, $height_orig) = getimagesize($filename); $ratio_orig = $width_orig/$height_orig; if ($width/$height > $ratio_orig) { $width = $height*$ratio_orig; } else { $height = $width/$ratio_orig; } // Resample $image_p = imagecreatetruecolor($width, $height); $image = imagecreatefromjpeg($filename); imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig); echo '<li><a href=' . $row['imageUrl'] . '>' . imagejpeg($image_p, null, 100) . ' </a>'; } // End of FOR } // End while echo '</ul>'; // End of list of images mysqli_free_result($r); mysqli_close($dbc); if ($pages > 1) { // Make page links echo '<br /><p class="pagination">'; $current_page = ($start/$display) + 1; // What page script is on if($current_page != 1) { // Make previous button echo '<a href="portfolio.php?s=' . ($start - $display) . '&p=' . '">Previous</a> '; } // Make all the pages numbered for ($i = 1; $i <= $pages; $i++) { if ($i != $current_page) { echo '<a href="portfolio.php?s=' . (($display * ($i - 1))) . '&p=' . $pages . '">' . $i . '</a> '; } else { echo $i . ' '; } } // END of FOR loop // If no last page, make net button if ($current_page != $pages) { echo '<a href="portfolio.php?s=' . ($start + $display) . '&p=' . $pages . '">Next</a>'; } echo '</p>'; } // End page links ?> <!--Footer etc--> </html> This is my overall page, but as the page had some html involved i thought it best to post some of it. I'm not convinced at all that my method for iterating through the database for the image urls allows me to then iterate this into the $filename for the image resize. If any one could help i'd appreciate it Thank you Similar TutorialsDoes anybody know a good tutorial for creating thumbnails for these three file extensions "jpg, gif and png" in PHP?
I am only finding ones for "jpg".
Hi all, Could someone help me add a thumbnail script to the below that works on scaling it down to 200px x 133px. I guess it is not that hard. <?php $destination='aircraft/'.$reg."1.jpg"; $temp_file = $_FILES['image']['tmp_name']; move_uploaded_file($temp_file,$destination); ?> Thanks Hello. I am rolling my first-ever e-commerce site, and could use some help on designing a product gallery. My site will be selling books and guides, and similar to what you might see on Amazon or Barnes & Noble, I want to create a product gallery which displays all products for a given category. For simplicity, let's say that I am only selling paper books, and that is what I want to display - so for the purposes of this conversation, no need to filter on product type. When a user clicks on the product catalog, I was thinking of simply displaying all products (e.g. eBooks) in gallery containing thumbnails in a grid arrangement. The user would click on the thumbnail - which would be the cover of the book - and then be taken to a product page which would have all of the details, including: a larger thumbnail of the book, book title, description, price, author, etc. I suppose I could have a test title and description below each thumbnail? Anyways, I am a little uncertain of how all of this would work from a technical standpoint?! I guess I was thinking that each thumbnail would have a link behind it, which would then load my "product_details.php" page AND pass along something like a "ProductID" in the URL, so that my product_details.php" script could query my database and pull up the book's details. How does that sound? I look forward to hearing what you PHP gurus have to say!! 🙂
you can see it at the link below on my site. The generated thumbnails look terrible but I don't know why. Any help greatly appreciated. thank you . (code below of upload script and viewgallery script) http://ealike.com/gallery/viewgallery.php?cid=1 upload script Code: [Select] <?php include("config.inc.php"); // initialization $result_final = ""; $counter = 0; // List of our known photo types $known_photo_types = array( 'image/pjpeg' => 'jpg', 'image/jpeg' => 'jpg', 'image/gif' => 'gif', 'image/bmp' => 'bmp', 'image/x-png' => 'png' ); // GD Function List $gd_function_suffix = array( 'image/pjpeg' => 'JPEG', 'image/jpeg' => 'JPEG', 'image/gif' => 'GIF', 'image/bmp' => 'WBMP', 'image/x-png' => 'PNG' ); // Fetch the photo array sent by preupload.php $photos_uploaded = $_FILES['photo_filename']; // Fetch the photo caption array $photo_caption = $_POST['photo_caption']; while( $counter <= count($photos_uploaded) ) { if($photos_uploaded['size'][$counter] > 0) { if(!array_key_exists($photos_uploaded['type'][$counter], $known_photo_types)) { $result_final .= "File ".($counter+1)." is not a photo<br />"; } else { mysql_query( "INSERT INTO gallery_photos(`photo_filename`, `photo_caption`, `photo_category`) VALUES('0', '".addslashes($photo_caption[$counter])."', '".addslashes($_POST['category'])."')" ); $new_id = mysql_insert_id(); $filetype = $photos_uploaded['type'][$counter]; $extention = $known_photo_types[$filetype]; $filename = $new_id.".".$extention; mysql_query( "UPDATE gallery_photos SET photo_filename='".addslashes($filename)."' WHERE photo_id='".addslashes($new_id)."'" ); // Store the orignal file copy($photos_uploaded['tmp_name'][$counter], $images_dir."/".$filename); // Let's get the Thumbnail size $size = GetImageSize( $images_dir."/".$filename ); if($size[0] > $size[1]) { $thumbnail_width = 100; $thumbnail_height = (int)(100 * $size[1] / $size[0]); } else { $thumbnail_width = (int)(100 * $size[0] / $size[1]); $thumbnail_height = 100; } // Build Thumbnail with GD 1.x.x, you can use the other described methods too $function_suffix = $gd_function_suffix[$filetype]; $function_to_read = "ImageCreateFrom".$function_suffix; $function_to_write = "Image".$function_suffix; // Read the source file $source_handle = $function_to_read ( $images_dir."/".$filename ); if($source_handle) { // Let's create an blank image for the thumbnail $destination_handle = ImageCreate ( $thumbnail_width, $thumbnail_height ); // Now we resize it ImageCopyResized( $destination_handle, $source_handle, 0, 0, 0, 0, $thumbnail_width, $thumbnail_height, $size[0], $size[1] ); } // Let's save the thumbnail $function_to_write( $destination_handle, $images_dir."/tb_".$filename ); ImageDestroy($destination_handle ); // $result_final .= "<img src='".$images_dir. "/tb_".$filename."' /> File ".($counter+1)." Added<br />"; } } $counter++; } // Print Result echo <<<__HTML_END <html> <head> <title>Photos uploaded</title> </head> <body> $result_final </body> </html> __HTML_END; ?> DISPLAY THUMBNAILS AND IMAGES SCRIPT Code: [Select] <?php include("config.inc.php"); // initialization $result_array = array(); $counter = 0; $cid = (int)($_GET['cid']); $pid = (int)($_GET['pid']); // Category Listing if( empty($cid) && empty($pid) ) { $number_of_categories_in_row = 4; $result = mysql_query( "SELECT c.category_id,c.category_name,COUNT(photo_id) FROM gallery_category as c LEFT JOIN gallery_photos as p ON p.photo_category = c.category_id GROUP BY c.category_id" ); while( $row = mysql_fetch_array( $result ) ) { $result_array[] = "<a href='viewgallery.php?cid=".$row[0]."'>".$row[1]."</a> "."(".$row[2].")"; } mysql_free_result( $result ); $result_final = "<tr>\n"; foreach($result_array as $category_link) { if($counter == $number_of_categories_in_row) { $counter = 1; $result_final .= "\n</tr>\n<tr>\n"; } else $counter++; $result_final .= "\t<td>".$category_link."</td>\n"; } if($counter) { if($number_of_categories_in_row-$counter) $result_final .= "\t<td colspan='".($number_of_categories_in_row-$counter)."'> </td>\n"; $result_final .= "</tr>"; } } // Thumbnail Listing else if( $cid && empty( $pid ) ) { $number_of_thumbs_in_row = 5; $result = mysql_query( "SELECT photo_id,photo_caption,photo_filename FROM gallery_photos WHERE photo_category='".addslashes($cid)."'" ); $nr = mysql_num_rows( $result ); if( empty( $nr ) ) { $result_final = "\t<tr><td>No Category found</td></tr>\n"; } else { while( $row = mysql_fetch_array( $result ) ) { $result_array[] = "<a href='viewgallery.php?cid=$cid&pid=".$row[0]."'><img src='".$images_dir."/tb_".$row[2]."' border='0' alt='".$row[1]."' /></a>"; } mysql_free_result( $result ); $result_final = "<tr>\n"; foreach($result_array as $thumbnail_link) { if($counter == $number_of_thumbs_in_row) { $counter = 1; $result_final .= "\n</tr>\n<tr>\n"; } else $counter++; $result_final .= "\t<td>".$thumbnail_link."</td>\n"; } if($counter) { if($number_of_photos_in_row-$counter) $result_final .= "\t<td colspan='".($number_of_photos_in_row-$counter)."'> </td>\n"; $result_final .= "</tr>"; } } } // Full Size View of Photo else if( $pid ) { $result = mysql_query( "SELECT photo_caption,photo_filename FROM gallery_photos WHERE photo_id='".addslashes($pid)."'" ); list($photo_caption, $photo_filename) = mysql_fetch_array( $result ); $nr = mysql_num_rows( $result ); mysql_free_result( $result ); if( empty( $nr ) ) { $result_final = "\t<tr><td>No Photo found</td></tr>\n"; } else { $result = mysql_query( "SELECT category_name FROM gallery_category WHERE category_id='".addslashes($cid)."'" ); list($category_name) = mysql_fetch_array( $result ); mysql_free_result( $result ); $result_final .= "<tr>\n\t<td> <a href='viewgallery.php'>Categories</a> > <a href='viewgallery.php?cid=$cid'>$category_name</a></td>\n</tr>\n"; $result_final .= "<tr>\n\t<td align='center'> <br /> <img src='".$images_dir."/".$photo_filename."' border='0' alt='".$photo_caption."' /> <br /> $photo_caption </td> </tr>"; } } // Final Output echo <<<__HTML_END <html> <head> <title>Gallery View</title> </head> <body> <table width='100%' border='0' align='center' style='width: 100%;'> $result_final </table> </body> </html> __HTML_END; ?> Hello, I have a file upload site for my IRC channel, and I'm using timthumb to generate thumbnails. The problem is, I allow users to upload other than image files and they obviously show as blank now on my website. Any ideas how I could show custom made thumbnails for files such as .rar? i.e. user uploads a rar file, and my site instead trying to do this: Code: [Select] <div class='tiedosto'><a href='up/rss.rar' class='tiedosto screenshot' rel='up/rss.rar' ><img src='thumb.php?src=up/rss.rar&h=100&w=100&zc=1' alt=''></a></div>it would show this Code: [Select] <div class='tiedosto'><a href='up/rss.rar' class='tiedosto screenshot' rel='up/rss.rar' ><img src='thumb.php?src=thumb/rar.png&h=100&w=100&zc=1' alt=''></a></div>or just Code: [Select] <div class='tiedosto'><a href='up/rss.rar' class='tiedosto screenshot' rel='up/rss.rar' ><img src='thumb/rar.png'></a></div> Thanks. I am looking at the ImageMagick library to create thumbnails from about 800 pdf files. I'd like to use php because the information needs to be stored in a database. Is ImageMagick up to the task? Would you recommend an alternative library? Any other advice is appreciated. Thanks, -Brian This topic has been moved to Third Party PHP Scripts. http://www.phpfreaks.com/forums/index.php?topic=358438.0 Hi guys, I have a simple code below which allows to me to upload image to a file directory and save the location of my file in database the only thing i dont understand is how to 1-resize the images 2- create a thumbnail while uploading 3- allow only jpeg & JPG files to be uploaded with 200kb max also, could you tell me what is the best size i can store the images in? thanks in advance //image1 $nameone=$_FILES['myfileone']['name']; $tmp_name= $_FILES['myfileone']['tmp_name']; if ($nameone) { $locationone="images/$nameone"; move_uploaded_file($tmp_name, $locationone); $image1 = mysql_query ("UPDATE user SET image1='$locationone'"); } Hi, You may noticed that i've posted before and closed them. It was too hard. I've been searching around for something else and i found it. But it's not quite perfect. What i want to do is make thumbnails smaller (i can do that on my own) but displaying the bigger picture above the thumbnails. And aligning the thumbnails next to each other. So how do i do that? The current code: <?php $result = mysql_query("SELECT reference FROM user_photos WHERE`profile_id`='".$row['id']."'"); while ($row2 = mysql_fetch_array($result, MYSQL_ASSOC)) { echo "<a href=\"".$_GET['username']."/pics/".$row2['reference']."\"> <img src=\"".$_GET['username']."/pics/thumbs/".$row2['reference']."\"></a><br/><br/>"; } } ?> The files are refering to the mysql in reference but are actually in a subfolder with the username on the server. I hope somebody wants to help me, Best regards, Martijn (the netherlands) Hello, I have been trying to make this work for a while but nothing gives. I'm a bit of a PHP noob, but not even a teacher at school could help me. What I need is something like this page: http://marcandshawn.glrdmd.eu/ian/designers2.php?d=2 So when you click on a thumbnail, you see the bigger image above it, but stay on the same page. My code: Code: [Select] <?php include('connection.php'); $query="SELECT * FROM person"; $result=mysql_query($query); ?> ^ reestablishing connections. some html after that. and for the chosen main image: Code: [Select] <?php while($row = mysql_fetch_array( $result )) { echo "<img src='uploads/$row[image1]' style='max-width:300px;'/>"; } ?> ^ doesn't work. row[image1] contains the images. Code: [Select] <?php { while($row = mysql_fetch_array( $result )){ echo "<a href='index.php?id=$row[id]' style='width:100px; height:100px;'/><img src='uploads/$row[thumb]' style='width:125px; height:90px; border:0px;' /></a>"; } } ?> Supposed thumbnails. If someone could help, it would be greatly appreciated. hey guys i just got done integrating a gallery script into my log in. it works great however i am trying to find out how to make it so only the logged in user can view there pics and not anyone else currently i have my table set up like this ID USERNAME TIMESTAMP CAPTION is there any way possible to make the images uploaded to the /gallery/ folder viewable by the logged in user and no one else Hi guys, I am geeting images from a query but can not figure out how to show these images in a css gallery, I have found links of css gallery but dont know how to embed it or tell css to work with php, i am a newbie and cant figure it out this is my php code where i get the images listed echo '<table width="40">'; $images=mysql_query("SELECT * FROM img WHERE refimage='$ref'"); while($row = mysql_fetch_array($images)) { $image=$row['image']; $thumb=$row['thumb']; // echo "<a href='$image' rel='lightbox[roadtrip]'><img src= '$thumb' width='60' height='40' alt='$title'>"; echo "<img src= '$thumb' width='60' height='40' alt='$title'>"; } but if i want to have a css gallery like http://www.cssplay.co.uk/menu/vertical-slide.html which the css and html code is as below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Stu Nicholls | CSSplay | A Vertical Scrolling Photograph Gallery</title> <meta name="Author" content="Stu Nicholls" /> <meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, gallery, galleries, photo, albums, slide, show, scrolling, vertical " /> <meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" /> <meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" /> <meta http-equiv="imagetoolbar" content="no" /> <link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" /> <meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0) gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" /> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> <link rel="icon" href="../favicon.ico" type="image/ico" /> <style type="text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <link rel="stylesheet" media="all" type="text/css" href="../css/default.css" /> <style type="text/css"> /* defaults required for IE */ a, a:visited, a:hover, a:active, a:focus {color:#000;} #holder {position:relative; background:transparent url(vertical-slide/photographer.jpg) 90px 0 no-repeat; margin-bottom:10px; width:750px; height:400px;} #scrollbox {padding:0; margin:0; width:110px; list-style:none; height:360px; overflow:auto; float:right;} #scrollbox li {float:left;} #scrollbox a {display:block; color:#999; text-decoration:none; border:1px solid #fff; width:75px; height:56px; float:left; padding:5px; font-family:"trebuchet ms", sans-serif; font-size:24px; text-align:center;} #scrollbox a.slidea {background:url(vertical-slide/pic1t.jpg) no-repeat center center;} #scrollbox a.slideb {background:url(vertical-slide/pic2t.jpg) no-repeat center center;} #scrollbox a.slidec {background:url(vertical-slide/pic3t.jpg) no-repeat center center;} #scrollbox a.slided {background:url(vertical-slide/pic4t.jpg) no-repeat center center;} #scrollbox a.slidee {background:url(vertical-slide/pic5t.jpg) no-repeat center center;} #scrollbox a.slidef {background:url(vertical-slide/pic6t.jpg) no-repeat center center;} #scrollbox a.slideg {background:url(vertical-slide/pic7t.jpg) no-repeat center center;} #scrollbox a.slideh {background:url(vertical-slide/pic8t.jpg) no-repeat center center;} #scrollbox a.slidei {background:url(vertical-slide/pic9t.jpg) no-repeat center center;} #scrollbox a.slidej {background:url(vertical-slide/pic10t.jpg) no-repeat center center;} #scrollbox a.slidek {background:url(vertical-slide/pic11t.jpg) no-repeat center center;} #scrollbox a.slidel {background:url(vertical-slide/pic12t.jpg) no-repeat center center;} #scrollbox a span {display:block; position:absolute; left:-9999px; top:0;} #scrollbox a span img {border:0;} #scrollbox a:hover {border:1px solid #888;} #scrollbox a:hover span {width:480px; height:400px; left:90px; background:#fff; z-index:100;} #scrollbox a:active {border:1px solid #000;} #scrollbox a:focus {border:1px solid #000; outline:0;} * html #scrollbox a:active span {width:480px; height:400px; top:0; left:90px; color:#000; background:#fff; z-index:-1;} #scrollbox a:focus span {width:480px; height:400px; top:0; left:90px; color:#000; background:#fff; z-index:10; outline:0;} </style> </head> /////////////////////////////// AND THIS IS THE HTML <div id="holder"> <ul id="scrollbox"> <li><a class="slidea" href="#nogo"><span><img src="vertical-slide/pic1.jpg" alt="" /><br />Butterflies</span></a></li> <li><a class="slideb" href="#nogo"><span><img src="vertical-slide/pic2.jpg" alt="" /><br />Shy</span></a></li> <li><a class="slidec" href="#nogo"><span><img src="vertical-slide/pic3.jpg" alt="" /><br />Otter</span></a></li> <li><a class="slided" href="#nogo"><span><img src="vertical-slide/pic4.jpg" alt="" /><br />Looking up</span></a></li> <li><a class="slidee" href="#nogo"><span><img src="vertical-slide/pic5.jpg" alt="" /><br />Monkey</span></a></li> <li><a class="slidef" href="#nogo"><span><img src="vertical-slide/pic6.jpg" alt="" /><br />Nuts</span></a></li> <li><a class="slideg" href="#nogo"><span><img src="vertical-slide/pic7.jpg" alt="" /><br />Pelicans</span></a></li> <li><a class="slideh" href="#nogo"><span><img src="vertical-slide/pic8.jpg" alt="" /><br />Kiwi</span></a></li> <li><a class="slidei" href="#nogo"><span><img src="vertical-slide/pic9.jpg" alt="" /><br />Lizard</span></a></li> <li><a class="slidej" href="#nogo"><span><img src="vertical-slide/pic10.jpg" alt="" /><br />Paddling</span></a></li> <li><a class="slidek" href="#nogo"><span><img src="vertical-slide/pic11.jpg" alt="" /><br />Trees</span></a></li> <li><a class="slidel" href="#nogo"><span><img src="vertical-slide/pic12.jpg" alt="" /><br />Butterfly</span></a></li> </ul> </div> thanks in advance guys Hi guys, I was wondering how to do this, I have the code below where it gets my images from database and it lists them however I need to have a gallery like this http://www.cssplay.co.uk/menu/vertical-slide.html <?php echo '<table width="40">'; $images=mysql_query("SELECT * FROM img WHERE refimage='$ref'"); while($row = mysql_fetch_array($images)) { $image=$row['image']; $thumb=$row['thumb']; echo "<a href='$image' rel='lightbox[roadtrip]'><img src= '$thumb' width='60' height='40' alt='$title'>"; } the code for CSS and html is as below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Stu Nicholls | CSSplay | A Vertical Scrolling Photograph Gallery</title> <meta name="Author" content="Stu Nicholls" /> <meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, gallery, galleries, photo, albums, slide, show, scrolling, vertical " /> <meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" /> <meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" /> <meta http-equiv="imagetoolbar" content="no" /> <link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" /> <meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0) gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" /> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> <link rel="icon" href="../favicon.ico" type="image/ico" /> <style type="text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <link rel="stylesheet" media="all" type="text/css" href="../css/default.css" /> <style type="text/css"> /* defaults required for IE */ a, a:visited, a:hover, a:active, a:focus {color:#000;} #holder {position:relative; background:transparent url(vertical-slide/photographer.jpg) 90px 0 no-repeat; margin-bottom:10px; width:750px; height:400px;} #scrollbox {padding:0; margin:0; width:110px; list-style:none; height:360px; overflow:auto; float:right;} #scrollbox li {float:left;} #scrollbox a {display:block; color:#999; text-decoration:none; border:1px solid #fff; width:75px; height:56px; float:left; padding:5px; font-family:"trebuchet ms", sans-serif; font-size:24px; text-align:center;} #scrollbox a.slidea {background:url(vertical-slide/pic1t.jpg) no-repeat center center;} #scrollbox a.slideb {background:url(vertical-slide/pic2t.jpg) no-repeat center center;} #scrollbox a.slidec {background:url(vertical-slide/pic3t.jpg) no-repeat center center;} #scrollbox a.slided {background:url(vertical-slide/pic4t.jpg) no-repeat center center;} #scrollbox a.slidee {background:url(vertical-slide/pic5t.jpg) no-repeat center center;} #scrollbox a.slidef {background:url(vertical-slide/pic6t.jpg) no-repeat center center;} #scrollbox a.slideg {background:url(vertical-slide/pic7t.jpg) no-repeat center center;} #scrollbox a.slideh {background:url(vertical-slide/pic8t.jpg) no-repeat center center;} #scrollbox a.slidei {background:url(vertical-slide/pic9t.jpg) no-repeat center center;} #scrollbox a.slidej {background:url(vertical-slide/pic10t.jpg) no-repeat center center;} #scrollbox a.slidek {background:url(vertical-slide/pic11t.jpg) no-repeat center center;} #scrollbox a.slidel {background:url(vertical-slide/pic12t.jpg) no-repeat center center;} #scrollbox a span {display:block; position:absolute; left:-9999px; top:0;} #scrollbox a span img {border:0;} #scrollbox a:hover {border:1px solid #888;} #scrollbox a:hover span {width:480px; height:400px; left:90px; background:#fff; z-index:100;} #scrollbox a:active {border:1px solid #000;} #scrollbox a:focus {border:1px solid #000; outline:0;} * html #scrollbox a:active span {width:480px; height:400px; top:0; left:90px; color:#000; background:#fff; z-index:-1;} #scrollbox a:focus span {width:480px; height:400px; top:0; left:90px; color:#000; background:#fff; z-index:10; outline:0;} </style> </head> /////////////////////////////// AND THIS IS THE HTML <div id="holder"> <ul id="scrollbox"> <li><a class="slidea" href="#nogo"><span><img src="vertical-slide/pic1.jpg" alt="" /><br />Butterflies</span></a></li> <li><a class="slideb" href="#nogo"><span><img src="vertical-slide/pic2.jpg" alt="" /><br />Shy</span></a></li> <li><a class="slidec" href="#nogo"><span><img src="vertical-slide/pic3.jpg" alt="" /><br />Otter</span></a></li> <li><a class="slided" href="#nogo"><span><img src="vertical-slide/pic4.jpg" alt="" /><br />Looking up</span></a></li> <li><a class="slidee" href="#nogo"><span><img src="vertical-slide/pic5.jpg" alt="" /><br />Monkey</span></a></li> <li><a class="slidef" href="#nogo"><span><img src="vertical-slide/pic6.jpg" alt="" /><br />Nuts</span></a></li> <li><a class="slideg" href="#nogo"><span><img src="vertical-slide/pic7.jpg" alt="" /><br />Pelicans</span></a></li> <li><a class="slideh" href="#nogo"><span><img src="vertical-slide/pic8.jpg" alt="" /><br />Kiwi</span></a></li> <li><a class="slidei" href="#nogo"><span><img src="vertical-slide/pic9.jpg" alt="" /><br />Lizard</span></a></li> <li><a class="slidej" href="#nogo"><span><img src="vertical-slide/pic10.jpg" alt="" /><br />Paddling</span></a></li> <li><a class="slidek" href="#nogo"><span><img src="vertical-slide/pic11.jpg" alt="" /><br />Trees</span></a></li> <li><a class="slidel" href="#nogo"><span><img src="vertical-slide/pic12.jpg" alt="" /><br />Butterfly</span></a></li> </ul> </div> What i tried to do was to add div for each image listed from my database, but it wont work. Do you know whats the best way to embed this css to the php query i have? thanks in advance guys. Hello, I am trying to make a picture gallery for my website but i am having a problem with the size of the pictures. When i go to the picture gallery i want to see the pictures that i have stored in the pictures file, in a small scale and not in full resolution. My problem is that i have managed to create this picture gallery but i have failed in seeing the pictures in a small scale. So when i go to the picture gallery i see all of my pictures in full resolution. Imagine how that is. The code i use is: Quote <?php $pics= ("pics/"); $cols= 4; if ($handle = opendir($pics)) { while (FALSE !== ($file= readdir($handle))) { if ($file != "." && $file != ".." && $file != rtrim($pics, "/")) { $files[]=$file; } } closedir($handle); } $colsCtr= 0; echo '<table width="100%" cellspacing="10"><tr>'; foreach($files as $file) { if ($colsCtr%$cols == 0) echo '</tr><tr><td colspan="2"><hr /></td></tr><tr>'; echo '<td align="center"><a href="' . $pics . $file . '"><img src="' . $pics . $file . '" /></a></td>'; $colsCtr++; } echo '</table>' . "\r\n"; ?> Can some one please tell me what is wrong with the code? Can you please tell me what to add or what to remove so that this works? Please not that i want to see the pictures at small scale first and when i click on each picture see the full resolution. Thanks in advance. My gallery is making thumbs fine and listing them aswell. The pagination works fine but i cannot handle with these errors whose show under the thumbs in webiste. Seems like the code in else if statement is missing arguments :S, Let's take a look ! Warning: Missing argument 1 for makeThumb(), called in D:\xampp\htdocs\website\galerija\index.php on line 167 and defined in D:\xampp\htdocs\website\galerija\index.php on line 136 Warning: Missing argument 2 for makeThumb(), called in D:\xampp\htdocs\website\galerija\index.php on line 167 and defined in D:\xampp\htdocs\website\galerija\index.php on line 136 Warning: imagesx() expects parameter 1 to be resource, null given in D:\xampp\htdocs\website\galerija\index.php on line 145 Warning: imagesy() expects parameter 1 to be resource, null given in D:\xampp\htdocs\website\galerija\index.php on line 145 Warning: Division by zero in D:\xampp\htdocs\website\galerija\index.php on line 150 Warning: imagecreatetruecolor() [function.imagecreatetruecolor]: Invalid image dimensions in D:\xampp\htdocs\website\galerija\index.php on line 152 Warning: imagecopyresampled() expects parameter 1 to be resource, boolean given in D:\xampp\htdocs\website\galerija\index.php on line 153 Warning: imagedestroy() expects parameter 1 to be resource, boolean given in D:\xampp\htdocs\website\galerija\index.php on line 161 Warning: imagedestroy() expects parameter 1 to be resource, null given in D:\xampp\htdocs\website\galerija\index.php on line 162 That's the "problem" code which appears under pictures function getPictures() { global $page, $per_page, $has_previous, $has_next; if ( $handle = opendir(".") ) { $lightbox = rand(); echo '<ul id="pictures">'; $count = 0; $skip = $page * $per_page; if ( $skip != 0 ) $has_previous = true; while ( $count < $skip && ($file = readdir($handle)) !== false ) { if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) $count++; } $count = 0; while ( $count < $per_page && ($file = readdir($handle)) !== false ) { if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) { if ( ! is_dir('thumbs') ) { mkdir('thumbs'); } if ( ! file_exists('thumbs/'.$file) ) { makeThumb( $file, $type ); } echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">'; echo '<img src="thumbs/'.$file.'" alt="" />'; echo '</a></li>'; $count++; } } echo '</ul>'; while ( ($file = readdir($handle)) !== false ) { if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) { $has_next = true; break; } } } } function getPictureType($file) { $split = explode('.', $file); $ext = $split[count($split) - 1]; if ( preg_match('/jpg|jpeg/i', $ext) ) { return 'jpg'; } else if ( preg_match('/png/i', $ext) ) { return 'png'; } else if ( preg_match('/gif/i', $ext) ) { return 'gif'; } else { return ''; } } function makeThumb($file, $type) { global $max_width, $max_height; if ( $type == 'jpg' ) { $src = imagecreatefromjpeg($file); } else if ( $type == 'png' ) { $src = imagecreatefrompng($file); } else if ( $type == 'gif' ) { $src = imagecreatefromgif($file); } if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) { $newW = $oldW * ($max_width / $oldH); $newH = $max_height; } else { $newW = $max_width; $newH = $oldH * ($max_height / $oldW); } $new = imagecreatetruecolor($newW, $newH); imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH); if ( $type == 'jpg' ) { imagejpeg($new, 'thumbs/'.$file); } else if ( $type == 'png' ) { imagepng($new, 'thumbs/'.$file); } else if ( $type == 'gif' ) { imagegif($new, 'thumbs/'.$file); } imagedestroy($new); imagedestroy($src); } And these are my 3 functions i use to do that all i think no more source is needed even those 2 functions aren't needed, the only problem as i see is in makeThumb function Hi All, I am looking for a php script that i can use to create a php image gallery for a client. The script needs to allow the client to upload an image (any image type) jpg,gif,png etc and then a thumbnail needs to be created.So there will be two images the original and the thumbnail which should be stored in separate directories. I know that this has been done before and i did some google searches ,but cant find anything that i need. Thanks in advance. Kind Regards, Nathan how to create php gallery with pagination and also add new images that control by admin
|
|||||||