...

View Full Version : Need slideshow to accomodate images of different sizes



whitedove
02-01-2007, 07:24 PM
Ok. I have been looking and looking and I haven't found anything. I'll be upfront and honest. I'm really new to all this. I am great at copy & paste ~lol~ I'm learning, but it's a slow process for me.

Anyway, What I am looking for which I haven't found is a good slideshow script that will accommodate images of different sizes. I have numerous galleries I will want to place on a slideshow. as an example:

http://www.healinggardenofgrace.net/alberta.html

the only problem with the current slide show is that not all my pictures are the same height and width, but it crams them or expands them to the desired size.

Thank you for your assistance. Also any ideas to better my site will be appreciated too. ~lol~

whitedove

Ancora
02-01-2007, 07:52 PM
whitedove:

Does your host support PHP? I have a PHP version that reads your image folder and uses all the files in it, automatically, for an "actual size" slide show.

If not, I have another version that requires the images file names to be consecutive numbers, e.g., 1.jpg, 2.jpg, etc.

whitedove
02-01-2007, 08:34 PM
Ancora:

Yes my host supports php, though I'm even less sure of PHP than I am of javascript ~lol~ but will try both if you don't mind.

thank you

white dove

Ancora
02-01-2007, 09:11 PM
-- EDITED-- to correct an error
whitedove:

You will first probably need to open Folders | Options and create the new file type, php Otherwise, if you attempt to copy and save the following code, it will save as, slideshow.php.txt

Set Notepad as the editor for php files.

Once you add the new file type, copy the code AS IS, then save it as, say, slideshow.php

Before you upload it to your server, there are two places where you must specify your image folder name. The code assumes that when you are looking at the file on your ftp, your image folder is visible.

Find this line:

$imagePath = "./images";

and if the name of your images folder, isn't images, then change it.

Then find this line, and do the same:

var imgPath = "images/";

Then upload it to your server, log out from you ftp accont, and open the slideshow.php file in your browser.

I can't put both of them in this post, it exceeds the maximum characters. Let me know if you still want it after you try this one.



<?php

$imagePath = "./images";
$pattern = "(\.jpg$)|(\.jpeg$)";
$images = "";
if($imgDir = opendir($imagePath))
{
while(false !== ($file = readdir($imgDir)))
{
if(eregi($pattern, $file))
{
$images = $images . $file . ",";
}
}
}
closedir($imgDir);
$images = substr($images, 0, -1);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<script type="text/javascript">

//--------- Begin Slideshow, Actual Size ------------

// --- Customization ------
var textColor = "Blue";
var backColor = "#F0F8FF";
var btnColor = "lightblue"
var imgPath = "images/"; // use "" if the images are in the current directory
// --- End Customization -------

// --- Do not edit below this line -------
var images = [];
var imgCount = 0;
var useWidth = screen.width*.85;
var prevActive = "i5";
var leftStr = Math.round((screen.width-useWidth-36)/2)+"px";
var absStr = "Position:Absolute;Bottom:10px;Left:"+leftStr+"";
var userDelay = 0;
var tick = 0;
var count = -1;
var wStr = 0;
var hStr = 0;
var tStr = 0;
var lStr = 0;
var IMGStr = "";
var miscFlag = false;
var cancelFlag = false;
var pauseFlag = false;
var complete = false;
var slideWindow = "";
var timeOut = "";

function manageBtns(n){

if (n == 1) //start
{
document.getElementById('startBtn').disabled = true;
document.getElementById('pauseBtn').disabled = false;
document.getElementById('cancelBtn').disabled = false;
document.getElementById('startBtn').value = "Start Slideshow"
}
if (n == 2) //paused
{
document.getElementById('startBtn').disabled = false;
document.getElementById('pauseBtn').disabled = true;
document.getElementById('cancelBtn').disable = false;
document.getElementById('startBtn').value = "Resume Slideshow"
}
if (n == 3) //canceled
{
document.getElementById('startBtn').disabled = false;
document.getElementById('pauseBtn').disabled = true;
document.getElementById('cancelBtn').disabled = true;
document.getElementById('startBtn').value = "Start Slideshow"
}
if (n == 4) // done
{
document.getElementById('startBtn').disabled = false;
document.getElementById('pauseBtn').disabled = true;
document.getElementById('cancelBtn').disabled = true;
document.getElementById('startBtn').value = "Start Slideshow"
}
}

