Jump to content

Create Picture Gallery in HTML website

neo
 Share

Recommended Posts

neo

neo

Posted
Posted

hi friends,

I m not so familer with the web development. i have some difficulties to create Picture Gallery in HTML website.

I have created a folder named as images , I want any script or trick to display all pic under the folder random or sequencially with <<Previous and Next>> button.

I want to show just one pic at a time,,,, anybody help me..

Thanks in advance.......

Link to comment
Share on other sites

phkninja

phkninja

Posted
Posted (edited)

<?php

$albumName = "Basic PHP Photo Album"; // Name your album!

$images = "images"; // Name of image folder

$p = $_GET['p'];

if ($handle = opendir($images)) {

$i = 1;

while (false !== ($file = readdir($handle))) {

if ($file != "." && $file != "..") {

$img[$i] = $file;

if ($p == $img[$i]) {

$ci = $i;

}

$i++;

}

}

closedir($handle);

$ti = $i - 1;

$pi = $ci - 1;

if ($p == "") {

$ni = $ci + 2;

} else {

$ni = $ci + 1;

}

$prevNext = "";

if ($pi > 0) {

$piFile = $img[$pi];

$prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $piFile . "\" title=\"show previous image\">«</a>";

} else {

$prevNext .= "«";

}

$prevNext .= " | ";

if ($ni <= $ti) {

$niFile = $img[$ni];

$prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $niFile . "\" title=\"show next image\">»</a>";

} else {

$prevNext .= "»";

}

if ($p == "") {

$p = $img[1];

}

}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title><?php echo $albumName; ?></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">

body {

font-family: arial, helvetica, sans-serif;

margin: 10px;

padding: 0px 0px 0px 0px;

font-size: 11px;

background-color: #ffffff;

color: #333333;

}

td, select, input {

font-family: arial, helvetica, sans-serif;

font-size: 11px;

}

p {

font-family: arial, helvetica, sans-serif;

font-size: 11px;

line-height: 16px;

}

h1 {

font-family: georgia, times, times new roman, serif;

font-size: 18px;

font-weight: bold;

margin: 0px 0px 10px 0px;

}

.hRule {

border-top: 1px solid #cdcdcd;

margin: 0px 0px 10px 0px;

}

img {

border: 1px solid #333333;

}

.nextPrevious {

font-size: 18px;

color: #cdcdcd;

padding-bottom: 15px;

}

a, a:visited {

color: #cc0000;

text-decoration: none;

}

a:active, a:hover {

color: #cc0000;

text-decoration: underline;

}

</style>

</head>

<body>

<h1><?php echo $albumName; ?></h1>

<div class="hRule"></div>

<table border="0" cellpadding="0" cellspacing="0" align="center">

<tr align="center">

<td class="nextPrevious"><?php echo $prevNext; ?></td>

</tr>

<tr align="center">

<td><img src="<?php echo $images; ?> / <?php echo $p; ?>" alt="<?php echo $$albumName; ?>" border="0"></td>

</tr>

</table>

</body>

</html>

Edited by phkninja
Link to comment
Share on other sites
phkninja

phkninja

Posted
Posted

can you posta link to your hosting provider and ill tell youif the script will run. If you dont use a script like above you have to manually create the page each time you want to change the pic (so for 5 pics you have 5 pages with <img src=""..... in them) and reference them with the <a href="....">NextPage</a>

The only real way to do it is to use a perl/php/ruby/python etc script to dynamically create the page

Link to comment
Share on other sites
neo

neo

Posted
  • Author
Posted (edited)
can you posta link to your hosting provider and ill tell youif the script will run. If you dont use a script like above you have to manually create the page each time you want to change the pic (so for 5 pics you have 5 pages with <img src=""..... in them) and reference them with the <a href="....">NextPage</a>

The only real way to do it is to use a perl/php/ruby/python etc script to dynamically create the page

I have not hosted the website. the website is under-construction.

Would U please make *.htm page for me using Ur script? Plz. Plz.

Edited by neo
Link to comment
Share on other sites
phkninja

phkninja

Posted
Posted

It doesnt work that way. The script reads the names of the files in the images directory, makes a list, then selects an image to put in the <img> tag.

The only way to do it in pure html is to add <img> tags for every image, and you have to do that manually.

Link to comment
Share on other sites
CoffeeFiend

CoffeeFiend

Posted
Posted

Perhaps you need to explain better what you want. First you asked for a script, they provided that (assuming a PHP host), and now you're asking for static html pages. They can't pre-generate pages and thumbnails for images they don't have, and PHP doesn't generate pages like that. Besides, the html itself is totally trivial - just a bunch of hyperlinks to the actual full-size images (or pages showing them if you prefer) showing a thumbnail, and 2 plain anchor tags for next / previous.

There's gazillions of programs that will generate static html pages for you along with thumbnails and all, like Adobe Photoshop (file -> automate -> web photo gallery).

Not that I'd use static html for that mind you...

Link to comment
Share on other sites
phkninja

phkninja

Posted
Posted

As crahak has said you have to be specific.

You asked for a script, i gave you a PHP script (i didnt assume, you didnt specify a language). Then you ask to create static pages. We dont mind helping out, but firstly you didnt give much information and secondly I dont think you will find someone who will write an entire website for you because you cant build it yourself.

Not meaning any offense, but you specified

I have created a folder named as images , I want any script or trick to display all pic under the folder
This has to be done in a script unles you manually type every filename into the page.
random or sequencially with <<Previous and Next>> button.

This can be done manually by setting a page for every image, then creating links for your previous and next pages

I want to show just one pic at a time

Simplest form of doing this in a page (and will be the template code for each page) is

<html>
<head></head>
<body>
<center>
<image src=" [insert image name here] " alt="Random picture"><br>
<a href=" [previous page name here] "><--Previous</a>     <a href=" [next page name here] ">Next--></a>
</center>
</body>
</html>

No <title> as you dont want titles on each page (unless you are refreshing the entire screen every time)

And before anyone make a comment, he hasnt specified which version of HTML he wants to code in. The above is a not fully HTML 4 compatible, but is valid HTML ( <center> was frowned upon in HTML 4, it is prefered to use styles instead ).

Also please also note, I'm and Engineer not a programmer/web developer/computing student etc and I taught myself to code so it might not be the best code in the world, but it works :)

Link to comment
Share on other sites
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...