Ultimage Fade In Slide Show

[pawlinric]

http://www.dynamicdrive.com/dynamici...nslideshow.htm

first - thanks for a great site!
second - I really want to use the ultimate slide show. I got it to work, but my image window is tall & thin (like the example), not fat & wide(like I need it to be). I changed the "slideshow_width" and slideshow_height" to the correct pixel size but no change in the image. Can you help? I am working in FrontPage and was suprized I could get it running at all, if you know what I mean

[jscheuer1]

That's what you should do, however it seems something has gone awry.

Please post a link to the page on your site that contains the problematic script so we can check it out.

This may help with FP:

Well, you might be able to configure FP so as to allow you to insert code like this without it mangling it so much. Read the manual or Google for help on that. Another alternative, and what I recommend in all cases like this, is to get your page looking like you want using FP but without any scripts. Save a copy of that somewhere to work on later if the need arises. Next open the page in notepad or simple text and add the scripts in according to the installation instructions, including any customization you've added. Never load this version of the page into FP ever again. To preview it locally, use the browser. To upload it, use FTP (preferred) or your host's online uploading tool.

Here is another solution I ran across* but, since I do not use FP, I haven't tested it:

In a text editor open the page whose code you wish to preserve.

At the beginning of the section of code you wish to prevent FrontPage from modifying, add the following line of code:

<!--webbot bot="HTMLMarkup" startspan --> 

At the end of the code section, add the following line of code:

<!--webbot bot="HTMLMarkup" endspan --> 

Save the changes to the file. The next time the file is opened in FrontPage, FrontPage will not attempt to alter the code between the two HTMLMarkup tags.

*Posted in these forums by usace-lrc and perhaps others.

[WmIrvin]

Are you resizing AND resampling your images in FrontPage, so that they match the size of the display window? I have that to be a must. You can crop at the same time, but I find it works best to crop, resize, and then resample. I find it best to work on each image in a new, blank page; after you resample, save the new page, and after you save the whole page itself, FP will then save the individual elements (ie, the image you just resampled), but it will give you the opportunity to rename it so you don't overlay the original image. I have done this with many slideshows using the Ultimate Slideshow, and it works beautifully. John recently showed me how to add captions to them... another thanks to John for that.

Bill

[WmIrvin]

PS: If you changed the variables for the slideshow width and height, make sure the function where the code is actually executed also uses the variables and not hardcoded integers. Just a thought.

Bill

[cornelg]

I am having the same problem as the above user. I am just beginning to create the page,

I have tried altering the pixle height and width in the script, and have tried the webbot tags. I wanted to try the resizing and resampling the pics in FP, but am unclear on how to do that. Any chance you could walk me through it?

Thanks.
-Cornelg

[jscheuer1]

Just so we are all clear - this and only this is where you should adjust the height and width:

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
 
</script>

The line in green is a comment, instructions. The next two lines each control an instance of the slideshow. If you only have one slideshow on your page, you only need one of these.

[SandySimmons]

Just so we are all clear - this and only this is where you should adjust the height and width:

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
 
</script>

The line in green is a comment, instructions. The next two lines each control an instance of the slideshow. If you only have one slideshow on your page, you only need one of these.

I am trying to expand the width of the slide show 100% so that when it is opened, no matter what resolution, it will cover the whole width of the page because it right on top of a horizontal menu that expands 100% of the length. Is it possible to use percentage instead of pixel?

[jscheuer1]

I am trying to expand the width of the slide show 100% so that when it is opened, no matter what resolution, it will cover the whole width of the page because it right on top of a horizontal menu that expands 100% of the length. Is it possible to use percentage instead of pixel?

Yes, and it will horribly distort your images in many cases. Use a different design.

If you must do this anyway, Use this style in the head of the page:

<style type="text/css">
#master0, #master0 * {
width:100%!important;
}
</style>

If the images are not prone to pixelation when enlarged by the browser or to artifacts when shrunk by the browser, and can survive being vertically cropped without looking stupid, this would actually work out. Or if they can survive resizing in only one dimension better than they can deal with cropping, add these styles instead:

<style type="text/css">
#master0, #master0 *{
width:100%!important;
}
#master0 img {
height:225px;
}
</style>

Set the height to the actual height of the images. In either case, the slide show height must also be set to this number in the call:

new fadeshow(fadeimages, 140, 225, 0, 3000, 0)

[SandySimmons]

Yes, and it will horribly distort your images in many cases. Use a different design.

If you must do this anyway, Use this style in the head of the page:

<style type="text/css">
#master0, #master0 * {
width:100%!important;
}
</style>

If the images are not prone to pixelation when enlarged by the browser or to artifacts when shrunk by the browser, and can survive being vertically cropped without looking stupid, this would actually work out. Or if they can survive resizing in only one dimension better than they can deal with cropping, add these styles instead:

<style type="text/css">
#master0, #master0 *{
width:100%!important;
}
#master0 img {
height:225px;
}
</style>

Set the height to the actual height of the images. In either case, the slide show height must also be set to this number in the call:

new fadeshow(fadeimages, 140, 225, 0, 3000, 0)

A BIG THANK YOU! I appreciate your response and I thank you a thousand times over for your help.