|
PHP - Php Css Gallery
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. Similar TutorialsHello, 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. 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 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, 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 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 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 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. This topic has been moved to PHP Freelancing. http://www.phpfreaks.com/forums/index.php?topic=342417.0 how to create php gallery with pagination and also add new images that control by admin
Hi, I have a game image gallery using arrays to hold the current images, and when you go to a new location, like "newLocation=2" , it goes to a new array of background images. The problem is, when I try it in my browser, and I put in a new array of image for like, "location 2", The image doesn't show up, the images from location 1 show up. This is driving me nuts because I want to start adding content to the zones of my game already.LOL!. If anyone can help please I'd be very grateful. Thank you. Derek ok, here is the code to the page, I only included the parts of the page that are relevant to what I am talking about. Code: [Select] <?php session_start(); //$currentBackground=''; $echoLocation=''; $player=''; $monsters=''; $_SESSION['player'] = $player;// set this right after they log in, run this once, eventually in database. $_SESSION['monsters']=$monsters; $currentMonsterLevel='';//get rid of this eventually and put in session variable cuz we use it on other pages. $currentPlayerLevel=''; $error=''; $playerHp='';//get rid and make session var. $monsterHp=''; $echoPlayerMana=''; $echoMonster=''; $echoSpell=''; $player=''; $monsters=''; $playerMessage=''; $monsterMessage=''; $currentPLayerLevel =''; } } ////////////////////////////////////////////////////////////////////////////////// /////////////////////////////GAME NAVIGATION AND MONSTER SEARCH CODE NOT FINISHED////////////////////////////////// $locations[0] = array(); $locations[1] = array( 'background_images' => array( "<img src='sundragon_environments/ocean/ocean1_FRAME.jpg'/>", "<img src='sundragon_environments/ocean/ocean1_FRAME2.jpg'/>", "<img src='sundragon_environments/ocean/ocean1_FRAME3.jpg'/>", "<img src='sundragon_environments/ocean/ocean1_FRAME4.jpg'/>", "<img src='sundragon_environments/ocean/ocean1_FRAME5.jpg'/>" ), 'monster_images' => array( "<img src='sundragon_monsters_source/water/goldfish/goldfish.png'/>", "<img src='sundragon_monsters_source/water/eel/eel_transp_FRAME.png '/>", "<img src='sundragon_monsters_source/water/shark/shark_transp_FRAME.png'/>", "<img src='sundragon_monsters_source/water/octalisk/octalisk_transp_FRAME.png'/>", "<img src='sundragon_monsters_source/water/teardrop_ocean_protector/teardrop_ocean_protector.png'/>" ) ); $locations[2] = array( 'backgroundImages' => array( "<img src='sundragon_environments/shore/teardrop_shore/teardrop_shore.jpg'/>" ), 'monster_images' => array( "<img src='sundragon_monsters_source/water/goldfish/goldfish.png'/>" ) ); if(isset($_GET['newLocation'])) { $_SESSION['current_location']=$_GET['newLocation']; } if(!isset($_SESSION['current_location']) && !isset($_SESSION['current_background']) && !isset($_SESSION['currentMonster'])) { $_SESSION['current_location'] = 0; $_SESSION['current_monster'] = 0; $_SESSION['current_background'] = 0; } if($_SESSION['current_location'] != 0) { if(!isset($_SESSION['current_background']) && !isset($_SESSION['current_monster'])) { $_SESSION['current_monster'] = 0; $_SESSION['current_background'] = 0; } if(isset($_GET['further'])) { //below is- inside the locations array, teardrop ocean (1) the background image is 4(example)+1 is set, then //do this if(isset($locations[$_SESSION['current_location']]['background_images'][$_SESSION['current_background']+1])) { $_SESSION['current_background']+=1; } if(isset($locations[$_SESSION['current_location']]['monster_images'][$_SESSION['current_monster']+1])) { $_SESSION['current_monster']+=1; } } elseif(isset($_GET['back'])) { if(isset($locations[$_SESSION['current_location']]['background_images'][$_SESSION['current_background']-1])) { $_SESSION['current_background']-=1; } if(isset($locations[$_SESSION['current_location']]['monster_images'][$_SESSION['current_monster']-1])) { $_SESSION['current_monster']-=1; } } $currentBackground=$_SESSION['background'][$_SESSION['current_background']]; $currentMonster=$_SESSION['monster'][$_SESSION['current_monster']]; } else { //?newLocation=1 means set it to Teardrop ocean. $currentBackground = ' <img src="aradia.jpg" width="256" height="328" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="5,176,81,249" href="?newLocation=1"/> </map>'; $currentMonster = ''; } ?> <!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" /> <title>Realm of the Sun Dragon</title> <link rel="stylesheet" type="text/css" href="css/gamestyles.css"> <style type="text/css"> body { margin-top:-32px; padding:0; color: gold; } table { color: black; } .style8 {color: #000000} </style> </head> <body oncontextmenu="return false;"> <div id="container"> <div id="monster_message"> <?php echo "this is the monster battle and NPC talk window";?> </div> <div id="currentWeapon"> <img src="sundragon_interface_template/items/swords/sword_shrunk.png" width="190" height="65" /> </div> <div id="iframe_player_top_lft" > <div id="left_player_stats"><table align="center" width="30" border="0"> <tr> <td><strong>HP</strong></td> <td><strong><font color="red"><?php echo $playerHp;?></font></strong></td> </tr> <tr> <td><strong>MANA</strong></td> <td><strong><font color="green"><?php echo $echoPlayerMana;?></font></td> </tr> <tr> <td><strong>EXP</strong></td> <td><strong><font color="blue">999</font></strong></td> </tr> <tr> <td><strong>PLAT</strong></td> <td><strong><font color="white">999</font></strong></td> </tr> </table></div> <p> </p> <p> </p> <p> </p> <p align="center"><strong><br /> <span class="style8">Octalisk (Level <?php echo $currentMonsterLevel;?>) </span></strong> <br/> <strong><span class="style8">HP</span><font color="red"> <?php echo $monsterHp;?></font></strong> </p> <div id="spelleffectsleft" > <div class="divcenter"> <div align="center"> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> </div> </div> <!--end divcenter--> </div><!--end spell effects--> <div id="bottomspellsleft" > <div class="divcenter"> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> </div> <!--end div center--> </div><!--end bottomspells--> </div><!-- end player div--> <div id="iframe_spell_foreground"><?php echo $echoSpell;?></div> <div id="iframe_monster_background"><?php echo $currentBackground;?></div> <div id="iframe_transparent_monster"><?php echo $currentMonster;?></div> <!--not here--> <div id="iframe_player_top_right" > <table width="160" height="64" border="0" align= "center"> <tr> <td width="160"><div align="center"> <p><strong><br /> Silverglade (Level: <?php echo $currentPLayerLevel;?>)<br /> </strong></p> </div></td> </tr> </table> <div class="spelleffects" > <div class="divcenter"> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> </div> </div> <div class="bottomspells" > <div class="divcenter"> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> <div class="inline"> <div align="center">spell</div> </div> </div> </div> </div> <div id="iframe_chat_right"> the data from the chat message box will be output to this div</div> <!--not here--> <div id="iframe_player_center_bottom" align="center" ><div style="display: inline;"> <form style="display: inline; margin: 0;" ...> <form style="display: inline; margin: 0;" action='gamestart_NEWEST.php' method='post'><input type='submit' name='attack' value='Attack'/><input type="submit" name="search" value="search" /><input type="submit" value="cast spell" name="spell" /><input type="submit" name="inventory" value="Inventory"/></form> <form style="display: inline; margin: 0;" method="get" action=""><input type="submit" value="go further" name="further" /> <input type="submit"value="Go back" name="back"/></form> </form> </div> <div id="chat"> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <strong>Message:</strong> <textarea name="message"></textarea> <input type="submit" name="submit" value="Chat"> <input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>"> </form> </div></div></div> <!--not here--> <div id="log_off"> <a href="logout.php"><strong>LOG OFF</strong></a> </div> <!--not here--> </div> </body> </html> Hi Everyone, I am a noob so forgive me I tried looking this up myself But I am still confused. Basically, I am trying to use the above code to display a gallery of images from my images folder on my image site. But this free code I found below Pulls the images from the /root not a named directory where the images are stored. Would someone be kind enough to tell me how I can get the script below to pull the large images from a folder called "images" Vs the script looking for the images the root. Thanks so much in advance Code: [Select] <?php # SETTINGS $max_width = 100; $max_height = 100; function getPictureType($ext) { 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 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>'; } } ?> <!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" dir="ltr" lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UFT-8" /> <title>Pictures</title> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <style type="text/css"> #pictures li { float:left; height:<?php echo ($max_height + 10); ?>px; list-style:none outside; width:<?php echo ($max_width + 10); ?>px; text-align:center; } img { border:0; outline:none; } </style> </head> <body> <?php getPictures(); ?> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> </body> </html> 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>'; ?> Hi all, i've set this script for my gallery, it works, it display me the name of the albums, but when i click to see the pictures inside, the page is blank, and also don't appear the "Back to the albums" link, i can't find the error in the code... Code: [Select] <html> <head> <script type="text/javascript" src="../lightbox2.05/js/lightbox.js"> </script> </head> <body> <?php $page = $_SERVER['PHP_SELF']; //settings $column = 5; //directories $base = "carrelli_noleggio"; $thumbs = "thumbs"; // get album $get_album = $_GET['album']; //if no album selected if (!$get_album) { echo "<b>Select an album:</b><p />"; //find each album and display as links $handle = opendir($base); while (($file = readdir($handle))!==FALSE) { if (is_dir($base."/".$file) && $file != "." && $file != ".." && $file != $thumbs) { echo "<a href='$page?album=$file'>$file</a><br />"; } } closedir($handle); } else { //check if album exist, and additional security checks if (!is_dir($base."/".$get_album) || strstr($get_album,".") !=NULL || strstr($get_album,"/") !=NULL || strstr($get_album,"\") !=NULL) { echo "Album doesn't exist."; } else { $x = 0; echo "<b>$get_album</b><p />"; $handle = opendir($base."/".$get_album); while (($file = readdir($handle)) !== FALSE) { if ($file != "." && $file != "..") { echo "<table style='display:inline;'><tr><td><a href='$base/$get_album/$files' ref='lightbox'<img src='$base/$thumbs/$file' height='100' width'100'></a></td></tr></table>"; $x++; if ($x==$column) { echo"<br />"; $x = 0; } } } closedir($handle); echo "<p /><a href='$page>Back to albums</a>"; } } ?> </body> </html> 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) 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 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> |
|||||||