Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Pages: [1] 2 3 ... 5

Author Topic: Simple PHP gallery  (Read 34972 times)

michael kennedy

  • Full Member
  • ***
  • Karma: 3
  • Posts: 207
    • SpektreDesign
Simple PHP gallery
« on: February 02, 2007, 05:25:50 PM »

This here is by far the SIMPLEST gallery script I've ever come across.  I kept it just for that reason. You never know when a client might ask you to add a "simple" gallery to their web site.

This snippet reads any gif files from the directory the script is in, prints them out and puts in a break every 5th image. For tables just put </tr><tr> in place of the break.
Code: [Select]
<?php
   $d 
dir('./');
   
$i 0;
   while(
false !== ($e $d->read())){
       if(
strpos($e,'.gif')){
           ++
$i;
           echo 
'<img src="'.$e.'"/>'.chr(10);
           if(!(
$i%5))
               echo 
'<br/>';
       }
   }
?>
Of course you can modify it (just by adding a few additional lines) to hyperlink to the fullsized images, if you use thumbnails, or even to display the image size below each thumbnail.
« Last Edit: January 22, 2008, 08:52:18 PM by Keyrocks »
Logged

Luka

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 36
  • Posts: 1716
    • http://www.snewscms.com
Simple PHP gallery
« Reply #1 on: February 02, 2007, 06:01:50 PM »

Let me just add something to this:

This simple code snippet is an ideal sNews Addon. The usage is fairly simple:

1) Create a file called gallery.php and paste this snippet inside

2) Inside gallery.php configure the folder where you keep images to showcase

3) Create an article or a page and simply include gallery.php using:

Code: [Select]
[include]gallery.php[/include]
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Simple PHP gallery
« Reply #2 on: February 02, 2007, 07:19:14 PM »

now, see,, that's what I've been thinking about... how to automate the gallery design I almost always use. Perfect. Now, I like to pepper my galleries with a leading larger image, kind of a theme or key image for the gallery, so I assign different classes to images, like this:
Quote
<p><img class="big" src="yadayada.ext" alt="yada yada yada" /></p>
<p class="sheet"><img class="thumb" src="yadayada_thm.ext" alt="thumbnail" /><img class="thumb" src="yadayada_thm.ext" alt="thumbnail" /><img class="thumb" src="yadayada_thm.ext" alt="thumbnail" /> etc etc etc</p>"
Any thoughts on how to do that with the script as starting point? I'm thinking something like
Quote from: mock code
'if $class equals $big echo <p><img class="big" src=$d.$gallname.$ext" alt="$gallname" /></p>
and
if $class equals $thumb echo <p class="sheet"> and pull in image thumbnails from directory "thumbs" '
(or same directory for any image if resizing method is used).
I can write the HTML code. PHP code ... not so well. Ideas?
« Last Edit: January 22, 2008, 08:53:31 PM by Keyrocks »
Logged

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
Simple PHP gallery
« Reply #3 on: February 05, 2007, 05:38:44 AM »

This is a very cool little script!

Would it be difficult to integrate snews comments and maths capthcha with this? Now THAT would be shhhhhaweet!    :cool:
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future

Zucye

  • Sr. Member
  • ****
  • Karma: 5
  • Posts: 347
    • Simplemente una Mujer
Simple PHP gallery
« Reply #4 on: February 05, 2007, 03:57:39 PM »

Did anyone give this a try with sNews?
It does not seem to work!
 :(
Logged
We can always learn from our failures, not so much from obvious success - C. Robinson (W. Disney). :)

Mika

  • Hero Member
  • *****
  • Karma: 9
  • Posts: 1377
    • http://www.ni5ni6.com/
Simple PHP gallery
« Reply #5 on: February 05, 2007, 06:27:48 PM »

