|
PHP - Jquery Gallery
Similar TutorialsHi,
I am using the following script which displays images in a gallery.
https://feimosi.gith...baguetteBox.js/
However, when it gets to the last image, it doesn't scroll back to the beginning and also stating at teh first image, doesn't let you scroll to the last image.
Is there a way I can make the gallery loop in both directions? I'm guessing I can add a jQuery option?
<script>Thanks! 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 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. 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 I don't know if this is the right section but I would like to have my gallery open up in the content section. For example I have a page which has the gallery links on the navigation side and I want it to open in the content side. I have only been able to open it up in a new page. I'm using php to get the images. Here is my default.php code: Code: [Select] <head> <title><?php echo $this->get_title(); ?></title> <meta name="Description" content="<?php echo $this->get_description(); ?>" /> <meta name="Keywords" content="<?php echo $this->get_keywords(); ?>" /> <title>Welcome to the Framework</title> <?php $this->_page->add_javascript('/vendor/lightbox/js/jquery.lightbox-0.5.min.js'); $this->_page->add_stylesheet('/vendor/lightbox/css/jquery.lightbox-0.5.css'); $this->_page->add_stylesheet('/css/default.css'); echo $this->page('stylesheets'); echo $this->page('javascripts'); ?> </head> <body> <div id="container"> <div id="banner"> <h1> Welcome to the Grada djeri </h1> </div> <div id="nav"> <?php echo $this->page('view'); ?> </div> <div id="content"> <?php ?> </div> <div id="footer"> <a href="/pages/about_me">About Me</a> <a href="/pages/contacts">Contacts</a> <a href="/pages/home">Home</a> </div> </div> </body> </html> and here is my home.php Code: [Select] <!-- <h2>This is the homepage</h2>--> <?php //echo $this->_params['item']['content']; // how to loop through an images and gallery name and put it into a list foreach ($this->_params['list'] as $gallery ){ $gallery_name = $gallery['name']; $image = $gallery['image']; echo "<table>"; echo "<tr>"; echo "<td>"; echo "<a href=/galleries/view/".$gallery['id']."><img src='/image.php?path=$image&h=50&w=50'></a>"; echo "</td>"; echo "</tr>"; echo "</table>"; } ?> Hi guys, Just after a bit of advice really. I want to create an image gallery. Currently, my images (which are sourced from a DB) are brought about in a loop and set in their own div, side by side. I was just thinking though: would it be better to do this with an array? Its a bit difficult coding for this just using the basic loop. Anyone have any suggestions to make this better? PS, here is my current code: $sql = "SELECT * FROM imagegal"; if ($result = mysql_query($sql)) { if (mysql_num_rows($result)) { while($row = mysql_fetch_array($result)){ echo '<span class="imagegal">'; echo '<span><img src="' . $row['image'] . '"</span>'; echo '</span>'; }}} 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 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 how to create php gallery with pagination and also add new images that control by admin
This topic has been moved to PHP Freelancing. http://www.phpfreaks.com/forums/index.php?topic=342417.0 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. Hi , I got "High Slide Script" for making photogallery .. The problem is that code has no admin panel to upload images and their description . All you make that you write image path into html code of its index page.. I thought to make admin panel by a small database you enter the image path uploaded and description . and the code has a loop to read this data throught a php code . I attached what I made . The problem is : why my images doesn't appear ??? NB: the original script in the file named : highslide-custom-example.htm my code is in the file : highslide-custom-example.php I attached the DB also.. Here is the attachments : http://www.seed-share.com/6mghkdpg0ywj Thanks The code below works well and shows all the images in a folder in reverse chronological order. But I want to limit it to a certain number of images . This would enable me to have several pages of images. So the first page would display the latest 50 images, the second page would show 50-100, and the third, 100-150. Any helps on how to modify? I can create the pages manually. I just want to know how to limit the current page to a certain range. Code: [Select] <?php //Your folder $files = glob("images/*.*"); function sortnewestfilesfirst($a, $b) { return filemtime($b) - filemtime($a); } usort($files, "sortnewestfilesfirst"); $colCnt=0; echo '<table border="0" style="width:1000px;">'; for ($i=0; $i<count($files); $i++) { $colCnt++; if ($colCnt==1) echo '<tr>'; echo '<td width="20%" style="font-size:8.5px; font-family:arial">'; $num = $files[$i]; echo ' <div class="ImgBorder"> <div class="clipout"> <div class="clipin"> <a href="' . $num . '" rel="lightbox[all]"><img class="thumb ImgBorder" src="'.$num.'"> </a> </div> </div></div>'." "; echo '</td>'; if ($colCnt==6) { echo '</tr>'; $colCnt=0; } } echo '</table>'; ?> Lets say ive got a function like this one Code: [Select] function getPictures() { global $max_width, $max_height; if ( $handle = opendir(".") ) { $lightbox = rand(); echo '<ul id="pictures">'; while ( ($file = readdir($handle)) !== false ) { if ( !is_dir($file) ) { $split = explode('.', $file); $ext = $split[count($split) - 1]; if ( ($type = getPictureType($ext)) == '' ) { continue; } if ( ! is_dir('thumbs') ) { mkdir('thumbs'); } if ( ! file_exists('thumbs/'.$file) ) { 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); } echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">'; echo '<img src="thumbs/'.$file.'" alt="" />'; echo '</a></li>'; } } echo '</ul>'; } }What it does is: It checks for files(images) in a directory, check for file types jpg, png or gif cuz I work on gd library and it supports only these 3 type of images and make thumbnails. My problem is I cant change the directory of images, after I do that I just got error or it doesnt read images at all. I tried Code: [Select] $dir = "/galerija/"; if ( $handle = opendir($dir) ) But nothing happens, it just leaves me blank space(as I said above it doesnt read images at all) This is my code for a 'gallery' so to call on my website (http://www.thenourishedcanuck.com/blog/). I would like to introduce a hyperlink, so that I can link to an article, in with the caption. It works for the original image, but I would like to add different links to the captionbox when each image is called. (I.e. see the image that says 'why won't this work' - how can i make that sentence a hyperlink; something like that) Any help or suggestions would be greatly appreciated! p.s. this gallery only works on Firefox and Chrome; not on Internet Explorer Here is the code for that portion: <div> <div id="gallery"> <div id="gallery-wrapper"><img class="output" src="<?php bloginfo('template_url'); ?>/images/img01.jpg" width="512" height="202" alt="" /> <div class="caption-box"> <span class="caption">Nourished Canuck</span><span class="caption2">Welcome to the Nourished Canuck.</span></div> <br class="clear" /> <ul class="thumbnails"> <li><<img class="active" src="<?php bloginfo('template_url'); ?>/images/img01.jpg" title="Why won't this work?"></li> <li><img src="<?php bloginfo('template_url'); ?>/images/img04.jpg"></li> <li><img src="<?php bloginfo('template_url'); ?>/images/img05.jpg"></li> </ul> <br class="clear" /> </div> </div> <script type="text/javascript"> $('#gallery').gallerax({ outputSelector: '.output', // Output selector thumbnailsSelector: '.thumbnails li img', // Thumbnails selector captionSelector: '.caption', // Caption selector captionLines: 2, // Caption lines (2 lines) fade: 'fast', // Transition speed (fast) }); </script> <!-- end --> </div> Hi guys I am busy with a website for myself and need some help on this, because I am stuck and not getting this right.
Can someone tell me where is a tutorial or where I can find a code to help me with this , I have attached a pictures on what I need and want. the second image is what need to happen when someone click on the image in the Portfolio
Below Is the html code for this Portfolio Gallery but need it to be like in a database where I can upload or add new work.
<!-- PORTFOLIO --> <div class="row portfolio-page"> <div class="hide" id="project-info"> <div id="content"> <i class="fa-times fa back"></i> <div class="row"> <div class="large-11 columns"> <h2 class="project-title">Super Design</h2> </div> <div class="large-6 columns"> <div class="project-images"> <div class="item-list"> <ul class=""> <li> <a href="#"> <img width="500" height="380" alt="13tndZF" class="attachment-project-thumb" src="assets/images/12.jpg"> </a> </li> </ul> </div> </div> </div> <div class="large-6 columns project-content"> <p>Donec pulvinar porttitor felis ac tincidunt. Quisque sit amet ligula quis lacus pellentesque luctus consequat aliquam neque. Nunc ac elit eu odio consequat rutrum. Suspendisse nec facilisis turpis. </p> <p>Proin egestas nisl in nibh condimentum, nec ornare erat egestas. Fusce dui est, gravida ut sem vitae, tincidunt pharetra massa. In erat libero, fermentum suscipit pretium vel, eleifend vitae odio. Nullam quis mi velit. Cras ut aliquet orci.</p> <p>Curabitur sollicitudin massa quis magna cursus, a auctor dolor imperdiet. Nullam ultrices pretium mauris, vel fermentum nisl venenatis ac. Aenean adipiscing lorem a purus viverra, eu</p> </div> </div> </div> </div> <ul class="small-block-grid-1 large-block-grid-3"> <li class="article portfolio-item" id="160"> <figure> <img width="500" height="380" src="assets/images/12.jpg" alt="13tndZF" /> <figcaption class="text-center"> <h3>Super Design</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="157"> <figure> <img width="500" height="380" src="assets/images/13.jpg" alt="1j5JfNg" /> <figcaption class="text-center"> <h3>Cool Project</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="153"> <figure> <img width="500" height="380" src="assets/images/14.jpg" alt="1m7ZhI3" /> <figcaption class="text-center"> <h3>New Project</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="94"> <figure> <img width="500" height="380" src="assets/images/15.jpg" alt="1a2n0Ck" /> <figcaption class="text-center"> <h3>Sed porttitor</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="79"> <figure> <img width="500" height="380" src="assets/images/16.jpg" alt="7714491824_ef36a096ff_b" /> <figcaption class="text-center"> <h3>Kid Play</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="73"> <figure> <img width="500" height="380" src="assets/images/17.jpg" alt="8364043731_9da828b5c7_h" /> <figcaption class="text-center"> <h3>Project Two</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="71"> <figure> <img width="500" height="380" src="assets/images/18.jpg" alt="almond-blossom-5378_1280" /> <figcaption class="text-center"> <h3>Project One</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="96"> <figure> <img width="500" height="380" src="assets/images/19.jpg" alt="Youthful learners" /> <figcaption class="text-center"> <h3>Etiam at commodo</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="14"> <figure> <img width="500" height="380" src="assets/images/20.jpg" alt="9862145525_c08b245398_h" /> <figcaption class="text-center"> <h3>Project 1</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> </ul> </div> <!-- END PORTFOLIO/> --> </div> </section> 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!! 🙂
|
|||||||