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
adding pics/showing thumbs
Moderator: General Moderators
-
dgreenhouse
- Forum Newbie
- Posts: 20
- Joined: Tue Mar 10, 2009 5:13 am
Re: adding pics/showing thumbs
I'd use php to add the images to the js.
genjs.html
genjs2.php
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>
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
}