Javascript Gallery Help

**Flakster** · 07-19-2005

I have a nice little piece of code and displays a picture for a few seconds, then switchs to the next (I believe it was written by someone on this board, props to them!). Very clean and simple, but it is a little too simple. It displays all the pictures the same size, which can cause some pictures to distort. Is there any way to get around this? Such as setting certain pictures to have a different width and height?

Here is the script...

Code:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000;
// Duration of crossfade (seconds)
var crossFadeDuration = 1;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/1.jpg'
Pic[1] = 'images/2.jpg'
Pic[2] = 'images/3.jpg'
Pic[3] = 'images/4.jpg'
Pic[4] = 'images/5.jpg'
Pic[5] = 'images/6.jpg'
Pic[6] = 'images/7.jpg'
Pic[7] = 'images/8.jpg'
Pic[8] = 'images/9.jpg'
Pic[9] = 'images/10.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply  ();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play(  );
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//  End -->
</script>

<body onLoad='"runSlideShow()">

Thanks.

**CrazyNorman** · 07-19-2005

There are several problems with your code. First off, the code which would cause the image to be restrained to size would be in your creation of the image "SlideShow", which you have not even pasted. Perhaps you do not have this, in which cause it should not be working at all. Second off, "<body onLoad" has an apostrophy which it should not. Note, I tested this in Firefox, not Internet Explorer, so your motion may vary. Anyway, here is some code which works, picture changing size and all.

Code:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000;
// Duration of crossfade (seconds)
var crossFadeDuration = 1;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/1.jpg'
Pic[1] = 'images/2.jpg'
Pic[2] = 'images/3.jpg'
Pic[3] = 'images/4.jpg'
Pic[4] = 'images/5.jpg'
Pic[5] = 'images/6.jpg'
Pic[6] = 'images/7.jpg'
Pic[7] = 'images/8.jpg'
Pic[8] = 'images/9.jpg'
Pic[9] = 'images/10.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply    ();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play(    );
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//  End -->
</script>

<body onLoad="runSlideShow()">
<html>
<body>
<img src="images/1.jpg" name="SlideShow">
</body>
</html>

Enjoy your day.

**treenef** · 07-20-2005

This link should provide you with more than enough
information to get you started.

http://www.dynamicdrive.com/dynamicindex14/index.html

**Flakster** · 07-20-2005

Thanks guys.

**Flakster** · 07-20-2005

Ok I went to dynamicdrive.com and got this script...

Code:

<script language="JavaScript1.2">

var variableslide=new Array()

//variableslide[x]=["path to image"]

variableslide[0]=['price001.png']
variableslide[1]=['price002.png']
variableslide[2]=['price003.png']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='800px' //set to width of LARGEST image in your slideshow
var slideheight='600px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

I need to make sure that the pictures do not exceed 800px by 600px on screen, how can I do this without having all the pictures be 800 by 600 (Which would cause some to distort)?

Code:

var slidewidth='800px' //set to width of LARGEST image in your slideshow
var slideheight='600px' //set to height of LARGEST iamge in your slideshow, plus any text

That code doesn't do it.

**treenef** · 07-21-2005

I need to make sure that the pictures do not exceed 800px by 600px on screen, how can I do this without having all the pictures be 800 by 600 (Which would cause some to distort)?

I don't think it would distort the image. The information for the script says it provides a slideshow where the user needn't worry about the size of their pictures. Distortion shouldn't be an issue here.

Second, remember this is just a template. So once you've managed to get your slideshow working you may have a problem incorporating it into your current web page. For example, how do you get the slideshow to sit just after your menu bar or whatever?

A solution to this work be to open up a web editor, such as microsoft frontpage, and then play around with the code. In most circumstances this should be enough however, by changing the code you may encounter other problems with the rest of your script. For example, your changes could affect the way other dynamic elements of your website are displayed.

Third, if you intend to actually use this on the net, be aware that just because the script looks ok in your browser and on your operating system, doesn't necessarily mean it will look the same for everyone else. Lots of people use Firefox as an alternative to IE, be aware of the differences exhibited when using these browsers.

If you're serious about web design, may you might want to start from scratch- get a book on HTML or whatever. That way you will be able to create whatever you want where everything can sit on your page as you have envisaged. If not, it's probably gonna be a lot of trial and error, and more 'I hope this works' as opposed to 'I know this is gonna work.'

Thread: Javascript Gallery Help

Thread Tools

Search Thread

Display

Javascript Gallery Help

Similar Threads

JavaScript book recommendations

C# and JavaScript, how can I get Javascript to use a C# object?

Javascript question

Javascript: Error in FTP access

JavaScript grafic