Yep, I've just tested it and it doesn't work :(
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

codetwist

  • Hero Member
  • *****
  • Karma: 50
  • Posts: 940
Simple PHP gallery
« Reply #6 on: February 12, 2007, 12:03:24 PM »

What do You mean it doesn't work?

If You put that script above in the directory where images are located it should work just fine.

If You want it be located elsewhere then just add path, etc. like this:
Code: [Select]
<?php
// Set to the directory that contains only gallery images (path starting from sNews root)
$dirPath 'usrimg/';

$dirObj dir$dirPath );
$i 0;
while (
false !== ($entryName $dirObj->read())) {
   if (
is_file$dirPath $entryName )) {
      
// $filePath = realpath( $dirPath . $entryName );
      // $fileInfo = pathinfo( $filePath );
      
$fileInfo pathinfo$dirPath $entryName );
      if ( 
is_image_extension$fileInfo["extension"] ) ) {
         ++
$i;
         echo 
'<img src="'.$dirPath.$entryName.'" alt="'.$entryName.'" /> ' chr(10);
         if(!(
$i%5)) {
            echo 
'<br/>';
         }
      }
   }
// End while
$dirObj->close();

function 
is_image_extension$strExtension '') {
   if ( (
$strExtension '') && in_array$strExtension, array( 'gif''png''jpeg' ) ))
      return 
true;
   return 
false;
}

?>
It works just fine :D
« Last Edit: September 24, 2007, 12:15:15 PM by codetwist »
Logged

michael kennedy

  • Full Member
  • ***
  • Karma: 3
  • Posts: 207
    • SpektreDesign
Simple PHP gallery
« Reply #7 on: February 12, 2007, 05:51:51 PM »

Thanks valdis.  The original script wasn't designed to work with sNews in the first place, but I guess I should've kept that in mind when I posted it to this forum. I think it still needs a mechanism to allow them to link to the larger images though. Because some people wish for it to display thumbmails.

I couldn't figure out how to code it myself, but I think it would be useful if it detected "-tn" in the string filename, and display those as thumbnails only. So the naming convention would be something like:  pic.jpg - pic-tn.jpg

codetwist

  • Hero Member
  • *****
  • Karma: 50
  • Posts: 940
Simple PHP gallery
« Reply #8 on: February 12, 2007, 07:43:33 PM »

Ok, folks, here goes further revision of gallery code.

As for being simple ... well, let's see if somebody will play with this. This code basically works, it has to be stored in separate php file and included in article/page.

Code: [Select]
<?php

$galleryDir   
''// Set to the directory that contains gallery images
$galleryTitle 'Whatever this gallery is about';

//$useTitle     = false; // If set to true then $galleryTitle will be shown
$useTitle     true;

//$useIntroImage = false; // If set to true then possible to have differently formatted intro image
$useIntroImage true;
//$introImage    = '*.*'; // Used if set to specific file name
$introImage    '*.*';

$useThumbsDir  false// Expect to find thumbs directory in $galleryDir

$introImgClass ''// Add to css and here
$mainImgClass  ''// Add to css and here
$thumbImgClass ''// Add to css and here

$blockClass    ''// Add to css and here

// Set to the directory that contains galleries
$dirPath 'usrimg/' . ( ($galleryDir !== '') ? ($galleryDir '/') : '' ) ;

if (
$useTitle && ($galleryTitle !== '')) {
   echo 
"<h3>$galleryTitle</h3>" chr(10);
}

// Process intro
if ($useIntroImage) {
   switch (
true) {
      case (
$introImage !== '*.*') :
         
// Look for specified image
         
if ( $strIntro get_gallery_intro$dirPath$introImage$introImgClass ) ) {
            echo 
$strIntro;
            break;
         }
      case (
$introImage == '*.*') :
         
// Use first image encountered
         
if ( $strIntro get_gallery_intro$dirPath$introImage$introImgClass ) ) {
            echo 
$strIntro;
         }
         break;
      default :
         break;
   }
}

// Process main
if ($useThumbsDir) {
   
$dirPathThumbs $dirPath 'thumbs/';
   
show_gallery$dirPathThumbs$thumbImgClass$blockClass);
}
else {
   
show_gallery$dirPath$mainImgClass$blockClass );
}

function 
get_gallery$dirPath$imgClass ''$blockClass ''$lineSize ) {
   
$dirObj dir$dirPath );
   
$i 0;
   
$strOutput "";
   while (
false !== ($entryName $dirObj->read())) {
      if (
is_file$dirPath $entryName )) {
         
// $filePath = realpath( $dirPath . $entryName );
         // $fileInfo = pathinfo( $filePath );
         
$fileInfo pathinfo$dirPath $entryName );
         if ( 
is_image_extension$fileInfo["extension"] ) ) {
            ++
$i;
            
$strOutput .= '<img class="'.$imgClass.'" src="'.$dirPath.$entryName.'" alt="'.$entryName.'" /> ' chr(10);
            if( (
$lineSize 0) && !($i $lineSize) ) {
               
$strOutput .= '<br/>';
            }
         }
      }
   } 
