Forum Moderators: coopster

Message Too Old, No Replies

PHP image gallery

Click thumbnail and automatically open in a dynamic page

         

humpingdan

11:45 am on Jan 19, 2004 (gmt 0)

10+ Year Member



I have roughly 60 images to display, i have created a gallery of thumbnails for these images, but because of the proportion of some of these images i cant load them onto the same page as the thumbnails as the page become both too wide and too long, and id like to keep the pictures the same size, as they are small enough to fit on a page on their own.

so...

i need a php script which will attach to the thumbnails and load the full size pic on a dynamically created page, just really simple - just click and load - i just dont want to create all the individual pages for the images!

Any help is greatfully recieved!

coopster

11:23 pm on Jan 19, 2004 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



If you just want to display the image, why even generate a new dynamically generated HTML page? Just let the browser do the work. Make each thumbnail a link that pops open a separate window using javascript. If the user has javascript turned off in their browser, the link simply opens in the same browser window.

<a href="/path/to/thumbnail_big_parent.jpg"
onclick="void(window.open(this.href, '', '')); return false;">
<img alt="Alternate Text" src="/path/to/thumbnail.jpg"
title="Title" width="100" height="100" /></a>

To create this code dynamically, just print out the information during the loop in which you are displaying the thumbnails:

while (looping through thumbnail directory/listing) {
print '<a href="' . $path_and_filename_of_big_pic . '"
onclick="void(window.open(this.href, "", "")); return false;">
<img alt="Alternate Text" src="' . $path_and_filename_of_thumbnail . '"
title="Title" width="100" height="100" /></a>';
}

g1smd

12:04 am on Jan 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If you still want a PHP way of doing this, then a search for PHP image gallery script, using Google, will find hundreds of ideas, and samples.

twist

2:36 am on Jan 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have roughly 60 images to display, i have created a gallery of thumbnails for these images, but because of the proportion of some of these images i cant load them onto the same page as the thumbnails as the page become both too wide and too long, and id like to keep the pictures the same size, as they are small enough to fit on a page on their own.
so...

i need a php script which will attach to the thumbnails and load the full size pic on a dynamically created page, just really simple - just click and load - i just dont want to create all the individual pages for the images!

Here is a simplified version of how I do my galleries. I've excluded my foward, backward and 'return to thumbnail page' buttons.

Create a table in mysql called my_gallery (or whatever) and add 4 columns. id, which will be unique to each picture; name, usually the file name; number, give each picture a number so later you can order your images on the page and create the backword and foward buttons; description, this could be used for alt text or title info.

Call your php page gallery.php (or whatever)


<?
$show_thumbnails = true;

if( $id!= '' ) {

$query = "SELECT name, number, description FROM my_gallery WHERE id = '$id'";
$result = mysql_query( $query );
$row = mysql_fetch_array( $result );
$name = $row[ 'name' ];
$number = $row[ 'number' ];
$description = $row[ 'description' ];

if( $name!= '' ) {
$show_thumbnails = false;
// insert html to show single photograph //

}

if( $show_thumbnails = true ) {

$query = "SELECT * FROM my_gallery";
$result = mysql_query( $query );

while( $row = mysql_fetch_array( $result ) ) {
$id[] = $row[ 'id' ];
$name[] = $row[ 'name' ];
$number[] = $row[ 'number' ];
$description[] = $row[ 'description' ];
}

// insert html to show the thumbnail page //
// create a loop to show the thumbnails //
for( $loop = 0; $loop < $number_of_thumbs_this_page; $loop++ ) {
// To create a link to a image use this //
echo '<a href="gallery.php?id='. $id[ $loop ] .'"><img tag></a>';
}

}
?>

It can get somewhat complicated, i'll be glad to help but if you do a search you'll probably find programs out there that already do pretty much the same thing where you don't have to write all the code.

humpingdan

9:23 am on Jan 20, 2004 (gmt 0)

10+ Year Member



i came up with this in the end, javascript wasnt really what i was after, came up with this little gem!

<a href="large_pic.php?pic=image">PIC</a>

simple link to large_pic.php
which includes this one line!

<img src="<? echo $pic?>.jpg">

kinda funky!

twist

8:37 pm on Jan 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<a href="large_pic.php?pic=image">PIC</a>

simple link to large_pic.php
which includes this one line!

<img src="<? echo $pic?>.jpg">

If you want, you can still put your gallery into one php file.

Just wrap the top of your gallery.php page in a if statement.

<?
if( $pic!= "" ) { echo '<img src="'. $pic .'.jpg">'; }
else {

echo'
<a href="large_pic.php?pic=image1">PIC</a>
<a href="large_pic.php?pic=image2">PIC</a>
<a href="large_pic.php?pic=image3">PIC</a>
';

}
?>

Either way works just fine, this just helps reduce the amount of files.