function cancelShow(){

count = imgCount;
cancelFlag = true;
slideWindow.focus();
self.status = "One Moment...";
tick = 0;
if (miscFlag == true){runShow()}
}

function pauseShow(){

slideWindow.focus();
tick = 0;
pauseFlag = true;
miscFlag = true;
}

function waitLoadImage(){

if (slideWindow.document.images[0].complete)
{
if (count < imgCount){countDown()}
else if (cancelFlag == true){runShow()}
}
else {setTimeout("waitLoadImage()",500)}
}

function displayIt(){

wStr = document.getElementById('nullIMG').width;
offsetW = wStr;
wStr = wStr+20;
wStr = "width="+wStr;
hStr = document.getElementById('nullIMG').height;
offsetH = hStr;
hStr = hStr+20;
hStr = "height="+hStr;
lStr = (screen.width-50-offsetW)/2;
lStr = "left="+lStr;
tStr = (screen.availHeight-15-offsetH)/2;
tStr = "top="+tStr;
IMGStr = document.getElementById('dispIMG').innerHTML;
if (slideWindow != ""){slideWindow.close();slideWindow = ""}
if(slideWindow == ""){slideWindow = window.open("","SlideShow","toolbar=0,status=1,"+tStr+","+lStr+","+wStr+","+hStr+"")};
slideWindow.document.open();
slideWindow.document.write(IMGStr);
slideWindow.document.close();
slideWindow.status = "This is " + (count+1) + " of " +(imgCount+1);
slideWindow.focus();
IMGStr = "";
waitLoadImage();
}

function getNextimage(){

document.getElementById('nullIMG').src = imgPath + images[count];
setTimeout("displayIt()",100);
}

function closeLastImage(){

if (slideWindow.document.images[0].complete)
{
if (cancelFlag == true){isDelay = 1000}
else {isDelay = userDelay*1000; count = -1; clearTimeout(timeOut)}
setTimeout("slideWindow.close();slideWindow=''",isDelay);
}
else {setTimeout("closeLastImage()",800)}
}

function countDown(){

if (complete){complete = false; return}
if (tick > 0){self.status = tick}
if (tick == 0 && (pauseFlag == false && cancelFlag == false)){self.status = "Loading Next Image...";}
if (tick >= 0)
{
timeOut = setTimeout("countDown()", 1000);
tick--;
}
else {runShow()}
}

function runShow(){

manageBtns(1);
tick = userDelay-1;
if (count < imgCount && pauseFlag == false)
{
count++;
getNextimage();
miscFlag = false;
}
if (pauseFlag == true)
{
self.status="Slideshow Paused at Image "
+(count+1) + " of " +(imgCount+1) + "."
pauseFlag = false;
manageBtns(2);
}
if (count == imgCount && cancelFlag == false)
{
self.status = "Slideshow Is Complete."
complete = true;
manageBtns(4);
closeLastImage();
}
if (count == imgCount && cancelFlag == true)
{
self.status = "Slideshow is Canceled."
closeLastImage();
count = -1;
cancelFlag = false;
pauseFlag = false;
miscFlag = false;
manageBtns(3);
}
}

function updateInterval(Active){

var next = "i"+Active;
document.getElementById(prevActive).bgColor="#F0F8FF";
document.getElementById(next).bgColor="darkorange";
prevActive = next;
userDelay = Active;
shutDownDelay = Active*1000;
tick = userDelay-1;
if (slideWindow != ""){slideWindow.focus()}
}

function buildSupport(){

var divStr = "<Div style='Position:Absolute;Top:-2000px' id='dispIMG'><IMG Src='"+imgPath+"1.jpg' ID='nullIMG'></Div>";
document.write(divStr);
}