// End while
   
if ( $i ) {
      if (
$blockClass == '')
         
$strOutput "<p>$strOutput</p>";
      else
         
$strOutput "<p class=\"$blockClass\">$strOutput</p>";
   }
   
$dirObj->close();
   return 
$strOutput;
}

function 
show_gallery$dirPath$imgClass ''$blockClass ''$lineSize ) {
   if ( 
$strGallery get_gallery($dirPath$imgClass$blockClass$lineSize) )
      echo 
$strGallery;
}

function 
get_gallery_intro$dirPath$imgName '*.*'$imgClass ''$blockClass '' ) {
   
$strOutput "";
   
$strImgClass   = ($imgClass !== '')   ? " class=\"$imgClass\" " "";
   
$strBlockClass = ($blockClass !== '') ? " class=\"$blockClass\" " "";
   if ( 
$imgName !== '*.*' ) {
      
// Look for specified intro file
      
if ( is_file$dirPath $imgName ) ) {
         
$fileInfo pathinfo$dirPath $entryName );
         if (
is_image_extension$fileInfo["extension"] )) {
            
$strOutput '<img '.$strImgClass.'src="'.$dirPath.$entryName.'" alt="'.$entryName.'" />';
         }
      } 
   }
   if ( 
$strOutput == '' ) {
      
// Look for first image encountered (even if specific image was requested but failed to be found)
      
$dirObj dir$dirPath );
      while (
false !== ($entryName $dirObj->read())) {
         if (
is_file$dirPath $entryName )) {
            
$fileInfo pathinfo$dirPath $entryName );
            if ( 
is_image_extension$fileInfo["extension"] ) ) {
               
$strOutput '<img '.$strImgClass.'src="'.$dirPath.$entryName.'" alt="'.$entryName.'" />';
               break;
            }
         }
      }
      
$dirObj->close();
   } 
// End while
   
if ($strOutput !== '') {
      
$strOutput "<p$strBlockClass>$strOutput</p>" chr(10);
   }
   return 
$strOutput;
}

function 
show_gallery_intro$dirPath$imgName '*.*'$imgClass ''$blockClass '' ) {
   if ( 
$strIntro get_gallery_intro($dirPath$imgName$imgClass$blockClass) )
      echo 
$strIntro;
}

function 
is_image_extension$strExtension '') {
   if ( (
$strExtension '') && in_array$strExtension, array( 'gif''png''jpeg' ) ))
      return 
true;
   return 
false;
}

?>
Would be good if somebody could come up with default css definitions that's obviously are missing.
Currently variables to store corresponding class names are empty for now:
- $introImgClass = ''; // for <IMG ...
- $mainImgClass  = ''; // for <IMG ...
- $thumbImgClass = ''; // for <IMG ...
- $blockClass    = ''; // for <P ...
« Last Edit: September 24, 2007, 12:15:52 PM by codetwist »
Logged

tarmithius13

  • Sr. Member
  • ****
  • Karma: 7
  • Posts: 469
Simple PHP gallery
« Reply #9 on: February 12, 2007, 07:55:04 PM »

How about getting this to work with LightboxJS? Would that even be possible?
Logged
The trick to flying is to throw yourself at the ground and miss.

Free sNews templates HERE

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
Simple PHP gallery
« Reply #10 on: February 13, 2007, 12:40:17 AM »

I like the direction this thread is heading.. great work codetwist  :cool:
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future

michael kennedy

  • Full Member
  • ***
  • Karma: 3
  • Posts: 207
    • SpektreDesign
Simple PHP gallery
« Reply #11 on: February 13, 2007, 02:02:15 AM »

tarmithius13 the lightbox script can be easily added to images by installing the JS files into your root, linking to them from the header of your page. And applying the rel="lightbox" attribute to your images.

I think adding this additional functionality should stay outside of this script.  :/

Yeah, but I got to give props to you valdis.  My only gripe is that the script no longer looks "simple" anymore.  Boy, did that little script ever grow!

codetwist

  • Hero Member
  • *****
  • Karma: 50
  • Posts: 940
