Slideshow within a graphic

[Jim Weinberg]

Does anyone know if there's a slideshow script that displays the pics inside another image (like the attached picture frame)? I need it to have captions on the pics. I've looked at a number of scripts and the only ones that come close display the slideshow in the background. I need the "holding" graphic to be the background.

The script needs to be cross browser compatable and can't use the "background=" parameter of the Body tag.

Thanks for your help.

[jscheuer1]

I'm not aware of any that automatically show over a background. The Ultimate Fade-in Slideshow:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

and others can. With the above linked script you can accomplish it with a bit of clever css style. The script itself may be used 'as is'.

If you set it up live with your images and put the background image you want to use on that same page as an ordinary image so I can see it, I can show you how. Once you have the basic template for how it's done, you can probably extend/tweak it for a wide range of variations.

There are a few ways to go about it in fact.

You might not really need a background image. You might be OK just superimposing the slideshow division over the 'background' image as an ordinary image.

Or you might want to 'cut' a transparent hole in the 'background' image and superimpose it on the slideshow.

The smoothest integration might be to make the background image a true background image for the slideshow division and its script generated gallerylayer classed divisions.

However it's done a bit of trial and error might be required to get things to line up as desired.

[Jim Weinberg]

Thanks for the info. I've looked at the Ultimate Fadein Slideshow and I think it will work if I just put it in a table with a fancy border. Not really what I want to do, but better than nothing. If you can figure out how to use it and have the slideshow inside another graphic, that would be ideal.

Again, thanks for the response.

Jim

[jscheuer1]

Like I said, set it up on a separate page using the images you intend to use. Or even on a page like you've just mentioned in your post. Include on that page the background you want, either behind the show, or as a separate image on the page. Give me a link to the page.

The slideshow uses a default black background for itself and two gallery layer divsions that it generates (these are used to achieve the fading effects). That (black background) can be overridden with css style. An image can be used, but positioning it optimally can be tricky, it depends upon how it all lays out, and the images involved dictate that. I've done this many times and it almost always can be worked out really well.

If you want to play with it yourself, the basic css style is:


<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
background-color: white !important; /* fall back background color if image is missing */
background-image: url("pathto/your_background_image.jpg") !important; /* the background image to use */
background-position: 536px 549px !important; /* left and top coordinates for positioning the background image */
}
</style>

where fadeshow1 is the wrapperid for the slideshow. The background position may or may not be needed. In your case if it is needed, it will probably be much lower numbers. The !important keywords are required to override the scripted values for these elements. Also, you may want to make your slideshow's dimensions larger than the images. They will be centered within it, leaving room around the edges for the background image to show through.

If you want more help with it, put up a page like I said above and give me a link to it.