Spry Slideshow Loading Color

Hello, does anybody know if the Spry Slideshow Loading Color can be changed from Black?
None of the CSS seems to affect it. Any help would be appreciated.

In the HEAD section of your document you have
<style type="text/css">
body {
    background-image: url(Image/BG1a.png);
    margin-left: 20px;
    margin-top: 20px;
#ImageSlideShow.ImageSlideShow {
    width: 200px;
    height: 133px;
    border: solid 1px #000000;
#ImageSlideShow .ISSClip {
    background-color: #000000;
</style>
In the second and third selectors you have set respectively the border color and the background colour as black. Change those colours to suit.
Gramps

Similar Messages

Problem with Spry Slideshow Basic (1.0) in IE9

We've just added a Spry slideshow to a website and it works perfectly fine. Trouble is in IE9, just before the image loads in for a split second you can see a 'square broken image' icon. Why does this display in IE9 and in no other browser?
How do we fix this in IE9?
Thanks!

The missing image icon is definitely there - for a split second (or longer depending on the load time).
I have attached two screenshots (one from the homepage and the other from the top left of an interior page). You can see the icon at the top center of the rotating images.
Why would this happen ONLY in IE and no other browser? Is there a workaround for IE so it does not display this 'broken' image prior to the Spry Slideshow loading in?
Thanks for your time!
The icon can be seen at the top center of the imageS below...

Spry Slideshow Shows All While Loading

The Spry Slideshow I built shows all the slides at once while it is loading for the first time. Is there a way to quell this, as it makes the viewer a little queasy -- especially on slow-loading connections. I tried moving the "unobtrusive" javascript file to the end of the page, but that did nothing.
Suggestions?

Excellent suggestion!
First, here are the JS files that get linked in the head of the web page:
SprySlidingPanels.js
SpryDOMUtils.js
Second, here is the basic structure of the slideshow (someone else worked on the CSS, so I cannot vouch for it--though the same thing seems to happen in any slideshow I build, so I seriously doubt there is a CSS issue causing this.)
<div id="newsTicker">
<div id="ticker" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
            <div id="item1" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="next"><a href="#" id="link2">Next >></a></div>
            </div>
            <div id="item2" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link1">Prev <<</a></div>
                <div class="next"><a href="#" id="link3">Next >></a></div>
            </div>
            <div id="item3" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link2">Prev <<</a></div>
                <div class="next"><a href="#" id="link4">Next >></a></div>
            </div>
            <div id="item4" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link3">Prev <<</a></div>
                <div class="next"><a href="#" id="link5">Next >></a></div>
            </div>
            <div id="item5" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link4">Prev <<</a></div>
            </div>
</div>
</div>
    <div class="bottback">
        <p class="navLinks">
          <a href="#" id="link1">Link</a> |
          <a href="#" id="link2">Link</a> |
          <a href="#" id="link3">Link</a> |
          <a href="#" id="link4">Link</a> |
          <a href="#" id="link5">Link</a>
        </p>
    </div>
</div>
Lastly, here is the "unobtrusive" code:
//Declare the variable name outside the function so it is global.
var sp;
function InitPage()
sp = new Spry.Widget.SlidingPanels("ticker");
Spry.$$("#link1").addEventListener("click", function(){sp.showPanel('item1');return false; }, false);
Spry.$$("#link2").addEventListener("click", function(){sp.showPanel('item2');return false; }, false);
Spry.$$("#link3").addEventListener("click", function(){sp.showPanel('item3');return false; }, false);
Spry.$$("#link4").addEventListener("click", function(){sp.showPanel('item4');return false; }, false);
Spry.$$("#link5").addEventListener("click", function(){sp.showPanel('item5');return false; }, false);
Spry.Utils.addLoadListener(InitPage);
What's weird is that I seem to be the only soul in the universe experiencing this. And yet, every single slideshow I develop shows all panels on load... why?

Text in Spry Slideshow, not working in Explorer.

Hi,
I have attempted to search for a similar topic, but am not able to find anything.
I have input the spry slideshow into my page, and it is fully functional for safari, chrome, firefox, but seems like it is only not working in IE.
The text that is supposed to be showing up to the right of the images is not showing with IE.
I had read a couple things on opacity, or such but am not sure if it applies to the text as well.
www.i4homedesign.ca
This is the first time I have posted on this forum and am not sure if I need to be including anything else.
Thanks
i4homedesign.

Here is the code for the Spry Slideshow if it helps...
<link href="Spry-UI-1.7/css/ContentSlideShow/wanderlust/wanderlust-brown.css" rel="stylesheet" type="text/css">
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryContentSlideShow.js" type="text/javascript"></script>
<script type="text/xml">

</script>
<style type="text/css">
a:link {
color: #FFF;
a:visited {
color: #CCC;
a:hover {
color: #999;
body,td,th {
font-family: "MS Serif", "New York", serif;
</style>
</HEAD>
<BODY text="#FFFFFF" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<table align="center" width="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><br></td>
</tr>
<TABLE align="center" WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
    <TD ROWSPAN=2><IMG SRC="images/header_01.gif" WIDTH=22 HEIGHT=112 ALT=""></TD>
    <TD COLSPAN=3><IMG SRC="images/header_02.gif" WIDTH=959 HEIGHT=90 ALT=""></TD>
    <TD ROWSPAN=2><IMG SRC="images/header_03.gif" WIDTH=19 HEIGHT=112 ALT=""></TD>
</TR>
<TR>
    <TD><IMG SRC="images/header_04.gif" WIDTH=13 HEIGHT=22 ALT=""></TD>
    <TD><IMG SRC="images/header_05.gif" ALT="" WIDTH=929 HEIGHT=22 border="0" usemap="#Map"></TD>
    <TD><IMG SRC="images/header_06.gif" WIDTH=17 HEIGHT=22 ALT=""></TD>
</TR>
<TR>
    <TD COLSPAN=5><IMG SRC="images/header_07.gif" WIDTH=1000 HEIGHT=8 ALT=""></TD>
</TR>
</TABLE>
<table align="center" width="930" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td><br>
      <h1 align="center">SEE YOUR DREAMS BEFORE YOU BUILD</h1>
      <br>
      <div id="ImageSlideShow" align="center">
        <div class="article">
          <div class="photo"> <img src="Images/house-blueprint.jpg" width="370" height="247">
            <div class="caption">COMPREHENSIVE CONSTRUCTION DOCUMENTS</div>
          </div>
          <div class="story">
            <div class="banner">
              <div class="title">FULL WORKING PRINTS</div>
              <div class="subTitle">SOLID DESIGN</div>
            </div>
            <div class="content">
              <p>Framing and homebuilding experience.
                Incorporating both inspired creativity and practical design.</p>
            </div>
          </div>
        </div>
        <div class="article">
          <div class="photo"> <img src="Images/Home Render Image_1.png" width="1024" height="600">
            <div class="caption">LEADING EDGE 3D RENDERING</div>
          </div>
          <div class="story">
            <div class="banner">
              <div class="title">PHOTO REALISITC CAPABILITY</div>
              <div class="subTitle">LEADING EDGE RENDERINGS</div>
            </div>
            <div class="content">
              <p>Constantly seeking to be on the edge of new technology. Providing customers with comprehensive visualization of their home.</p>
            </div>
          </div>
        </div>
        <div class="article">
          <div class="photo"> <img src="Images/Heyn Bathroom Thea 2 Bloom.png" width="1328" height="774">
            <div class="caption">COMPETITIVE RATES, PROMPT TIMELINES</div>
          </div>
          <div class="story">
            <div class="banner">
              <div class="title">COMPETITIVE RATES</div>
              <div class="subTitle">Reasonable timelines.</div>
            </div>
            <div class="content">
              <p>Providing exceptional service in every aspect of the design process of your home.</p>
            </div>
          </div>
        </div>
        <div class="article">
          <div class="photo"> <img src="Images/Thea-Image-11097.gif" width="803" height="522">
            <div class="caption">INNOVATIVE DESIGN</div>
          </div>
          <div class="story">
            <div class="banner">
              <div class="title">INNOVATIVE DESIGN</div>
              </div>
            <div class="content">
              <p>Whether you're seeking a 'Ranch' house, 'Modern' two story, or 'Arts and Craft' bungalow or other style, we provide that "Little extra".</p>
            </div>
          </div>
        </div>
      </div>
      <script type="text/javascript">
// BeginOAWidget_Instance_2141541: #ImageSlideShow
var ImageSlideShow = new Spry.Widget.ContentSlideShow("#ImageSlideShow", {
widgetClass: "WLBSlideShow",
displayInterval: 8000,
transitionDuration: 2000
// EndOAWidget_Instance_2141541
</script>
    <br>
      <H2 align="center">PREMIERE RESIDENTIAL DRAFTING COMPANY</H2>
      <h3 style="margin-left:200">- Based in the Peace Region.<br>
        - Comprehensive design process.<br>
        - Full working prints.<BR>
        - Leading edge 3D imaging/rendering.<BR>
      </h3>
      <P align="center"> </p></td>
</tr>
</table>

Menu behind spry slideshow dreamweaver cs5?

Using Dreamweaver CS5
Hi. I have a site with a css3 dropdown menu that seems to work fine on all of my pages except my photo gallery page. The menu appears behind the Spry Slideshow with Filmstrip that I got from the Widget Browser.
The site is not live and only on my local machine but here is the page html in a text doc: http://www.210usa.com/index.txt
Here is the main css: http://www.210usa.com/css_prob.txt
Here is the slideshow css: http://www.210usa.com/css_slideshow.txt
I have changed the z index but that is not helping at all. I found this for problems with flash docs but I am a real novice and do not know how to even put these tags in my code. Any help would be greatly appreciated.
Thanks

Grüss Dich sailor,
in my opinion "SpryTabbedPanels" actually only do what they should to do and so it inevitably leads to the covered menu items. I played a little bit around with the width from your "css3menu1/style.css"
height:22px;line-height:22px;border-width:0 0 3px 0;border-style:none;border-color:#009900;border-radius:10px;-moz-border-radius:10px;-webk it-border-radius:10px;padding:3px 10px; width: 650px;}
and I got this:
so you can see what I mean. To correct this you had to put down your "photo gallery for Mystic Pizza II" so far, till there is enough space for the panel. And therefore I would prefer a solution by using a "SpryMenuBarVertical" leftmost on your page (if you mean it's necessary so too on the right).
Glück auf!
Hans-Günter

Spry Slideshow with Filmstrip not working in IE Browsers

I'm working on a brand new website design and am trying to incorporate the Spry Slideshow with Filmstrip on a lot of the pages. It works and loads great on every browser except IE versions. On IE it will show it correctly for a second and then changes it to show one picture above the other. Can someone please help me figure out what to do to make it work for IE?
Here's a link to one of the test pages.
http://4034.sandbox.i3dthemes.net/oceankayakbanzai.html
Thanks for your help in advance!

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

Anyone having a problem with iMovie in Mavericks v 10.9.3 ? when previewing the a slideshow the colors all disappear after the first image.

Anyone having a problem with iDVD in Mavericks 10.9.3? When previewing a slideshow all color is lost after the first image.

Is your problem with iMovie as the title suggests or with iDVD?

How to load color table in a indexed mode file??

How to load color table in a indexed mode file??
Actually, if i opened a indexed file and want to edit color table by loading another color table from desktop (or any other location), any way to do this through java scripting??

continuing...
I wrote a script to read a color table from a GIF file and save to an ACT color table file. I think it might be useful for someone.
It goes a little more deeper than the code I posted before, as it now identifies the table size. It is important because it tells how much data to read.
Some gif files, even if they are saved with a reduced palette (less than 256), they have all the bytes for the full color palette filled inside the file (sometimes with 0x000000). But, some gif files exported in PS via "save for web" for example, have the color table reduced to optimize file size.
The script store all colors into an array, allowing some kind of sorting, or processing at will.
It uses the xlib/Stream.js in xtools from Xbytor
Here is the code:
// reads the color table from a GIF image
// saves to an ACT color table file format
#include "xtools/xlib/Stream.js"
// read the 0xA byte in hex format from the gif file
// this byte has the color table size info at it's 3 last bits
Stream.readByteHex = function(s) {
function hexDigit(d) {
    if (d < 10) return d.toString();
    d -= 10;
    return String.fromCharCode('A'.charCodeAt(0) + d);
var str = '';
s = s.toString();
     var ch = s.charCodeAt(0xA);
    str += hexDigit(ch >> 4) + hexDigit(ch & 0xF);
return str;
// hex to bin conversion
Math.base = function(n, to, from) {
     return parseInt(n, from || 10).toString(to);
//load test image
var img = Stream.readFromFile("~/file.gif");
hex = Stream.readByteHex(img);      // hex string of the 0xA byte
bin = Math.base(hex,2,16);          // binary string of the 0xA byte
tableSize = bin.slice(5,8)          // Get the 3 bit info that defines size of the ct
switch(tableSize)
case '000': // 6 bytes table
tablSize = 2
break;
case '001': // 12 bytes table
tablSize = 4
break;
case '010': // 24 bytes table
tablSize = 8
break;
case '011': // 48 bytes table
tablSize = 16
break;
case '100': // 96 bytes table
tablSize = 32
break;
case '101': // 192 bytes table
tablSize = 64
break;
case '110': // 384 bytes table
tablSize = 128
break;
case '111': // 768 bytes table
tablSize = 256
break;
//========================================================
// read a color (triplet) from the color lookup table
// of a GIF image file | return 3 Bytes Hex String
Stream.getTbColor = function(s, color) {
function hexDigit(d) {
    if (d < 10) return d.toString();
    d -= 10;
    return String.fromCharCode('A'.charCodeAt(0) + d);
var tbStart = 0xD; // Start of the color table byte location
var colStrSz = 3; // Constant -> RGB
var str = '';
s = s.toString();
     for (var i = tbStart+(colStrSz*color); i < tbStart+(colStrSz*color)+colStrSz; i++) {
          var ch = s.charCodeAt(i);
          str += hexDigit(ch >> 4) + hexDigit(ch & 0xF);
      return str;
var colorHex = [];
importColors = function (){
     for (i=0; i< tablSize; i++){ // number of colors
          colorHex[i] = Stream.getTbColor(img, i);
importColors();
// remove redundant colors
// important to determine exact color number
function unique(arrayName){
     var newArray=new Array();
     label:for(var i=0; i<arrayName.length;i++ ){
          for(var j=0; j<newArray.length;j++ ){
               if(newArray[j]==arrayName[i])
                    continue label;
          newArray[newArray.length] = arrayName[i];
     return newArray;
colorHex = unique(colorHex);
// we have now an array with all colors from the table in hex format
// it can be sorted if you want to have some ordering to the exported file
// in case, add code here.
var colorStr = colorHex.join('');
//=================================================================
// Output to ACT => color triplets in hex format until 256 (Adr. dec 767)
// if palette has less than 256 colors, is necessary to add the
// number of colors info in decimal format to the the byte 768.
ColorNum = colorStr.length/6;
lstclr = colorStr.slice(-6); // get last color
if (ColorNum < 10){
ColorNum = '0'+ ColorNum;
cConv = function (s){
     var opt = '';
     var str = '';
     for (i=0; i < s.length ; i++){
          for (j=0; j<2 ; j++){
               var ch = s.charAt(i+j);
               str += ch;
               i ++;
          opt += String.fromCharCode(parseInt(str,16));
          str = '';
     return opt
output = cConv(colorStr);
// add ending file info for tables with less than 256 colors
if (ColorNum < 256){
     emptyColors = ((768-(colorStr.length/2))/3);
     lstclr = cConv(lstclr);
     for (i=0; i < emptyColors ; i++){
          output += lstclr; // fill 256 colors
output += String.fromCharCode(ColorNum) +'\xFF\xFF'; // add ending bytes
Stream.writeToFile("~/file.act", output);
PeterGun

Thumbnail images not showing up in my Spry slideshow

Hello - Everything seems to be working in my Spry slideshow. However, my thumbnail images are not showing up in Live view or browser. The images are all in the correct folder. Here is what the script looks like:
<ul id="ImageSlideShow" title="Our Products">
        <li><a href="images/ss_penny.jpg" title="All Things Pennies"><img src="images/ss_penny_thumb.jpg" alt="" /></a></li>
        <li><a href="images/ss_rides.jpg" title="Children's Kiosks"><img src="images/ss_rides_thumb.jpg" alt="" /></a></li>
        <li><a href="images/ss_ireality.jpg" title="Simulators"><img src="images/ss_ireality_thumb.jpg" alt="" /></a></li>
        <li><a href="images/ss_carousels.jpg" title="Carousels"><img src="images/ss_carousels_thumb.jpg" alt="" /></a></li>
        <li><a href="images/ss_candy.jpg" title="Candy Kiosks"><img src="images/ss_candy_thumb.jpg" alt="" /></a></li>
     </ul>
      <script type="text/javascript">
Is there something I'm missing?
Thank you

There is nothing wrong with the markup that you have shown, hence the problem will be located somwhere else.
Gramps

Spry accordion defaulting colors in IE

Hi all:
I have built a Spry accordian with color styles in the css
file which work fine in Safari but are defaulting to bright blue
and aqua in IE7. Can anyone tell me the css or js mods I should
make to fix the IE issue?
K.

Well, deleting the two rules for focus in the css file seemed
to do the trick...

Spry:state="loading" for Spry.Utils.updateContent

It would be very handy to be able to use something like
spry:state="loading" for Spry.Utils.updateContent. Right now it
seems you can only use the :state="loading" for regions. Makes
sense but being able to activate the loading div while update
content is running would also be very handy. To that matter for
waiting for tabs to load, etc.

Cool. Thanks for the reference, Andrew!

Spry Slideshow Error

I am using Dreamweaver CS5.5 from the 5.5 Master Collection
This has been addressed before, but I didn't quite understand the fix (and it seemed like a lot of other people didn't as well). So I am re-posting this question.
I am using a Spry Slideshow on my website, and when uploaded to the server, these are the errors I recieve:
SpryPanelSet.js requires SpryWidget.js!
SpryFadingPanels.js requires SpryPanelSet.js!
SpryImageSlideShow.js requires SpryWidget.js!
SpryPanAndZoomPlugin.js requires SpryImageSlideShow.js!
The slideshow works great when previewed in all 4 browsers, but once uploaded to my server, it doesn't work in any browser.
The first time this was posted, this link was posted as a fix, but I have no idea what to do with this information: http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js
The original post/question is here: http://forums.adobe.com/thread/771773?decorator=print&displayFullThread=true
I am very new at web development, so please make your answers very clear and easy to follow! Also know, my slideshow is within an APDiv.
My website can be found here: http://www.leapfest.com
Thank you ahead of time for your help and I hope to hear from you soon! I can't keep that non-functioning slideshow online for too long!
EDIT: I have removed the slideshow from the website to avoid deterring traffic.

I found this answer on the same forum I was looking at previously. I must have missed it last time. I don't know why it works, but it does.
IN the Files window (F8)
Set to local server, find Spry-UI-1.7/includes/widget.js right click, edit, rename to widgetTEST -DONT UPDATE changes to related files.
Upload the renamed file to server using the upload arrow in file control, Click NO for dependent files, we just need that one.
Set to show remote server and rename the file as per Step 1, but this time change the name back from widgetTEST to widget.js
Repeat Step 3 for local server
I also enabled Cloaking on the file on local server so it didnt try to upload that file again. If you used another program or webhost filemanagement to get the working copy onto your remote server, use DW to Download the file from your server so it is synchronised
Thanks to toofewloginnames for this response!!!
You can see it in action at leapfest.com

Spry slideshow has a border around

How can I remove the border around the spry slideshow?
the website test is here:
http://www.ilovedoingwebsites.com/web/london/default.htm
It is anoying. Thank you

Hello, UPLee.
Thank you for visiting Apple Support Communities.
Try closing all open applications in multitasking and power cycling the device. Test accessing the application again. This could be related to VoiceOver being enabled. If this is the case you will experience this issue on all applications if touched and hear audio feedback. The second article will show you how to check and disable this feature if enabled.
iOS: Force an app to close
http://support.apple.com/kb/ht5137
iOS: Configuring accessibility features
http://support.apple.com/kb/HT5018
Cheers,
Jason H.

Spry Slideshow With Filmstrip -- works in Dreamweaver, forever loads online!

http://toights.com/strut.html
I'm fairly new to this, and after hours of figuring this thing out I finally have it customized and working ... in Dreamweaver! On the live site, everything is fine except for the main display that keeps loading.
I did my best searching the forums, and found only one potential solution (http://forums.adobe.com/thread/881855) which didn't work for me (and you'll see it in the code where it's linked to labs.adobe.com rather than my file). It can't be directory structure or nothing would work, right? It has to be something teensy weensy that my amateur eyes can't pick out of the code. Help?
I suppose after this I'm going to have that pesky "works in FireFox and Chrome But Not in IE" issue...

Okay, found out what the problem was. I upload through Dreamweaver's Site/Put option, and although I always upload support files, it failed to upload the large images (though somehow uploaded the thumbnails located in the same folder).
Simple, stupid solution, and I should've known better than to trust the auto-upload rather than to assume it worked. I am forever tainted by Dreamweaver's uploading and will always doublecheck my FTP client software now.

Creating Spry slideshow

I have the following on my page:
- A Spry table populated with data from an XML file and
repeating for each record in the XML file
- The TR's in the table are linked to change a dynamic image
that loads in a DIV on the right
This works fine but I want there to be a transition on the
images when the link is clicked in the Spry table. I have played
around with Spry Effects and they work fine on things that are
already on the page, but what about when you are loading images
after clicking links and you want them to fade in on load.
Using Dreamweaver, how can this be done? Is it a case of
hand-coding as I can't see how to do it using commands etc. in
Design view.
Cheers,
oobie

"DC_Eric" <[email protected]> wrote in message
news:f1nsp7$21n$[email protected]..
>I am having the same issue. I seen the demo too however
there are no
> "Instructions" on how to achieve this effect. It seems
you have to
> reverse
> engineer the page to try to figure out how they did it.
I have also
> noticed
> that the code on the spry demo pages is different than
the code that
> my Dw CS3
> creates
Hi Eric,
I can't offer a free slideshow, but in terms of a totally
automated
solution for Dreamweaver CS3 (or earlier versions), Slide
Show Magic has
been very well received. You can read through the features
here:
http://www.projectseven.com/products/galleries/ssm/index.htm
And see the live demos here:
http://www.projectseven.com/products/galleries/ssm/ssm_03.htm
The leftmost icon on the toolbar will reveal menu choices
linking to all
demos.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Spry Slideshow Loading Color

Similar Messages

Maybe you are looking for