Simple PHP gallery
« Reply #12 on: February 13, 2007, 08:30:23 AM »

That's the fate of all scripts :P

As idea they are simple ... but then some dreaming come along (pointing at some agent) ... and here You go with truckload of parameters and functions :D

P.S. Still hoping that somebody will come up with default styles for those images and paragraph :)
« Last Edit: September 24, 2007, 12:17:13 PM by codetwist »
Logged

codetwist

  • Hero Member
  • *****
  • Karma: 50
  • Posts: 940
Simple PHP gallery
« Reply #13 on: February 15, 2007, 11:21:23 AM »

Next revision of this simple script:

Current code (should be stored as php file and included in article/page):
Code: [Select]
<?php

$imageDir     
'usrimg/'// Set to the directory that contains galleries
$galleryDir   '';        // Set to the subdirectory that contains specific gallery

$useTitle     true;      // If set to true then $galleryTitle will be shown as <h3>
$galleryTitle 'Whatever this gallery title is';

$useIntroImage true;     // If set to true then possible to have differently formatted intro image
$introImage    '*.*';    // Use to set to specific file name

$useThumbs     false;    // Expect to find thumbnails in $galleryDir
$thumbsDir    'thumbs/'// Thumbnails subdirectory name if any

$galleryIntroId    'snewsGalleryIntro';
$galleryIntroClass 'snewsGallery';

$galleryBodyId     'snewsGalleryBody';
$galleryBodyClass  'snewsGallery';

$dirPath $imageDir $galleryDir;

/*
$strStyle  = "<style type='text/css' title='galleryStyle' media='screen'>" . chr(10);
$strStyle .= "@import 'mods/gallery/gallery.inc.css';" . chr(10);
$strStyle .= "</style>" . chr(10);

echo $strStyle;
*/

if ($useTitle && ($galleryTitle !== '')) {
   echo 
"<h3>$galleryTitle</h3>" chr(10);
}


// Process intro
if ($useIntroImage) {
   switch (
true) {
      case (
$introImage !== '*.*') :
         
// Look for specified image
         
show_gallery_intro$dirPath$introImage$galleryIntroId$galleryIntroClass'Some image' );
         break;
      case (
$introImage == '*.*') :
         
// Use first image encountered
         
show_gallery_intro$dirPath$introImage$galleryIntroId$galleryIntroClass'Some image' );
         break;
      default :
         break;
   }
}


// Process main
if ($useThumbs) {
   
$dirPathThumbs $dirPath $thumbsDir;
   
//show_gallery( $dirPathThumbs, $galleryBodyId, $galleryBodyClass );
   
show_gallery$dirPath$galleryBodyId$galleryBodyClass );
}
else {
   
show_gallery$dirPath$galleryBodyId$galleryBodyClass );
}

function 
get_gallery$dirPath$blockId ''$blockClass '' ) {
   
$dirObj dir$dirPath );
   
$i 0;
   
$strOutput "";
   
$strBlockId = ($blockId !== '') ? " id=\"$blockId\" " "";
   
$strBlockClass  = ($blockClass !== '')  ? " class=\"$blockClass\" " "";
   while (
false !== ($entryName $dirObj->read())) {
      if (
is_file( ($fileName $dirPath $entryName) )) {
         
$fileInfo pathinfo$fileName );
         if ( 
is_image_extension$fileInfo["extension"] ) ) {
            ++
$i;
            
$arrSizeAttr get_image_dimensions$fileName85 );
            
$strOutput .= get_item_markup$fileName'Click for a bigger image'$arrSizeAttr['width'], $arrSizeAttr['height'], 'Some Image' ) . chr(10);
         }
      }
   } 
// End while
   
if ( $i ) {
      
$strOutput "<ul$strBlockClass>$strOutput</ul>";
      
$strOutput "<div$strBlockId>$strOutput</div>";;
   }
   
$dirObj->close();
   return 
$strOutput;
}

function 
show_gallery$dirPath$blockId ''$blockClass '') {
   if ( 
$strGallery get_gallery($dirPath$blockId$blockClass ) ) {
      echo 
$strGallery;
   }
}


