Is there a way to create a photogallery slide show with CSS?
I need to have a hyperlinked image with a prev/next button below or above it. People can scroll through & click on a perticular image. The linked images can open in a separate page or sized window. I ask about CSS? because I know some people turn of javascript in browsers.
Thanks for any re-direction or help.CSS is for presentation, not for functionality like this. This could be done with Javascript, but like you mentioned, it probably wouldn't be a good idea.
I'd do this server-side, what languages does your host support?PHP, PERL, & PYTHON (lunar pages hosting) not really familiar with any of them though.
How would I incorporate this feature into the photography site I'm building?
Is javascript really that bad? Every photography site I've visited has some sort of gallery utilizing javascript.
Thanks for the quick reply, I'm on my way out the door.The problem with JavaScript is that it depends on the user's browser to support it and have it activated. I've read claims that as many as 9-10% of web surfers do not have an enabled JS client. On the other hand, anything that you do with a server-side language will support 100% of your visitors.This'll look at for files names 1, 2, 3 et cetera with a regular extension. Save it with a .php extension.<?php
//name the folder with images in it, and the extension they use.
$dir = 'images';
$ext = 'jpg';
//Getting the variable from the URL.
if( isset($_GET[p]))
{
$photo = $_GET[p];
//checking that
if (!isfile($dir.'/'.$photo.'.'.$ext))
{$photo = 1}
}
else
{$photo = 1;}
//Deciding on other variables
$next = $photo + 1;
if (!isfile($dir.'/'.$prev.'.'.$ext))
{$next = '1'}
$prev = $photo - 1;
if (!isfile($dir.'/'.$prev.'.'.$ext))
{$prev = '1'}
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Gallery</title>
</head>
<body>
<h1>Gallery</h1>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"<? echo $dir.'/'.$photo.'.'.$ext; ?>" >
<a href=http://www.webdeveloper.com/forum/archive/index.php/"?p=<?=$prev ?>">Previous</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"?p=<?=$next ?>">Next</a>
</body>
</html>I'm not sure if this would be something you're interested in, but there are some php based photo gallery applications available for free. Myself, I use Simple PHP Gallery (<!-- m --><a class="postlink" href="http://relativelyabsolute.com/spg/">http://relativelyabsolute.com/spg/</a><!-- m -->). It's pretty straight forward and looks like it could be modified to blend in with the rest of your site. If you don't like that one, then you could always do a Google search for php galleries.TheTree,
Are those images linked to larger versions? I really need to be walked through here, even with the "you fill in here" parts of the code you sent.
My images are named, children01.jpg >>>> children10.jpg. The linked, larger versions will be named children01_big.jpg >>>>> children10_big.jpg.
ThanksNo, that was a one-at-a-time gallery. Although lucky for you, I've got a thumnail one already. This assumes that your files are in a folder entitled photos.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<tilte>Gallery</title>
</head>
<body>
<ul><?php
$num = 1;
$stop = 0;
while($stop != 1)
{
if ( is_file('photos/children'.$num.'.jpg'))
{
echo('<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"photos/children'.$num.'_big.jpg"><img src=http://www.webdeveloper.com/forum/archive/index.php/"photos/'.$num.'.jpg" alt="thumbnail'.$num.'"/></a></li>');
$num = $num + 1;
}
else
{
$stop = 1;
}
}
?>
</ul>
</body>
</html>How would I make that into a manual slide show with each image linked to larger version? (in a sized pop-up window)
Sorry, I'm the new guy everyone regrets responding to in the first placeJavascript Slideshow can be perfectly accessible when done right:
<!-- w --><a class="postlink" href="http://www.klproductions.com/klslideshow.html">www.klproductions.com/klslideshow.html</a><!-- w -->
- this approach will also allow you to have onclick event for images within each slide to open in a new window...
I need to have a hyperlinked image with a prev/next button below or above it. People can scroll through & click on a perticular image. The linked images can open in a separate page or sized window. I ask about CSS? because I know some people turn of javascript in browsers.
Thanks for any re-direction or help.CSS is for presentation, not for functionality like this. This could be done with Javascript, but like you mentioned, it probably wouldn't be a good idea.
I'd do this server-side, what languages does your host support?PHP, PERL, & PYTHON (lunar pages hosting) not really familiar with any of them though.
How would I incorporate this feature into the photography site I'm building?
Is javascript really that bad? Every photography site I've visited has some sort of gallery utilizing javascript.
Thanks for the quick reply, I'm on my way out the door.The problem with JavaScript is that it depends on the user's browser to support it and have it activated. I've read claims that as many as 9-10% of web surfers do not have an enabled JS client. On the other hand, anything that you do with a server-side language will support 100% of your visitors.This'll look at for files names 1, 2, 3 et cetera with a regular extension. Save it with a .php extension.<?php
//name the folder with images in it, and the extension they use.
$dir = 'images';
$ext = 'jpg';
//Getting the variable from the URL.
if( isset($_GET[p]))
{
$photo = $_GET[p];
//checking that
if (!isfile($dir.'/'.$photo.'.'.$ext))
{$photo = 1}
}
else
{$photo = 1;}
//Deciding on other variables
$next = $photo + 1;
if (!isfile($dir.'/'.$prev.'.'.$ext))
{$next = '1'}
$prev = $photo - 1;
if (!isfile($dir.'/'.$prev.'.'.$ext))
{$prev = '1'}
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Gallery</title>
</head>
<body>
<h1>Gallery</h1>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"<? echo $dir.'/'.$photo.'.'.$ext; ?>" >
<a href=http://www.webdeveloper.com/forum/archive/index.php/"?p=<?=$prev ?>">Previous</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"?p=<?=$next ?>">Next</a>
</body>
</html>I'm not sure if this would be something you're interested in, but there are some php based photo gallery applications available for free. Myself, I use Simple PHP Gallery (<!-- m --><a class="postlink" href="http://relativelyabsolute.com/spg/">http://relativelyabsolute.com/spg/</a><!-- m -->). It's pretty straight forward and looks like it could be modified to blend in with the rest of your site. If you don't like that one, then you could always do a Google search for php galleries.TheTree,
Are those images linked to larger versions? I really need to be walked through here, even with the "you fill in here" parts of the code you sent.
My images are named, children01.jpg >>>> children10.jpg. The linked, larger versions will be named children01_big.jpg >>>>> children10_big.jpg.
ThanksNo, that was a one-at-a-time gallery. Although lucky for you, I've got a thumnail one already. This assumes that your files are in a folder entitled photos.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<tilte>Gallery</title>
</head>
<body>
<ul><?php
$num = 1;
$stop = 0;
while($stop != 1)
{
if ( is_file('photos/children'.$num.'.jpg'))
{
echo('<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"photos/children'.$num.'_big.jpg"><img src=http://www.webdeveloper.com/forum/archive/index.php/"photos/'.$num.'.jpg" alt="thumbnail'.$num.'"/></a></li>');
$num = $num + 1;
}
else
{
$stop = 1;
}
}
?>
</ul>
</body>
</html>How would I make that into a manual slide show with each image linked to larger version? (in a sized pop-up window)
Sorry, I'm the new guy everyone regrets responding to in the first placeJavascript Slideshow can be perfectly accessible when done right:
<!-- w --><a class="postlink" href="http://www.klproductions.com/klslideshow.html">www.klproductions.com/klslideshow.html</a><!-- w -->
- this approach will also allow you to have onclick event for images within each slide to open in a new window...