function buildBox(){

var styleStr = "<Style type='text/css'>.cDiv {"+absStr+";Height:54pt;Padding-Left:0px; Padding-Right:0px;Padding-Top:6px;Padding-Bottom:6px;Margin-Right:4px;Margin-Left:6px;Margin-Top:0px;Margin-Bottom:0px;Text-Indent:0px;width:"+useWidth+"px;Border-Top:#C0C0C0 1px solid;Border-Left:#C0C0C0 1px solid;Border-Bottom:Black 1px solid;Border-Right:Black 1px solid;background-color:"+backColor+";}.iBox {Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Border-Top:Black 1px Solid;Border-Bottom:Black 1px Solid;Border-Left:Black 1px Solid;Text-Transform:none;Padding-Left:5px;Padding-Right:3px;Padding-Top:2px;Padding-Bottom:2px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;} .nBox {Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Border-Top:Black 1px Solid;Border-Bottom:Black 1px Solid;Border-Left:Black 1px Solid;Text-Transform:none;Padding-Left:0px;Padding-Right:5px;Padding-Top:2px;Padding-Bottom:2px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;}.nxBox {Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Border-Top:Black 1px Solid;Border-Bottom:Black 1px Solid;Border-Left:Black 1px Solid;Border-Right:Black 1px Solid;Text-Transform:none;Padding-Left:0px;Padding-Right:5px;Padding-Top:2px;Padding-Bottom:2px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;} .cBtns{Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Background-Color:"+btnColor+";Border-Right:Black 1px solid;Border-Top:White 1px Solid;Border-Left:White 1px Solid;Border-Bottom:Black 1px Solid;Cursor:Pointer;}</Style>";

var controlStr = "<Table cellspacing='0'><TD class='iBox' bgColor='moccasin'>SlideShow Interval:<TD class=nBox id =i2><input type='radio'name='interval' onclick='updateInterval(2)'>2</TD><TD class=nBox id =i3><input type='radio'name='interval' onclick='updateInterval(3)'>3</TD><TD class=nBox id =i4><input type='radio'name='interval' onclick='updateInterval(4)'>4</TD><TD class=nBox id =i5 bgcolor='darkorange'><input type='radio' name='interval' checked onclick='updateInterval(5)'>5</TD><TD class=nBox id =i6><input type='radio'name='interval' onclick='updateInterval(6)'>6</TD><TD class=nBox id =i7><input type='radio' name='interval' onclick='updateInterval(7)'>7</TD><TD class=nBox id =i8><input type='radio'name='interval' onclick='updateInterval(8)'>8</TD><TD class=nBox id =i9><input type='radio' name='interval' onclick='updateInterval(9)'>9</TD><TD class=nxBox id =i10><input type='radio'name='interval' onclick='updateInterval(10)'>10</TD></Table><Table><TD><input type='button' id='startBtn' class='cBtns' value='Start Slideshow' onClick='runShow()'></TD><TD><input type='button' id='pauseBtn' class='cBtns' value='Pause Slideshow' onClick='pauseShow()'></TD><TD><input type='button' id='cancelBtn' class='cBtns' value='Cancel Slideshow' onClick='cancelShow()'></TD></Table>"

var tblStr = "<DIV id='isFloat' class='cDiv' align='center'>"+controlStr+"</DIV>"

document.write(styleStr);
document.write(tblStr);
}

function initControls(){

buildBox();
buildSupport();
updateInterval(5);
document.getElementById('pauseBtn').disabled = true;
document.getElementById('cancelBtn').disabled = true;
}

function initImages(){

var tmp = document.getElementById('imgNames').value;
tmp = tmp.split(',');
for (i=0; i<tmp.length; i++)
{
images[i] = tmp[i];
}
imgCount = images.length-1;
document.getElementById('nullIMG').src = imgPath+images[0];
}

onload=initImages;

// ---- End Slideshow, Actual Size---------

</script>
</head>
<body>
<h3 align='center'>Actual Size Image Slideshow</h3>
<input type="hidden" id="imgNames" value="<?php echo $images; ?>">


<!-- Keep the following line as the LAST line in the Body -->
<script type="text/javascript"> initControls() </script>
</body>
</html>