function 
get_gallery_intro$dirPath$imgName '*.*'$blockId ''$blockClass ''$imgAlt '' ) {
   
$strOutput "";
   
$strBlockId    = ($blockId !== '')    ? " id=\"$blockId\" " "";
   
$strBlockClass = ($blockClass !== '') ? " class=\"$blockClass\" " "";
   if ( 
$imgName !== '*.*' ) {
      
// Look for specified intro file
      
if ( is_file( ($fileName $dirPath $imgName) ) ) {
         
$fileInfo pathinfo$fileName );
         if (
is_image_extension$fileInfo["extension"] )) {
            
$arrSizeAttr get_image_dimensions$fileName170 );
            
$strOutput '<img '.$arrSizeAttr["size"].' src="'.$fileName.'" alt="'.$imgAlt.'" />';
         }
      } 
   }
   if ( 
$strOutput == '' ) {
      
// Look for first image encountered (even if specific image was requested but failed to be found)
      
$dirObj dir$dirPath );
      while (
false !== ($entryName $dirObj->read())) {
         if (
is_file( ($fileName $dirPath $entryName) )) {
            
$fileInfo pathinfo$fileName );
            if ( 
is_image_extension$fileInfo["extension"] ) ) {
               
$arrSizeAttr get_image_dimensions$fileName170 );
               
$strOutput '<img '.$arrSizeAttr["size"].' src="'.$fileName.'" alt="'.$entryName.'" />';
               break;
            }
         }
      }
      
$dirObj->close();
   } 
// End while
   
if ($strOutput !== '') {
      
$strOutput "<div$strBlockId><div$strBlockClass".$arrSizeAttr["size"].">$strOutput</div></div>" chr(10);
   }
   return 
$strOutput;
}

function 
show_gallery_intro$dirPath$imgName '*.*'$blockId ''$blockClass ''$imgAlt '' ) {
   if ( 
$strIntro get_gallery_intro($dirPath$imgName$blockId$blockClass$imgAlt) ) {
      echo 
$strIntro;
   }
}


function 
is_image_extension$strExtension '') {
   if ( (
$strExtension '') && in_array$strExtension, array( 'gif''png''jpeg' ) ))
      return 
true;
   return 
false;
}

function 
get_image_dimensions$imgFile$refSize 85$refPadding ) {
   
$arrResult = array();
   
$arrResult["size"] = " width=\"$refSize\" height=\"$refSize\" ";
   
$arrResult["width"] = $refSize;
   
$arrResult["height"] = $refSize;
   
//$arrResult["padding"] = "";
   
if ( $imgSizeInfo getimagesize($imgFile) ) {
      
$width  $imgSizeInfo[0];
      
$height $imgSizeInfo[1];
      if ( 
$width>&& $height>0) {
         
// Proceed with calculation
         
if ( $width $height ) {
            
$height  = (integer) Round ((1.0 $height $refSize) / (1.0*$width), 0);
            
$width   $refSize;
            
$arrResult["size"] = " width=\"$width\" height=\"$height\" ";
            
$arrResult["width"] = $width;
            
$arrResult["height"] = $height;
            
// Not used anymore
            //$padding = get_padding( $refSize - $height, $refSize, $refPadding );
            //$arrResult["padding"] = " padding-top=\"$padding\" padding-bottom=\"$padding\" ";
         
}
         else if (
$width $height) {
            
$width = (integer) Round ((1.0 $width $refSize) / (1.0*$height), 0);
            
$height  $refSize;
            
$arrResult["size"] = " width=\"$width\" height=\"$height\" ";
            
$arrResult["width"] = $width;
            
$arrResult["height"] = $height;
            
// Not used anymore
            //$padding = get_padding( $refSize - $width, $refSize, $refPadding );
            //$arrResult["padding"] = " padding-left=\"$padding\" padding-right=\"$padding\" ";
         
}
      }
   }
   return 
$arrResult;
}

/*
// Not used anymore
function get_padding( $shortage, $refSize = 85, $refPadding = 10 ) {
   $intResult = 0;
   if ( $shortage > 0 ) {
      $intResult = (integer) $refPadding + Round( $shortage / 2, 0);
   }
   return $intResult;
}
*/

// Used to calculate top margin pull value
function get_top_margin$height$padding$border ) {
   
$intResult = (integer) Round( ($height 2*$padding 2*$border)/2);
   return 
$intResult;
}

