adding pics/showing thumbs

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
mikeglaz
Forum Newbie
Posts: 9
Joined: Sat Mar 26, 2011 5:36 pm

adding pics/showing thumbs

Post by mikeglaz »

I have a page with thumbnails like so (when you click on a thumbnail a larger picture appears):
http://www.mikeglaz.com/wujek/about.php

I have JavaScript code to accomplish that:
http://www.mikeglaz.com/wujek/images.js

Now what I want to be able to do is for the user of the website to upload an image and then have it automatically appear as a thumbnail (that's not a problem). What I'm stuck on is how to generate the JavaScript code so that the new image names are appended to the 'images.js' file. Should I just use PHP to actually write out the entire JavaScript file?

mike
dgreenhouse
Forum Newbie
Posts: 20
Joined: Tue Mar 10, 2009 5:13 am

Re: adding pics/showing thumbs

Post by dgreenhouse »

I'd use php to add the images to the js.

genjs.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load js from php script</title>
<script type="text/javascript" src="genjs2.php"></script>
</head>

<body>
</body>
</html>
genjs2.php

Code: Select all

window.onload = init;

image_off = new Image();
image_off.src = 'clear.gif';

<?php
// Simulate loading dynamic images
echo 
'image1= new Image();
image1.src="images/0.jpg";
image2= new Image();
image2.src="images/1.jpg";
image3= new Image();
image3.src="images/2.jpg";
image4= new Image();
image4.src="images/3.jpg";
image5= new Image();
image5.src="images/mfbcf5e9e.jpg";';
?>


function init()
{
document.getElementById("bigImage").innerHTML = 'Click mouse over a thumbnail on the left';
}

function showMe(myImage)
{
	if(document.images)
	{
		document.getElementById("bigImage").innerHTML = printAlbumInfo(myImage);
		document.display.src = eval(myImage + ".src");
	
	}
}

function printAlbumInfo(albumText)
{
	switch(albumText)
	{
		case 'image_off': 
		var returnText = 'clear';
		return returnText;

		case 'image1':
		var returnText = '';
		return returnText

		case 'image2':
		var returnText = '';
		return returnText

		case 'image3':
		var returnText = '';
		return returnText

		case 'image4':
		var returnText = '';
		return returnText

		case 'image5':
		var returnText = '';
		return returnText
	}
	return albumText
}
Post Reply