vwphillips
02-01-2007, 09:30 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var zxcImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var zxcImages=['Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif','Six.gif','Seven.gif','Eight.gif',' Nine.gif'];

var zxcSSAry=[];
for (var zxc0=0;zxc0<zxcImages.length;zxc0++){
zxcSSAry.push([zxcImgPath+zxcImages[zxc0]]);
}

var zxcCnt=0;

function SlideShow(zxcdir){
zxcCnt+=zxcdir;
zxcCnt=(zxcCnt>=zxcSSAry.length)?0:(zxcCnt<0)?zxcSSAry.length-1:zxcCnt;
if (!zxcSSAry[zxcCnt][1]){
zxcSSAry[zxcCnt][1]=new Image();
zxcSSAry[zxcCnt][1].src=zxcSSAry[zxcCnt][0];
}
if (zxcSSAry[zxcCnt][1].complete){
document.getElementById('Text').innerHTML='';
var ssimg=document.getElementById('SS');
ssimg.width=zxcSSAry[zxcCnt][1].width;
ssimg.height=zxcSSAry[zxcCnt][1].height;
ssimg.src=zxcSSAry[zxcCnt][1].src;
}
else {
document.getElementById('Text').innerHTML='Loading';
setTimeout('SlideShow(0)',100);
}
}


//-->
</script></head>

<body>
<INPUT type="button" value="Next" onclick="SlideShow(1);" >
<INPUT type="button" value="Back" onclick="SlideShow(-1);" >
<img id="SS" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100" >
<div id="Text" ></div>

</body>

</html>

vwphillips
02-01-2007, 09:49 PM
the above is the natural image size

the same effect as above can be achieved by leving the width and height attributes out on the image tag

if you want to force the image size


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var zxcImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var zxcImages=[['Zero.gif',100,150],['One.gif',50,150],['Two.gif',150,50],['Three.gif',40,40],['Four.gif',140,140],['Five.gif',120,120],['Six.gif',90,80],['Seven.gif',80,90],['Eight.gif',200,300],['Nine.gif',100,100]];


var zxcCnt=0;

function SlideShow(zxcdir){
zxcCnt+=zxcdir;
zxcCnt=(zxcCnt>=zxcImages.length)?0:(zxcCnt<0)?zxcImages.length-1:zxcCnt;
var ssimg=document.getElementById('SS');
ssimg.width=zxcImages[zxcCnt][1];
ssimg.height=zxcImages[zxcCnt][2];
ssimg.src=zxcImgPath+zxcImages[zxcCnt][0];
}


//-->
</script></head>

<body>
<select name="Uip1" id="Uip1" onchange="f()" title="Units">
<option >111111</option>
</select>
<INPUT type="button" value="Next" onclick="SlideShow(1);" >
<INPUT type="button" value="Back" onclick="SlideShow(-1);" >
<img id="SS" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100" >
<div id="Text" ></div>

</body>

</html>

whitedove
02-01-2007, 10:20 PM
Ancora:

Thank you. I will give that one a shot as well. Now can that php slideshow be shown in the miniwindow I have on that page?


VWPhillips:

Thank you too. I have two pages of slides right now so will try that one also. I did notice you have it set up with gif files. I'm guessing that they can be either jpg or gif and doesn't matter..


thanks

Lori-Kim

Ancora
02-01-2007, 10:38 PM
Lori-Kim:

The code I posted creates its own, centered, window for the slide image, the exact size of the image. Sorry, but I didn't visit your site.

whitedove
02-01-2007, 11:03 PM
Good to know. Thank you very much.

Ancora
02-01-2007, 11:15 PM
Lori-Kim:

It's been a long time since I've dealt with that code. I should have tested it before I posted it. I'm sorry, but there's a slight error. I forgot a simple "px" on one line.

I'm editing my previous post with tested code.

Ancora
02-02-2007, 02:11 PM
Lori-Kim:

By now you probably realize that the amended code I posted is also in error.

I apolgize for my mistake.

I have edited the code, once again, and tested it, once again.

whitedove
02-02-2007, 03:39 PM
Ancora:

No worries. Thank you for your help.:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum