Ultimate Fade-in slideshow (v1.5)

**elliott** · 12-10-2005, 03:13 PM

Hi everyone

(first post alert)

Ultimate Fade-in slideshow (v1.5)
http://www.dynamicdrive.com/dynamici...nslideshow.htm

Does anyone know how to make the images appear vertically (I'm guessing the equivalent of a HTML br tag or similar) and centered on the screen. I know HTML and CSS but DHTML and Javascript are still new to me (hence why I love Dynamic Drive). Any help would be appreciated.

Also is there anyway to use this script so that the images can be thumbnails in different places round the page rather than together?

Many thanks and I hope this isn't a stupid question (or two)

Elliott

**jscheuer1** · 12-10-2005, 04:03 PM

I'm not too clear on what you mean by 'appear vertically'. All images appear vertically as well as horizontally, otherwise they would not appear at all. The script can be centered on the page using the method described on the demo page for that:

Finally, some people have asked "How do I center the slideshow? Since IE and Firefox/Opera behaves differently when it comes to positioning a relatively positioned element, you'll need to use some Frankenstein CSS:

Code:

<style type="text/css">
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}

.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>

HTML Code:

<body>
<div class="centerdiv">
CODE OF STEP 2 HERE
</div>
</body>

Originally Posted by elliott

Also is there anyway to use this script so that the images can be thumbnails in different places round the page rather than together?

A thumbnail is a small representation of a larger image. Is this what you really mean? The images themselves (not thumbnails of them) can be made to appear in various locations on the page. This may require modifying the script to include location coordinates for each image. Are you envisioning the images popping up at various places on the page, one at a time (each time one appears somewhere, another disappears from wherever it is) or simply that after the page loads, various images fade into view at various places simultaneously and then remain there or, again after the page loads, various versions of the slideshow (perhaps each using the same images) appear at various places around the page? What exactly?

**elliott** · 12-10-2005, 04:11 PM

I wanted small images like an illustration or drop cap at the start of paragraphs that then changes every so often, I could use an animated gif but there are reasons why that isnt really practical... what I meant by vertically is in a vertical line one on top of the other...

image

image

image

rather than

image image image image

**jscheuer1** · 12-10-2005, 04:58 PM

OK, to achieve that effect using this script, the most straightforward method would be to utilize its multiple slideshows on a page option.

Following the instructions, setup one 'show' for each drop cap or illustration sequence you will be using. Then, where you want each one to appear on the page, use a separate script block to call each one. Instead of:

Code:

<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>

as shown on the demo page, you can use several of these blocks, each with just one show called (and they can each be simplified a bit, this first one could be a drop cap letter o):

Code:

<table><tr><td><script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
</script></td><td>nce upon a time . . .</td></tr></table>

Relatively positioned containers within the table cells could tweak the exact alignment. Or many other layout schemes (including ones without tables) could be used to get the presentational alignment that you want. Another instance of the script could be used for another drop cap later on in the page (this one could be the letter a):

Code:

<table><tr><td><script type="text/javascript">
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
</script></td><td>s our heroes neared the castle . . .</td></tr></table>

and on and on.

**elliott** · 12-10-2005, 05:05 PM

Thanks for that.... that's one item on the wish list covered... lol!

How do I stick a "newline" between each of the images so that they are in a vertical stack.....

**jscheuer1** · 12-10-2005, 07:59 PM

When you say 'each of the images' you mean each slideshow don't you? The rendering of multiple slide shows already includes a linebreak between each one. This is the default rendering. On the demo page, they only appear side by side because they are formatted that way in the HTML using a table:

HTML Code:

 <table border="0" width="450" cellspacing="0" cellpadding="0">
      <tr>
        <td><!--webbot bot="HTMLMarkup" startspan --><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, pause, optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 1, 3000, 1, "R")

</script><!--webbot bot="HTMLMarkup" endspan i-checksum="41926" --></td>
        <td><!--webbot bot="HTMLMarkup" startspan --><script type="text/javascript">
new fadeshow(fadeimages2, 110, 110, 0, 4000, 0)

</script><!--webbot bot="HTMLMarkup" endspan i-checksum="15894" --></td>
      </tr>
</table>

The only tricky part here is that in the demo code on the demo page, two shows are shown bootstrapped from one script block. This was done (I imagine) to save space. The more normal way to render multiple shows on a page is for each to have its own bootstrap script block. Each individual show will behave (in most cases) like a block level element, like a division (<div></div>), a relatively positioned division to be exact, because that is what each one is. You can surround each one with whatever code you like.

**elliott** · 12-10-2005, 09:01 PM

Thanks a lot for all that -

so it kind of works like this?

Code:

<p>Section one</p>

<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")
 </script>
<p>Section Two</p>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
 </script>

<p>A load of text</p>

**jscheuer1** · 12-10-2005, 10:55 PM

You've got the general idea, if you are using these as drop caps, some tweaking of positioning will be required. This can be done in many ways. One method would be to make the position of the <p> elements you have containing the slideshows relative and adjusting each ones left and right properties to suit. A better method would be to leave their positioning default and just change their margins, negative margins may and may need to be used to position them appropriately as drop caps. There are other ways too numerous to mention.

**elliott** · 12-10-2005, 10:58 PM

Thanks John, I think first I will do the column set and then when I am more confident move on to the "drop caps"

Thread: Ultimate Fade-in slideshow (v1.5)

Thread Tools

Search Thread

Ultimate Fade-in slideshow (v1.5)

Solution?`

Bookmarks

Bookmarks

Posting Permissions