// Provides full <li>...</li> element markup
function get_item_markup$imageFile$linkTitle "Click for a bigger image"$width 85$height 85$imageAlt '' ) {
   
$strTopMargin get_top_margin$height3); // Calculates positioning for each image
   
$strResult  '<li>';
   
$strResult .= '<div> </div>'// Provides for uniform background rectangle
   
$strResult .= "<a href=\"#nogo\" title=\"$linkTitle\" style=\"margin-top:-$strTopMargin"."px; height:" . ($height+1) . "px;\" >";
   
$strResult .= "<img src=\"$imageFile\" width=\"$width\" height=\"$height\" alt=\"$imageAlt\" />";
   
$strResult .= '</a>';
   
$strResult .= '</li>';
   return 
$strResult;
}


?>
Current styles used (should be either included or linked as separate css file):
Code: [Select]
/*
 * CSS:      Table like css gallery
 * Author:   Dragan Babic, (c) 2006
 * Site:        http://dnevnikeklektika.com/
 * Url:          http://dnevnikeklektika.com/en/css-gallery-layout-en
 * Licence: Creative Commons - Attribution-ShareAlike 2.5 - http://creativecommons.org/licenses/by-sa/2.5/
 */

div#snewsGalleryBody .snewsGallery {
   margin:     0;
   padding:    0;
   overflow:   hidden; /* Clears the floats */
   width:      100%; /* IE and older Opera fix for clearing, they need a dimension */
   list-style: none;
}

div#snewsGalleryBody .snewsGallery li {
   float:      left;
   display:    inline; /* For IE so it doesn't double the 1% left margin */
   width:      85px; /* width:23.8%; */
   margin:     0 0 10px 1%; /* 0 0 10px 1%; */
   padding:    10px 0; /* 10px 0; */
   height:     93px; /* For img 85 */ /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
   position:   relative; /* This is the key */
   background: url(45degree.png);
}

div#snewsGalleryBody .snewsGallery a, .snewsGallery img {
   display:    block;
   width:      100%;
}

div#snewsGalleryBody .snewsGallery a img {
   border:     none;
} /* A small fix */

div#snewsGalleryBody .snewsGallery a:link, .snewsGallery a:visited, .snewsGallery a:focus, .snewsGallery a:hover, .snewsGallery a:active {
   padding:    3px; /* 3px; */
   background: #eeefef;
   width:      85px;
   height:     85px;
   border:     1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
   position: absolute; top: 50%; left: 50%; /* position it so that image's top left corner is in the center of the list item */
   margin: -46px 0 0 -46px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
   /* vertical-align: middle; */
}

div#snewsGalleryBody .snewsGallery a:hover {
   border-color:   #dfdfdf;
}


/* These are all optional, for decoration purposes only */
div#snewsGalleryBody .snewsGallery {
   border-bottom:  1px solid #eeefef; /* #000; */
   padding-bottom: 10px;
   margin-top:     10px;
}

/*
 * End of modified Table like css gallery
 */

/*
 * CSS:    Modifications/Additions to provide for variable image size and intro image
 * Author: Valdis Ozols
 */

div#snewsGalleryBody .snewsGallery li div { /* This one provides for uniform backround rectangle */
   padding:    3px; /* 3px; */
   background: #eeefef;
   width:      85px;
   height:     85px;
   border:     1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
   position: absolute; top: 50%; left: 50%; /* position it so that image's top left corner is in the center of the list item */
   margin: -46px 0 0 -46px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
}

div#snewsGalleryIntro {
   clear: both;
   width: 90%;
}

div#snewsGalleryIntro .snewsGallery {
   width: 200px;
   float:center;
   position: relative;
}

div#snewsGalleryIntro .snewsGallery img {
   display: block;
   padding: 10px;
   border: 1px solid #9fbdb9;
   background: #d4e2de;
   margin-left: auto;
   margin-right: auto;
   width: 170px;
 
}
/*
 * End of Modifications/Additions
 */
That's it for now.
« Last Edit: September 24, 2007, 12:16:32 PM by codetwist »
Logged

alpha10

  • Newbie
  • *
  • Karma: 0
  • Posts: 42
Simple PHP gallery
« Reply #14 on: February 15, 2007, 12:18:45 PM »

Can I see a demo of this ?

Thanks
Logged
Pages: [1] 2 3 ... 5