I created something very similar as a promo using php and JavaScript.
Here is an example:
http://www.pttools.co.uk/promo1.php
In the example I?m selecting the images randomly. But you can have
slide controls easily, etc.
The php code I've used:
<html>
<head>
<?php
function promoload(){
# You can substitute the arrays bellow for data pulled from a database
// the image names
$pixs = Array ('434fcb6250545', '436e9344a31e2', '43c79ea154460',
'43c79ea154466', '43c79ea154461', '43c79ea154464');
// the image titles
$pixstitle = Array ('Title0', 'Title1', 'Title2', 'Title3', 'Title4', 'Title5');
// generate JavaScript multidimensional array for promo parameters
echo "<script> var promoarray=new Array(new Array(\"0\", \"1\", \"2\",
\"3\", \"4\", \"5\"),\n
new Array(\"0\", \"1\", \"2\", \"3\", \"4\", \"5\"))\n
</script>\n";
for ($n=0;$n<6;$n++)
{
echo "<script>pics1=new Image()\n";
echo "pics1.src=\"img.php?f({$pixs[$n]})+a(200)+q(100)\"\n";
echo "promoarray[0][$n]=pics1\n";
echo "promoarray[1][$n]=(\"{$pixstitle[$n]}\")\n";
echo "</script>";
}
}
?>
<script>
function promoani(){
// random number between 0-5
index = Math.round(Math.random()*5)
// insert image and title
document.getElementById("promopixs").src = promoarray[0][index].src
if (document.getElementById("promoitem").firstChild == null) {
document.getElementById("promoitem").appendChild(document.createTextNode(promoarray[1][index]));
} else {
document.getElementById("promoitem").firstChild.nodeValue =promoarray[1][index];
}
// 2 second loop
timer = setTimeout("promoani()", 2000)
}
function promocheckload(){
// check the images are loaded
if ((promoarray[0,0].complete == false) || (promoarray[1,0].complete == false)
|| (promoarray[2,0].complete == false) || (promoarray[3,0].complete == false)
|| (promoarray[4,0].complete == false) || (promoarray[5,0].complete == false))
{
timer = setTimeout("promocheckload()", 100);
}
}
</script>
</head>
<body>
<div>
<center>
<h1 id='promoitem'></h1>
<div style=" height: 220px; width: 220px; border: solid 1px;">
<table valign='middle' style='height: 220px; width: 220px;'>
<tr>
<td>
<center>
<img id="promopixs" src="/_images/spacer.gif">
</center>
</tr>
</td>
</table>
</div>
</center>
</div>
<?php
promoload();
?>
<script>
// begin
promocheckload();
promoani();
</script>
Originals:<br>
<img src="/_images/pixs/434fcb6250545.jpg"><br>
<img src="/_images/pixs/436e9344a31e2.jpg"><br>
<img src="/_images/pixs/43c79ea154460.jpg"><br>
<img src="/_images/pixs/43c79ea154466.jpg"><br>
<img src="/_images/pixs/43c79ea154461.jpg"><br>
<img src="/_images/pixs/43c79ea154464.jpg">
</body>
</html>
I'm using an image processing file in php to make sure it scales the
image correctly to fit inside a square no mater what shape. This file
also enables you to specify the format and the quality you want to
output. It is done on the fly.
Here is the img.php
<?php
// define the base image dir
$base_img_dir = "./_images/pixs/";
// find tags
preg_match_all("/\+*(([a-z])\(([^\)]+)\))\+*/", $QUERY_STRING,
$matches, PREG_SET_ORDER);
// empty array and set regular expressions for the check
$tags = array();
$check = array( "f" => "[0-9a-zA-Z]{13}",
"w" => "[0-9]+%?",
"h" => "[0-9]+%?",
"x" => "[0-9]+",
"y" => "[0-9]+",
"a" => "[0-9]+%?",
"t" => "jpg|png",
"q" => "1?[0-9]{1,2}" );
// check tags and save correct values in array
for ($i=0; $i<count($matches); $i++) {
if (isset($check[$matches[$i][2]])) {
if (preg_match('/^('.$check[$matches[$i][2]].')$/',
$matches[$i][3])) {
$tags[$matches[$i][2]] = $matches[$i][3];
}
}
}
function notfound() {
header("HTTP/1.0 404 Not Found");
exit;
}
// check that filename is given
if (!isset($tags["f"])) {
notfound();
}
// add extention
$tags["f"] .=".jpg";
// check if file exists
if (!file_exists($base_img_dir.$tags["f"])) {
notfound();
}
// retrieve file info
$imginfo = getimagesize($base_img_dir.$tags["f"]);
// load image
switch ($imginfo[2]) {
case 2: // jpg
$img_in = imagecreatefromjpeg($base_img_dir.$tags["f"]) or notfound();
if (!isset($tags["t"])) {
$tags["t"] = "jpg";
}
break;
case 3: // png
$img_in = imagecreatefrompng($base_img_dir.$tags["f"]) or notfound();
if (!isset($tags["t"])) {
$tags["t"] = "png";
}
break;
default:
notfound();
}
// check for maximum width and height
if (isset($tags["a"]) and !isset($tags["w"]) and !isset($tags["h"])){
if ( imagesx($img_in)> imagesy($img_in)){
$tags["w"]= $tags["a"];
} else {
$tags["h"]= $tags["a"];
}
}
if (isset($tags["x"])) {
if ($tags["x"] < imagesx($img_in)) {
$tags["w"] = $tags["x"];
}
}
if (isset($tags["y"])) {
if ($tags["y"] < imagesy($img_in)) {
$tags["h"] = $tags["y"];
}
}
// check for need to resize
if (isset($tags["h"]) or isset($tags["w"])) {
// convert relative to absolute
if (isset($tags["w"])) {
if (strstr($tags["w"], "%")) {
$tags["w"] = (intval(substr($tags["w"], 0, -1)) / 100) *
$imginfo[0];
}
}
if (isset($tags["h"])) {
if (strstr($tags["h"], "%")) {
$tags["h"] = (intval(substr($tags["h"], 0, -1)) / 100) *
$imginfo[1];
}
}
// resize
if (isset($tags["w"]) and isset($tags["h"])) {
$out_w = $tags["w"];
$out_h = $tags["h"];
} elseif (isset($tags["w"]) and !isset($tags["h"])) {
$out_w = $tags["w"];
$out_h = $imginfo[1] * ($tags["w"] / $imginfo[0]);
} elseif (!isset($tags["w"]) and isset($tags["h"])) {
$out_w = $imginfo[0] * ($tags["h"] / $imginfo[1]);
$out_h = $tags["h"];
} else {
$out_w = $tags["w"];
$out_h = $tags["h"];
}
// new image in $img_out
$img_out = imagecreatetruecolor($out_w, $out_h);
imagecopyresampled($img_out, $img_in, 0, 0, 0, 0, imagesx($img_out),
imagesy($img_out), imagesx($img_in), imagesy($img_in));
} else {
// no resize needed
$img_out = $img_in;
}
// check for a given jpeg-quality, otherwise set to default
if (!isset($tags["q"])) {
$tags["q"] = 75;
}
// returning the image
switch ($tags["t"]) {
case "jpg":
header("Content-type: image/jpeg");
imagejpeg($img_out, "", $tags["q"]);
exit;
case "png":
header("Content-type: image/png");
imagepng($img_out);
exit;
default:
notfound();
}
?>
The images should be placed in the directory /_images/pixs/ and be
given an alpha numeric name of 13 characters with .jpg extension. The
reason why you do that is on upload you want to make the file names
unique. So you use something like uniqid().?.jpg?
I can provide you with a script to upload files that is much more
secure than simple HTTP uploads. This is important if the upload is
public access. You want to make sure you specify a max file size.
Obviously you don?t want to store stupidly big files.
Hope that helps
Paul |
