image > image > image > image > end.
June 28, 2010 11:03 AM   Subscribe

What's the simplest way to create a blank Web page, with a black and white image on it, which when clicked will load the next image in a sequence? Could this be a learning PHP project for me?

I know a bit of HTML -- enough to do this with a series of static pages, but I don't want to do this with static pages. All I want is a white page with nothing on it but a black and white image; if you click the image the first image fades and the second image appears. And so on. Maybe a "return" button at the very end of the 20-or-so image sequence.

These will be very simple, fast-loading images.

As well as basic HTML, I'm familiar with CSS. Absolutely nothing about Flash or Javascript, which seem like the likely tools for this sort of endeavor.

Also: I'm trying to teach myself PHP (but have only just now started), so if this could be combined with that, I'd be killing two birds with the same scripting stone.

This is to replace my current independently hosted blog; I'm not interested in cloud solutions like Flikr or Tumblr. I want this to be entirely standalone and not rely on any third-party resources at all.
posted by Shepherd to Computers & Internet (15 answers total) 13 users marked this as a favorite
 
This seems like a very-few-lines-Javascript along the lines of

<img onClick="nextImage()" id="myImage" >

and

var currentImageNo = 0;
function nextImage() {
currentImageNo++;
document.getElementById('myImage').src = 'newimage' . currentImageNo . 'png';
}

and the images newimage00.png to newimage19.png.

Hope I'm not spoiling this for you.
posted by oxit at 11:19 AM on June 28, 2010


More likely teach yourself javascript. You could do this with PHP, but it would be less efficient. And if you want the fade effect you're going to need to use at least a little javascript or flash anyways.

I'd start with the code on this page and this page stitching them together with the OnClick function.
posted by 256 at 11:21 AM on June 28, 2010


jQuery has a image gallery plugin thing. That's probably what you want to use. Example of it in use over here.
posted by chunking express at 11:25 AM on June 28, 2010


Just images? Or images with text as well? captions? And do you want there to be navigation too, or not? It sounds like you want uber-simple but maybe not.
posted by artlung at 11:28 AM on June 28, 2010


document.getElementById('myImage').src = 'newimage' . currentImageNo . 'png';

I do that all the time too - it should be:

document.getElementById('myImage').src = 'newimage' +currentImageNo + 'png';
posted by missmagenta at 11:45 AM on June 28, 2010


Best answer: Minimal jQuery version: 

<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://github.com/downloads/malsup/cycle/jquery.cycle.all.latest.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$('#my-slides img').wrap('<a href="#" class="next"></a>')
		$('#my-slides').cycle({ fx: 'fade', next: '#my-slides'});
	</script>
</head>
<body>
	<div id="my-slides">
		<img src="imageone.jpg" />
		<img src="imageanother.jpg" />
		<img src="imageyetanother.jpg" />
		<img src="imageonemore.jpg" />
	</div>
</body>
</html>
Uses jQuery and Cycle plugin
posted by artlung at 11:51 AM on June 28, 2010 [1 favorite]


If you understand what Artlung has written and why it works, it's >200% more elegant that mine.
posted by oxit at 12:07 PM on June 28, 2010


Best answer: I haven't tested this code but it would basically do what you're looking for, perhaps with some proofreading. ;-)
<?php

$thispic = $_GET['pic'];
if(!is_numeric($thispic) or $thispic <>
	$thispic = 1;
}
echo("<a href=\"" . $_SERVER['PHP_SELF'] . "?pic=" . $thispic + 1 . "\">);
echo("<img src=\"path/to/image" . $thispic . ".png\" />");
echo("</a>");

?>
You'd need to keep all your images in the same directory with filenames that increment and the same file extension for all of them. You could easily add some logic to stop incrementing link URLs at a certain point to avoid broken images.
posted by The Winsome Parker Lewis at 12:14 PM on June 28, 2010


Oops, botched link 4 of my code, by forgetting to escape a character. Sorry! It should say...
if(!is_numeric($thispic) or $thispic <= 0){

posted by The Winsome Parker Lewis at 12:16 PM on June 28, 2010


LINE 4, that is
posted by The Winsome Parker Lewis at 12:17 PM on June 28, 2010


Use static HTML and add some JQuery on top for fades and stuff. Accessibility
posted by low affect at 12:22 PM on June 28, 2010


Response by poster: Hm! I sort of understand what artlung has done, in a kinda-sorta sort of way, but I get all the images displaying, one after the other, linearally. I've cut and pasted the whole thing into a file and named it index.html, uploading it directly to the root directory along with the images (named image001.png through image019.png).

I get the images side by side, when they fit, and then one after the other vertically when they don't fit next to each other.
posted by Shepherd at 6:13 PM on June 28, 2010


Shepherd, right, you don't want to automatically cycle, forgot that. Sorry. You could change the options you pass into the cycle() plugin: so instead of {fx: 'fade', next: '#my-slides'} use {fx: 'fade', next: '#my-slides', timeout:0}

I know it's odd to get confronted with all these code conventions -- the javascript, the jQuery, etc. Feel free to MeMail me if you have any questions.
posted by artlung at 6:38 PM on June 28, 2010


Response by poster: Thanks for all the help -- I posted the result to Projects (with probable updates etc. to come).
posted by Shepherd at 9:43 AM on July 5, 2010


Nice! Very funny stuff!
posted by artlung at 12:19 PM on July 5, 2010


« Older Pimp My Table Hockey Game   |   Identify this softcore porn title? Newer »
This thread is closed to new comments.


Tags

Share