Spry UI Image Slideshow preview in IE8

Hello, sorry to re-ask a tired question, but I've scoured the forums and can't get a handle on the answer.
My issue: I have inserted the Spry Image Slideshow 7.1 widget in my dreamweaver (CS5) doc (thank you Widget Browser!), and made the necessary modifications. It shows up perfectly when previewing in Firefox and Opera. In IE8, the images display but in unordered list form only.
Things to note: I have NOT uploaded anything to the server yet, neither docs nor images, so unfortunatley I can't lead you to live view. Also, actually it is 2 slideshow widgets set side by side using a 2 column table. This might sound messy, but it did work in PREVIEW for all other browsers.
Here is the Spry-UI1.7 code:
@charset "utf-8";
/* SpryImageSlideShow.css - version 0.1 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
.ImageSlideShow {
    position: relative;
    width: 274px;
    height: 200px;
    overflow: hidden;
    border: 0px solid black;
.ImageSlideShow .ISSClip {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
.ImageSlideShow .ISSView {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
.ImageSlideShow .ISSSlide {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;     /* FIX FOR IE6/7 */
    height: 100%;     /* FIX FOR IE6/7 */
.ImageSlideShow .ISSControls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
.ImageSlideShow .ISSFirstButton, .ImageSlideShow .ISSLastButton {
    display: none;
.ImageSlideShow .ISSPreviousButton, .ImageSlideShow .ISSNextButton, .ImageSlideShow .ISSPlayButton {
    position: absolute;
    top: 0;
    display: block;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    background-repeat: no-repeat;
    text-indent: -10000em;
.ImageSlideShow .ISSPreviousButton {
    left: 0;
    width: 30%;
    background-image: url(ImageSlideShow/iss-back.gif);
    background-position: left center;
.ImageSlideShow .ISSPreviousButtonHover, .ImageSlideShow .ISSNextButtonHover, .ImageSlideShow .ISSPlayButtonHover {
    opacity: 0.5;
    filter: alpha(opacity=100);
.ImageSlideShow .ISSNextButton {
    right: 0;
    width: 30%;
    background-image: url(ImageSlideShow/iss-forward.gif);
    background-position: 100% 50%;
.ImageSlideShow .ISSPlayButton {
    left: 30%;
    width: 40%;
    background-image: url(ImageSlideShow/iss-play.gif);
    background-position: center center;
/* If the slide show is busy, show the busy icon in the view. */
.ImageSlideShow.ISSBusy .ISSView {
    background-image: url(ImageSlideShow/iss-busy.gif);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    filter: alpha(opacity=100);
/* If the slide show is playing, change the play button image to "pause" */
.ImageSlideShow.ISSPlaying .ISSPlayButton {
    background-image: url(ImageSlideShow/iss-pause.gif);
/* Don't show the player controls if the slide show is busy! */
.ImageSlideShow.ISSBusy .ISSPreviousButton,
.ImageSlideShow.ISSBusy .ISSNextButton,
.ImageSlideShow.ISSBusy .ISSPlayButton
    display: none;
If anyone sees anything outlandish sticking out to them, please let me know. I am super excited about the look of these widgets on our home page- thank you Spry & Dreamweaver teams!! Sorry again for not having a live view for you at this time.
Matt G.

Similar Messages

Center Spry Basic Image Slideshow on the webpage in Dreamweaver Cs6   ?

Hi, I'm working on a Website for a client in Dreamweaver CS6: northstarconservancy.org. How do I center the Spry Basic Image Slideshow on the pages? I've tried a few options and nothing has been effective, anyone? Thanks, Amanda

It would be easier to give you exact instructions if we could see your page. Do you have a link you could share?
In general, place a div on your page and give it the basic css for centering...
#divid {
     width:800px; (you can change the 800 to whatever width your slideshow uses)
     margin:auto;
Then place your slideshow within that div in your html...
<div id="divid"> all your spry slideshow info </div>
As long as you haven't used APDivs, or position:absolute on your site, which you should never do unless absolutely necessary (pun kindof intended), the div that the slideshow resides in will be centered within it's container.

Spry UI Image Slideshow

I'm pretty new to Dreamweaver and by no means and expert in web design and no nothing about writing HTML code. I have downloaded the Spry UI Image Slideshow to use on a web. I have figured out how to make my picture available by replacing the ones in the default configuration. However when each slide is displayed, it also show a slide title. Can anyone tell me how to change the slide titles? The title of the default slides are coming up on my slides!
Please can you make your reply as not technical as possible!!
Thanks

I'm pretty new to Dreamweaver and by no means and expert in web design and no nothing about writing HTML code. I have downloaded the Spry UI Image Slideshow to use on a web. I have figured out how to make my picture available by replacing the ones in the default configuration. However when each slide is displayed, it also show a slide title. Can anyone tell me how to change the slide titles? The title of the default slides are coming up on my slides!
Please can you make your reply as not technical as possible!!
Thanks

Spry Image Slideshow with Filmstrip IE8 Play/Back/Forward Arrows Problem

Please help me. I'm using the Spry Image Slideshow with Filmstrip widget on my web page: http://new.radcal.com/accugold2.html#sensoroptabs. In Firefox, Safari, Internet Explorer 9 it displays properly but in Internet Explorer 8 the gray Play/Back/Forward Arrows automatically appear on the Viewport (main large slide area) when the page loads and they do not go away, ever. Whereas in the other browsers these arrows only show up when I move my mouse into the viewport area and go away as soon as I take my mouse off the viewport area.
I need the arrows to behave in IE8 like they do in IE9, Firefox, etc. I do not know javascript but I imagine there is some javascript code that could solve this problem. Does anyone know of a solution? Please help me...

At the top of your document you have
<html>

<head>
Add the DOCTYPE as follows
<!DOCTYPE HTML>
<html>

<head>
Without a DOCTYPE on the very first line of the document, IE goes into Quirks Mode
Gramps
PS Normally I do not monitor this forum, hence this reply after having received your PM

Spry Image Slideshow issue in IE8 - Another Error

I looked at the other discussions pertaining to Spry Image Slideshow issues. The slideshow works well in Firefox but I'm getting an error in IE 8 .
https://www.devens.army.mil
Webpage error details   from SpryDOMEffects.js, line 389
Spry.Effect.CSSAnimator.stylePropFuncs["default"] = {
    get: function(ele, prop)
        return ele.style[prop];
    set: function(ele, prop, val)
        ele.style[prop] = val;                       (line 389)
Thank you for any help you can provide.

I've noticed that you fixed the problem can you tell me how to fix it?
having same problem here

Spry Image Slideshow - Large gap at top

My page layout has a main div with a left-floating column containing the menu and a few other bits and pieces.
The layout is the same for all pages.
When I insert the Spry Image Slideshow widget into the main div it leaves a space of around 400px above the slideshow. The pause and continue buttons appear in this space when the mouse is hovered over it. There is no other content in the main div on this page.
All other content on other pages, whether text or images or a combination of both start, as expected, just inside the main div top margin.
I'd appreciate any suggestions please?

I am unable to reproduce your problem I inserted Spry Slideshow w/ FilmStrip into a test page with a div with your #bodyCenter id applied to it and it works fine for me. I used BrowserLabs to preview it in 7 different browser on Mac and Windows.
Make sure that you have uploaded all of the dependent .js and .css files to your site. Send a url if you are still having problems.
Here is my working sample with your css div:
http://srichards.host.adobe.com/SprySlideShow.html

Spry Image Slideshow with Filmstrip, thumbnail problem in Safari

I'm adding a spry image slideshow with filmstrip in Dreamweaver CS5 on a Mac. I have a folder of images with a large and small (Thumbnail) version of the photos I'd like to use. I've relinked all of the images that are inserted as placeholders by the widget: Source for thumbnail versions and link for large versions. When I preview in Firefox all is well. When I preview in Safari, the filmstrip has white boxes rather than the thumbnail images. Everything else is fine. (It previews correctly in Safari before I change the links.) What am I doing wrong?

I have a similar problem. I've added a note to reference your problem. I've not got an answer to date.
Cliff

Spry Image Slideshow problems with IE?

I have set up the Spry Image Slideshow widget and it works beautifully in Firefox and Chrome. I'm having the same problems others have had. I've read through the various discussions on here and have sorted some of them but am still stumped on a couple things!
Here is the link to where I have it currently uploaded for testing purposes: www.wohowebdesign.com/sidestrand/gallery.php
My first problem was how the images just would not flow, skip all over and freeze. After I changed the DOCTYPE, this problem was gone.
My Second problem is now the images are blending ok, but when you go to use the controls to pause or click the arrows, a vertical line appears and does not go away. This is still occuring on my local computer tests, but the uploaded version seemed to work itself out... I have no idea how!!
My third problem is the alignment of the whole gallery box will not line up properly on the page. It is shifted to the right and this only happens when I view it in IE8 (not Firefox or Chrome). Unfortunately most of our school uses IE8 so I need to have it working perfectly before I put the new site live.
Any help or suggestions are greatly appreciated!
Thank you,
Debbie

mdr4win wrote:
i dont think you understood my question, wasnt about body background, but abut the spry image slideshow to work properly in IE
I was not talking about body background, but about having markup that screws up your document when using a browser. Body background just happened to be there. Perhaps you would do well to have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flittletreats.org%2F.
I have noticed that you ignored my solution; your document still shows two bodies.
Perhaps I should have mentioned that I tested in IE6 through to IE9 using IETester and the above was the only thing stopping IE from performing properly.
How did you determine that the slideshow was not working correctly in IE and which versions of IE?
Grumps

Spry Image Slideshow

I am having an issue with the widget Spry image slideshow-Basic (1,0), when i preview the slideshow it worked perfectly, once i have uploaded it to the server the slideshow doesn't load, it just loads the images in a line below eachother. When i open it up in I.E it sais there is an error on page.
Error Code:
<script type="text/javascript">
// BeginOAWidget_Instance_2141542: #ImageSlideShow_2
varImageSlideShow_2 = newSpry.Widget.ImageSlideShow("#ImageSlideShow_2", {
      widgetID: "ImageSlideShow_2",
      injectionType: "replace",
      autoPlay: true,
      displayInterval: 4000,
      transitionDuration: 2000,
      componentOrder: ["view"],
      plugIns: [ ]
// EndOAWidget_Instance_2141542
</script>
Your help would be much appreciated

In Dreamweaver CS5, I launch IE and it does show the pictures one on top of the other (when the message about running scripts or Activex controls shows up) and when I allow blocked content, it hangs. Maybe it has to do with your IE configuration.

Spry Image Slideshow does not work in Explorer

My spry image slideshow works fine in Safari and Firefox, but does not work in Explorer.
A small box shows up in IE 8, and absolutely nothing shows up in IE 7.
www.epaaudio.com
Any Suggestions?

How did you get your slideshow to play in Internet Explorer? I'm using the same slideshow on my new website and it plays fine in everything but IE versions. Here's a test page I'm working on... http://4034.sandbox.i3dthemes.net/oceankayakbanzai.html
I looked at the code for your page and didn't notice anything different on mine. But yours works... Let me know if you have any suggestions. Thanks!

SPRY Image Slideshow, compatibility problems with IE

Hello, i recently used the Spry image slideshow in my website. All works great in every browser except IE. I could actually get it to work when i changed the DOCTYPE from: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> TO: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
BUT,
that totally skrewed the rest of my content. also i added the meta tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > and that fixed the slideshow, but again skrewed my content.
Has anyone found a solution? i looked through past discussions but couldnt find one.

mdr4win wrote:
i dont think you understood my question, wasnt about body background, but abut the spry image slideshow to work properly in IE
I was not talking about body background, but about having markup that screws up your document when using a browser. Body background just happened to be there. Perhaps you would do well to have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flittletreats.org%2F.
I have noticed that you ignored my solution; your document still shows two bodies.
Perhaps I should have mentioned that I tested in IE6 through to IE9 using IETester and the above was the only thing stopping IE from performing properly.
How did you determine that the slideshow was not working correctly in IE and which versions of IE?
Grumps

Spry Image Slideshow Thumbnail's do not show properly

Hello World!
This is my first time using the forums here at Adobe.
My problem is that I have inserted a Basic Spry Image slideshow like so:
The size is ~ 250px by 200px
And once I go into live view, the slide show only displays the top right corner and not the whole image itself. I tried downsizing the image in design view to "look" like the same size of the thumbtails below but that did not do anything.
In my local file(not sure if you can see to the left) my images are saved in a file called 'images', and thumbs in a subfolder called 'thumbs'. (I read that images need to have same scr and link names?)
If anyone can help me out that would be great!! Thanks guys!

Okay, so I found my error, my Link photo was super duper big!
I played around with the resizing and it fitted better.

Why is the Spry image slideshow not showing all of the thumbnails?

Hi, I have a problem with the Spry image slideshow with filmstrip. I downloaded it and inserted all of my pictures and thumbnails. When I load it up in Firefox and IE seems to work perfectly.
However when one scrolls through the images, some of the thumbnails are not displaying. Also, sometimes some of the images won´t display at all. I have double checked the files and they are
all the correct size (100x100 for the thumbnails) and they are all available in the proper slideshow folder on my webpage. I am at a loss as to what the problem is, since it works fine for the other
images. Here is a link to the site:
http://priental-solar.de/referenzen.htm
Any help would be greatly appreciated. Thanks

All working OK here. All thumbnails and fullsize images appear OK.

Why are my Spry Image Slideshow slide titles not appearing sometimes?

I inserted a Spry Image Slideshow with Filmstrip Basic widget using 3 photos to try it out. It is working fine except for the slide titles.The slide titles appear in Firefox and in Opera, but not in Safari. Haven't tried it in IE browsers yet.
Any idea why the titles are not showing up all of the time?
Thanks.

All working OK here. All thumbnails and fullsize images appear OK.

Spry Image Slideshow with Filmstrip controls showing ABOVE images?

Hi all,
I've never used these forums before and apologise in advance for my first discussion being a request for help!
I recently added the Spry Image Slideshow with Filmstrip to a page and am not sure which property I need to modify to get the controls to show on top of the image. I think this is an issue with the two column layout I'm using but am not knowledgeable in the least about code and would appreciate your help.
http://gailspantry.com/testindex.
Many many thanks!
Rune

Hi folks, any ideas re this issue? Really hope someone can help.

Spry UI Image Slideshow preview in IE8

Similar Messages

Maybe you are looking for