Spry Content Slideshow buttons with IE8?

Hi,
Trying out the Spry Content Slideshow (Wanderlust Theme) 1.0. I insterted a link for one of the default buttons and it works in Firefox but not in IE8. On hover over or clicking does nothing.
<div class="content">
        <p>A few short miles from downtown San Francisco, horses roam in the fields of Marin County, California.</p>
        <a href="http://www.yahoo.com">
        <button type="button"><span><span><span>More Info</span></span></span></button>
      </a> </div>
Am I missing something?
Thanks,
Mike

Apply an onclick event to the link, for example instead of
<a href="../04Education/first.html">
              <button type="button">
              <span><span><span>Learn More</span></span></span>
              </button>
            </a>
use
<a href="../04Education/first.html" onclick="window.location = this.href;">
              <button type="button">
              <span><span><span>Learn More</span></span></span>
              </button>
            </a>
Gramps

Similar Messages

Help with Spry Content Slideshow

Hi, I like the new widget browser and how easy it makes adding widgets in dreamweaver, Top marks to the developers.
I have been having a play around with the spry content slideshow, with the possibility of using it on a small business website I am working on. I have managed to alter the width and height of the widget and everything looks and works great. I was however wondering how I would go about adding say a 250w x 80h logo above the banner on each slide, which would also require that the banner and story be lowered slightly.
Thanks in advance for any help anyone can offer with this.

I was just playing with Spry Content Slideshow earlier, and conveniently still have it open, so I'll give this one a shot, too. It looks like you've got two options embed a "logo bar" of some sort inside the the Slideshow, or (the easier method) wrap the Slideshow in another container. I just used a single banner image.
I gave embedding a try and placed a <div class="logo"><img/></div> before the first article, but the JavaScript overrode this, and added a new article. Moving this construct inside the first article created a fairly nice banner, keeping the rounded corners at the top. The construct, however, will need to be added to each article. I didn't like that too much, but it's just a personal preference.
The easy way (?) would be a wrapper, such as <div class="logo"><img /><div id="theSlideshow">...</div></div>, then style the ".logo" class as needed, maybe even copying portions of the style from ".WLBSlideShow" in "wanderlust-brown.css" for the rounded corners, and maybe giving ".logo" additional "padding-bottom" and ".WLBSlideShow" a negative "margin-top", to overlap the bottom of the logo area. Localized CSS modifications (placed after the linked CSS) might be something like the following?
.logo { background-color: #491e16; width:700px; border: solid 1px #39312e; -webkit-border-radius: 7px; background-color: #491e16; -moz-box-shadow: 5px 5px 10px gray; -webkit-box-shadow: 5px 5px 10px gray; box-shadow: 5px 5px 10px gray; } .logo img { width:100%; height:100px; padding-bottom:40px; } .WLBSlideShow { margin-top:-60px; margin-left:-1px; }
If you'd like to see the first method, I can put that up, but the HTML is a bit repetitive.
Hope this helps. If not you maybe someone!
Richard

Spry Content Slideshow (Wonderlust) behaving strangely in IE7

Hey all,
I am building a page which uses the Spry Content Slideshow - it renders nicely in Firefox, Chrome, and IE8 - but in IE7 the content to the right of the rotating slide show images "flickers" - that is, it flickers in and out, based on movement of the mouse pointer over it.
Here is a link to the page: https://www.drmyattswellnessclub.com/New Website/indexTEST.html
Has anyone seen this before and does anyone have a fix for this strange behavior?
Any help will be gratefully received!
Mark

I have corrected a bunch of the "errors" that it found - even adding alt tags to transparent spaceholder gifs and the like.
No comment
Others of the errors seem to make no sense - as might be expected of an automated checker - and yet others are in places that should make no difference to the function of the spry slideshow but could screw up the functionality of other features on the page if "corrected".
I have taken the liberty to abduct your slideshow and place it in a friendly environment, Please be free to check on its health here http://pleysier.com.au/wellness/
Now I'm at the point where tweaking the code to try to please the validator is running me around in circles...
If you think that it is merely a matter of pleasing the validator, you are in for a surprise
Unless there is some relatively straight-forward correction for the funky behavior of this slideshow thing in IE7 I'm just going to move on - my boss is getting impatient - and I'll find something else that ~does~ work...
Mmmm....!
If I were a html/css expert I would have written this thing clean in the first place - but I'm not; I'm just a poor boob that made the mistake of addmitting to have once hand-coded a website from scratch back in the dinosaur-days of the mid 1990's - and so I got tasked with upgrading this website "cause you know all about that kind of stuff!"
Down under we call that foot-in-mouth disease.
Frustrated...
I hope that the lighthearted comments above have relieved the tension. If you have any more Spry related problems, please do not hesitate to return here.
Gramps

Spry Content Slideshow Wonderlust

I am trying to implement the spry content slideshow wonderlust that I got from the adobe widget browser. I copied the code into the page where I want the slideshow to show up and it is not formatting correctly. It is evidently missing the stylesheet. How do I get the style sheet to make this widget work?
The following is the code that is pasted into the head section of the page.
<link type='text/css' href='Spry-UI-1.7/css/ContentSlideShow/wanderlust/wanderlust-brown.css' rel='stylesheet'/>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSelector.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSet.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryFadingPanels.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryContentSlideShow.js'></script>
In the section where I want the slideshow to show up I pasted the following code:
<div id="ImageSlideShow">
<div class="article">
    <div class="photo"> <img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" alt="San Francisco, CA" />
      <div class="caption">San Francisco, CA</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">Palace of Fine Arts</div>
        <div class="subTitle">Flowers of Spring, California</div>
      </div>
      <div class="content">
        <p>The Palace of Fine Arts was initially built for the Pan-Pacific Exposition in the 1930s, heralding San Francisco's rebirth after the 1906 earthquake.</p>
        <button type="button"><span><span><span>Click for Details</span></span></span></button>
      </div>
    </div>
</div>
<div class="article">
    <div class="photo"> <img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-8.jpg" alt="Horses" />
      <div class="caption">Horses</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">Marin County, California</div>
        <div class="subTitle">Bay Area's Best Secret</div>
      </div>
      <div class="content">
        <p>A few short miles from downtown San Francisco, horses roam in the fields of Marin County, California.</p>
        <button type="button"><span><span><span>More Info</span></span></span></button>
      </div>
    </div>
</div>
<div class="article">
    <div class="photo"> <img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-4.jpg" alt="Open Space" />
      <div class="caption">Open Space</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">Marin County</div>
        <div class="subTitle">Parkland</div>
      </div>
      <div class="content">
        <p>Marin County is blessed with acres of open spaces, both public and private. </p>
        <button type="button"><span><span><span>Get Packing!</span></span></span></button>
      </div>
    </div>
</div>
<div class="article">
    <div class="photo"> <img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-1.jpg" alt="Orchids" />
      <div class="caption">Orchids</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">Flower Garden</div>
        <div class="subTitle">Flora tour in Golden Gate Park</div>
      </div>
      <div class="content">
        <p>Orchids from all over the world can be seen in the Arboretum in Golden Gate Park.</p>
        <button type="button"><span><span><span>Find out More!</span></span></span></button>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var ImageSlideShow = new Spry.Widget.ContentSlideShow("#ImageSlideShow", {
    widgetClass: "WLBSlideShow",
    displayInterval: 4000,
    transitionDuration: 2000
</script>

I am trying to implement the spry content slideshow wonderlust that I got from the adobe widget browser. I copied the code into the page where I want the slideshow to show up and it is not formatting correctly. It is evidently missing the stylesheet. How do I get the style sheet to make this widget work?
The following is the code that is pasted into the head section of the page.
<link type='text/css' href='Spry-UI-1.7/css/ContentSlideShow/wanderlust/wanderlust-brown.css' rel='stylesheet'/>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSelector.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSet.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryFadingPanels.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryContentSlideShow.js'></script>
In the section where I want the slideshow to show up I pasted the following code:
<div id="ImageSlideShow">
<div class="article">
    <div class="photo"> <img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" alt="San Francisco, CA" />
      <div class="caption">San Francisco, CA</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">Palace of Fine Arts</div>
        <div class="subTitle">Flowers of Spring, California</div>
      </div>
      <div class="content">
        <p>The Palace of Fine Arts was initially built for the Pan-Pacific Exposition in the 1930s, heralding San Francisco's rebirth after the 1906 earthquake.</p>
        <button type="button"><span><span><span>Click for Details</span></span></span></button>
      </div>
    </div>
</div>
<div class="article">
    <div class="photo"> <img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-8.jpg" alt="Horses" />
      <div class="caption">Horses</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">Marin County, California</div>
        <div class="subTitle">Bay Area's Best Secret</div>
      </div>
      <div class="content">
        <p>A few short miles from downtown San Francisco, horses roam in the fields of Marin County, California.</p>
        <button type="button"><span><span><span>More Info</span></span></span></button>
      </div>
    </div>
</div>
<div class="article">
    <div class="photo"> <img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-4.jpg" alt="Open Space" />
      <div class="caption">Open Space</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">Marin County</div>
        <div class="subTitle">Parkland</div>
      </div>
      <div class="content">
        <p>Marin County is blessed with acres of open spaces, both public and private. </p>
        <button type="button"><span><span><span>Get Packing!</span></span></span></button>
      </div>
    </div>
</div>
<div class="article">
    <div class="photo"> <img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-1.jpg" alt="Orchids" />
      <div class="caption">Orchids</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">Flower Garden</div>
        <div class="subTitle">Flora tour in Golden Gate Park</div>
      </div>
      <div class="content">
        <p>Orchids from all over the world can be seen in the Arboretum in Golden Gate Park.</p>
        <button type="button"><span><span><span>Find out More!</span></span></span></button>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var ImageSlideShow = new Spry.Widget.ContentSlideShow("#ImageSlideShow", {
    widgetClass: "WLBSlideShow",
    displayInterval: 4000,
    transitionDuration: 2000
</script>

Problem inserting Spry Content Slideshow (Wanderlust theme) Widget

Modified widget dimensions, headers and copy to fit within designated area on website home page.
Looks great in live view. Cannot make widget work however. Here's a live link...
http://www.banners4churches.com/current/banners/cloth.php
Any suggestions?????? Thanks for your help.
Mike
(FILE NAME) SpryContentSlideshow_b4c.xml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Spry Content Slideshow Wanderlust : <default></title>
<link type='text/css' href='Spry-UI-1.7/css/ContentSlideShow/wanderlust/wanderlust-brown.css' rel='stylesheet'/>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSelector.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSet.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryFadingPanels.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryContentSlideShow.js'></script>
</head>
<body>
<div id="ImageSlideShow">
<div class="article">
    <div class="photo"><img src="BannerStand_promo2.jpg" width="305" height="266" alt="bstcombo">
<div class="caption">Retractable™ Stand Combo</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">EXCLUSIVELY from Banners4Churches!</div>
        <div class="subTitle">available with YOUR CHOICE from 1000's of DZINE! images</div>
      </div>
      <div class="content">
        <p>Select any image and have our designers customize it for you! Or if you already have your design, simply send us your files, and we'll print it for you!!</p>
       <a href="../current/stands/retractable_stands.php" onClick="window.location=this.href;">
              <button type="button">
              <span><span><span>Learn More</span></span></span>
              </button>
        </a>
      </div>
    </div>
</div>
<div class="article">
    <div class="photo"><img src="cmasBanner_promo2.jpg" width="305" height="266" alt="cmaspromo">
<div class="caption">Seasonal Banners</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">1000's of NEW Images!</div>
        <div class="subTitle">now available for YOUR Special Program</div>
      </div>
      <div class="content">
        <p>Make your order plans NOW for the Christmas season. Our designers can create a DZINE! that will perfectly match your program theme!!</p>
       <a href="http://www.banners4churches.com/banners/list.php?category[]=holidays_events" onClick="window.location=this.href;">
              <button type="button">
              <span><span><span>Learn More</span></span></span>
              </button>
        </a>
      </div>
    </div>
</div>
<div class="article">
    <div class="photo"><img src="fwd_promo2.jpg" width="305" height="266" alt="fwdpromo">
<div class="caption">Fabric Wall Decal</div>
</div>
    <div class="story">
      <div class="banner">
        <div class="title">Revolutionary NEW Product!</div>
        <div class="subTitle">applies to virtually EVERY surface AND is transferable</div>
      </div>
      <div class="content">
        <p>Adheres securely to masonry, drywall, wood and ABSOLUTELYwill not harm walls or leave behind tacky residue!! Want more amazing - YOU CAN MOVE Your DZINE!!</p>
       <a href="../current/banners/fabric_walldecals.php" onClick="window.location=this.href;">
              <button type="button">
              <span><span><span>Learn More</span></span></span>
              </button>
        </a>
      </div>
    </div>
</div>
<div class="article">
    <div class="photo"><img src="78Banner_promo2.jpg" width="305" height="266" alt="78promo">
<div class="caption">Available in English or español!</div>
</div>
    <div class="story">
      <div class="banner">
        <div class="title">CUSTOM CHURCH BANNERS!</div>
        <div class="subTitle">are EASY to order and offer 1000's of options</div>
      </div>
      <div class="content">
        <p>With access to nearly every translation of the Bible, our team of designers can help you create the perfect church banner. Our speciality is making custom banners for your church!!</p>
       <a href="http://www.banners4churches.com/banners/list.php" onClick="window.location=this.href;">
              <button type="button">
              <span><span><span>Learn More</span></span></span>
              </button>
      </div>
</a>
<script type="text/javascript">
var ImageSlideShow = new Spry.Widget.ContentSlideShow("#ImageSlideShow", {
          widgetClass: "WLBSlideShow",
          displayInterval: 4000,
          transitionDuration: 2000
</script>
</body>
</html>

Gramps,
Here's the current web page without the widget...
www.banners4churches.com
Here's the page with the troublesome code (about half way down)...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>America's Church Banner SuperStore - Custom Church Banners, Church Signs, Church Posters & Inspirational Products</title>
<meta name="verify-v1" content="cXasDZPTFX8DJZSEnchZANj/+z+XD9m8VyhCNhHjTOE=" />


<meta name="Keywords" content="church banners,church banner,cloth church banners,fabric church banners,praise banners,worship banners,religious banners,religious banner,christian banners,christian banner,church worship,church christian,catholic church,fabric banners,church posters,inspirational church banners, thanksgiving banners, christmas banners, vacation bible school banners, holiday banners, outreach banners" />
<meta name="description" content="Church Banner Superstore for custom cloth church banners, custom vinyl church banners, pre-designed Church Banners plus church banners for praise, worship and church outreach ministries. Avilable in English and Spanish with Fast, Secure ordering 24 hours a day, Fast Service & Low Prices.">
<meta name="robots" content="index,follow"> <!-Banners4Churches.com - America's Church Superstore for Religious Banners and Signs for praise, worship and church outreach ministries. -->

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script language="JavaScript" type="text/javascript" src="/jsx/com/gorad/lang/use.js"></script>
<script language="javascript" type="text/javascript" src="/_ui/2007/js/_parent.js"></script>
<script language="javascript" type="text/javascript" src="/_ui/2007/js/security.js"></script>
<script type="text/javascript">
function visualSearchZoom(id,mode) {
          var settings = 'status=no,toolbar=no,location=no,menubar=no,directores=no,resizable=yes,scrollbars=auto' ;
          if(mode=='horizontal') {
                    settings = settings+',height=315,width=532';
          if(mode=='vertical') {
                    settings = settings+',height=565,width=232';
          var zoomWindow = window.open("/banners/zoom.php?image="+id+'&mode='+mode,"zoomWindow",settings);
</script>

<script type="text/javascript"></script>
<style type="text/css" media="all">
@import "/_ui/2007/css/skin_2007_.css";
body {
          background-color: #FFF;
</style>


<style type="text/css">

</style>
<script src="file:///My Book/B4C Backup/B4C Backup 1282010/scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">

</style>

</head>
<body>
<div id="adjustBlackLeft"></div>
<div id="main">
          <a href="/" id="mainLink"></a>
          <div id="rightlinks">
            <div align="right">
              <a href="/banners/list.php"><img src="/_ui/2007/img/nav_banners.gif" alt="Visual Search" width="93" height="33" border="0" /></a>
                      <a href="/current/index.php"><img src="/_ui/2007/img/nav_home.gif" alt="Home" width="30" height="33" border="0" /></a>
              <a href="/current/contact_us.php"></a>            </div>
</div>
          <div id="leftlinks"></div>
<div id="viewcart"><a href="http://order.store.yahoo.net/cgi-bin/wg-order?yhst-129624843121182">   <img src="/_ui/2007/img/viewcart1.gif" alt="View Cart" name="Image18" width="78" height="26" border="0" id="Image18" /></a></div>
<div id="bottomcontent"><a href="/current/help.php"></a></div>
          <div id="left">
                    <div id="sidebar_orderonline" class="title"><img src="_ui/2007/img/sidebar_orderonline.gif" width="169" height="24" alt="sidebarorder" /></div>
                    <ul class="sidebar">
                              <li><a href="/current/banners/custom_banners.php"><strong>CUSTOM CHURCH BANNERS</strong></a></li>
                              <li></li>
            <li><a href="/banners/list.php?category[]=custom_stands">Custom Banner with Stand</a></li>
            <li><a href="/banners/list.php?category[]=ready_designs">Stock Church Banners</a></li>
                              <li><a href="/banners/list.php?category[]=flowers_inspirational">Flowers & Inspirational</a></li>
                              <li><a href="/banners/list.php?category[]=holidays_events">Holidays & Events</a></li>
                              <li><a href="/banners/list.php?category[]=nature_landscapes">Nature & Landscapes</a></li>
            <li><a href="/banners/list.php?category[]=people">People</a></li>
            <li><a href="/banners/list.php?category[]=sky_water">Sky & Water</a></li>
            <li><a href="/banners/list.php?category[]=horizontal">Horizontal Church Banners</a></li>
                              <li><a href="/banners/list.php?category[]=vertical">Vertical Church Banners</a></li>
                              <li><a href="/banners/list.php">SEE ALL CHURCH BANNERS</a></li>
                    </ul>
                    <div id="sidebar_descriptions" class="title"></div>
                    <ul class="sidebar">
                              <li><a href="current/stands/powerframe_stands.php">Powerframe™ COMBOS</a></li>
                              <li><a href="current/stands/retractable_stands.php">Retractable™Stand COMBO</a></li>
                              <li><a href="current/stands/tstand_stands.php">T Stand™ COMBO</a></li>
                              <li><a href="current/banners/cloth.php">Cloth Church Banners</a></li>
                              <li><a href="current/banners/vinyl.php">Vinyl Church Banners</a></li>
                              <li><a href="current/banners/fabric_walldecals.php">Fabric Wall Decals</a></li>
                              <li><a href="current/banners/posters.php">Church Posters</a></li>
                              <li><a href="current/banners/educational.php">Unit Circle for Mathematics</a></li>
            <li><a href="current/banners/dzine_yourbanner.php">DZINE! Your Banner</a></li>
                              <li><a href="current/custom_designshelp.php">DZINE! Help</a></li>
                              <li><a href="current/banners/custom_banners.php">Custom Order Help</a></li>
            <li><a href="current/banners/marketing_church.php">Promote Your Church</a></li>
            <li><a href="current/banners/logos_printcollateral.php">Logo DZINE!</a></li>
            <li><a href="current/banners/cmi_imagebank.php">CMI Image Bank</a></li>
                              <li></li>
                    </ul>
                    <div id="sidebar_info" class="title"></div>
                    <ul class="sidebar">
                              <li></li>
                              <li><a href="/media/Banners4Churches-Catalog.pdf">Download 2012 Catalog</a></li>
                              <li><a href="current/production_shipping.php">PRODUCTION/SHIPPING</a></li>
                              <li><a href="current/rush_service.php">Rush Print Service</a></li>
                              <li><a href="current/customer_feedback.php">Customer Feedback</a></li>
                              <li><a href="current/terms_returns.php">Terms & Returns</a></li>
            <li><a href="current/privacy_policy.php">Privacy Policy</a></li>
            <li><a href="current/banners/caldwell_mktintl.html" class="strong">Caldwell Marketing Int'l</a></li>
            <li><a href="current/contact_us.php">Contact Us</a></li>
                              <li></li>
                    </ul>
                    <p> </p>
                      </div>
<div id="mainContent">
          <div id="interiorcontent" class="mostPopular">
          <div class="title">
            <div align="center"!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
                <html><br />
                <head><br />
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br />
                <title>Spry Content Slideshow Wanderlust : &lt;default&gt;</title><br />
                <link type='text/css' href='Spry-UI-1.7/css/ContentSlideShow/wanderlust/wanderlust-brown.css' rel='stylesheet'/><br />
                <script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMUtils.js'></script><br />
                <script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script><br />
                <script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script><br />
                <script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSelector.js'></script><br />
                <script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSet.js'></script><br />
                <script type='text/javascript' src='Spry-UI-1.7/includes/SpryFadingPanels.js'></script><br />
                <script type='text/javascript' src='Spry-UI-1.7/includes/SpryContentSlideShow.js'></script><br />
                </head></p>
              <p><body><br />
                <div id="ImageSlideShow"><br />
<div class="article"><br />
<div class="photo"><img src="BannerStand_promo2.jpg" width="305" height="266" alt="bstcombo"><br />
<div class="caption">Retractable™ Stand Combo</div><br />
</div><br />
<div class="story"><br />
<div class="banner"><br />
<div class="title">EXCLUSIVELY from Banners4Churches!</div><br />
<div class="subTitle">available with YOUR CHOICE from 1000's of DZINE! images</div><br />
</div><br />
<div class="content"><br />
<p>Select any image and have our designers customize it for you! Or if you already have your design, simply send us your files, and we'll print it for you!!</p><br />
<a href="../current/stands/retractable_stands.php" onClick="window.location=this.href;"><br />
<button type="button"><br />
<span><span><span>Learn More</span></span></span><br />
</button><br />
</a><br />
</div><br />
</div><br />
</div><br />
<div class="article"><br />
<div class="photo"><img src="cmasBanner_promo2.jpg" width="305" height="266" alt="cmaspromo"><br />
<div class="caption">Seasonal Banners</div><br />
</div><br />
<div class="story"><br />
<div class="banner"><br />
<div class="title">1000's of NEW Images!</div><br />
<div class="subTitle">now available for YOUR Special Program</div><br />
</div><br />
<div class="content"><br />
<p>Make your order plans NOW for the Christmas season. Our designers can create a DZINE! that will perfectly match your program theme!!</p><br />
<a href="http://www.banners4churches.com/banners/list.php?category[]=holidays_events" onClick="window.location=this.href;"><br />
<button type="button"><br />
<span><span><span>Learn More</span></span></span><br />
</button><br />
</a><br />
</div><br />
</div><br />
</div><br />
<div class="article"><br />
<div class="photo"><img src="fwd_promo2.jpg" width="305" height="266" alt="fwdpromo"><br />
<div class="caption">Fabric Wall Decal</div><br />
</div><br />
<div class="story"><br />
<div class="banner"><br />
<div class="title">Revolutionary NEW Product!</div><br />
<div class="subTitle">applies to virtually EVERY surface AND is transferable</div><br />
</div><br />
<div class="content"><br />
<p>Adheres securely to masonry, drywall, wood and ABSOLUTELYwill not harm walls or leave behind tacky residue!! Want more amazing - YOU CAN MOVE Your DZINE!!</p><br />
<a href="../current/banners/fabric_walldecals.php" onClick="window.location=this.href;"><br />
<button type="button"><br />
<span><span><span>Learn More</span></span></span><br />
</button><br />
</a><br />
</div><br />
</div><br />
</div><br />
<div class="article"><br />
<div class="photo"><img src="78Banner_promo2.jpg" width="305" height="266" alt="78promo"><br />
<div class="caption">Available in English or español!</div><br />
</div><br />
<div class="story"><br />
<div class="banner"><br />
<div class="title">CUSTOM CHURCH BANNERS!</div><br />
<div class="subTitle">are EASY to order and offer 1000's of options</div><br />
</div><br />
<div class="content"><br />
<p>With access to nearly every translation of the Bible, our team of designers can help you create the perfect church banner. Our speciality is making custom banners for your church!!</p><br />
<a href="http://www.banners4churches.com/banners/list.php" onClick="window.location=this.href;"><br />
<button type="button"><br />
<span><span><span>Learn More</span></span></span><br />
</button><br />
</div><br />
</a><br />
<script type="text/javascript"><br />
                var ImageSlideShow = new Spry.Widget.ContentSlideShow("#ImageSlideShow", {<br />
                widgetClass: "WLBSlideShow",<br />
                displayInterval: 4000,<br />
                transitionDuration: 2000<br />
                });<br />
</script><br />
</body><br />
</html></p>
              <p class="style64"> </p>
            </div>
          </div>
          
          
<p class="blue">
<div id="fb-root"><a href="http://smallbusiness.yahoo.com/ecommerce/" target="_blank"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/smallbiz/gr/ecomby_128bit.gif" width="134" height="67" border="0" align="right" alt="ecommerce provided by Yahoo! Small Business"/></a></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="false" border_color="" stream="false" header="true"></fb:like-box> </p>
</span></span></span>
<p class="blue"> </p>
<p class="blue"> </p>
<p class="blue"><em><strong style="font-size: 16px; text-align: left;">Available in English & español!</strong></em></p>
<p><em><strong>NUMBER ONE for church banners & inspirational products across th<img src="media/Guaranteed-Seal.jpg" alt="seal" width="164" height="157" align="right" />e United States!</strong></em></p>
<p>Using only premium, top quality material, we also offer one of the largest image databases in the world!</p>
<p>Combine that with award winning designers, and you get a customer experience second to none! You'll always find the newest and most innovative products at <strong>Banners4Churches.com</strong>.</p>
<p><img src="media/FabricWall/fwd_cover.jpg" width="241" height="279" /></p>
<p> </p>
<p><strong style="font-size: 14pt">5 Year Limited Warranty* </strong></p>
<p>comes standard with every banner we sell!</p>
<p>Your complete satisfaction is our <em>only</em> goal.</p>
          <p> </p>
<p class="slogancolor"> </p>
    <p class="slogancolor"><strong><em>Banners...any design...any size.</em></strong></p>
    <p class="slogancolor"><strong><em> That's Banners4Churches.com!</em></strong></p>
    <p></p>
    <p class="red"> </p>
<p><a href="http://www.banners4churches.com/current/index.php">(RETURN TO TOP)</a></p>
          <p> </p>
          <p class="small"><em>* 5 Year Warranty covers fading and defects in material workmanship only. Warranty does not cover abuse, neglect, fire, natural disasters or water damage. When original banner is returned in original shipping carton, warranty covers identical replacement.</em></p>
          <p class="small"> </p>
          <p class="right"><em>Banners4Churches.com is a subsidiary of <br />
Caldwell Marketing International • Music City USA! </em></p>
          <br />
          
          </div>
          <div id="right">
            <div id="mostpopularsearch">
              <form action="/banners/list.php" method="get">Search by code: <input type="text" name="search" size="6" value="" /> <input type="submit" value="Go!" /><input type="hidden" name="category[]" value="all" /></form>
            </div>
            <div class="column">
                    <div class="title" id="sidebar_popular"></div>
                    <ul class="popular">
                    <?php
                              include('/banners/List.class.php');
                              $list_popular = new com_newtechgraphics_Web_List(null, array('popular_fp'), '/banners/images.csv');
                              foreach ($list_popular->images as $image) {
                                        if(!empty($image['horizontal'])) {
                                                  echo "<li class=\"horizontal\"><a href=\"/banners/view.php?imagecode=$image[code]\"><img src=\"/_images/products/126/$image[code]-V.jpg\" width=\"126\" height=\"72\" border=\"0\" alt=\"$image[text]\" /></a><a href=\"#\" onclick=\"visualSearchZoom('$image[code]','horizontal'); return false\" class=\"zoom\">Zoom</a><a href=\"/banners/view.php?imagecode=$image[code]\" class=\"pricing\">Pricing</a></li>";
                              foreach ($list_popular->images as $image) {
                                        if(!empty($image['vertical'])) {
                                                  echo "<li class=\"vertical\"><a href=\"/banners/view.php?imagecode=$image[code]\"><img src=\"/_images/products/126/$image[code]-V.jpg\" width=\"52\" height=\"135\" border=\"0\" alt=\"$image[text]\" /></a><a href=\"#\" onclick=\"visualSearchZoom('$image[code]','vertical'); return false\" class=\"zoom\">Zoom</a><a href=\"/banners/view.php?imagecode=$image[code]\" class=\"pricing\">Pricing</a></li>";
                    ?>
                    </ul>
            </div>
            <div class="column seasonal">
                    <div class="title" id="sidebar_seasonal"></div>
                    <ul class="seasonal">
                    <?php
                              $list_seasonal = new com_newtechgraphics_Web_List(null, array('season_fp'), '/banners/images.csv');
                              foreach ($list_seasonal->images as $image) {
                                        if(!empty($image['horizontal'])) {
                                                  echo "<li class=\"horizontal\"><a href=\"/banners/view.php?imagecode=$image[code]\"><img src=\"/_images/products/126/$image[code]-V.jpg\" width=\"126\" height=\"72\" border=\"0\" alt=\"$image[text]\" /></a><a href=\"#\" onclick=\"visualSearchZoom('$image[code]','horizontal'); return false\" class=\"zoom\">Zoom</a><a href=\"/banners/view.php?imagecode=$image[code]\" class=\"pricing\">Pricing</a></li>";
                              foreach ($list_popular->images as $image) {
                                        if(!empty($image['vertical'])) {
                                                  echo "<li class=\"vertical\"><a href=\"/banners/view.php?imagecode=$image[code]\"><img src=\"/_images/products/126/$image[code]-V.jpg\" width=\"52\" height=\"135\" border=\"0\" alt=\"$image[text]\" /></a><a href=\"#\" onclick=\"visualSearchZoom('$image[code]','vertical'); return false\" class=\"zoom\">Zoom</a><a href=\"/banners/view.php?imagecode=$image[code]\" class=\"pricing\">Pricing</a></li>";
                    ?>
                    </ul>
            </div>
          </div>
                              </div>
          <div id="bottomcontent"></div>
          <div id="footer"></div>
</div>
</body>
</html>

Spry Content Slideshow malfunctioning in IE

can't get content slideshow to work with any version of internet explorer:
http://www.chipandlaura.com
i can't even get the sample html to work that comes with the css and js files:
http://chipandlaura.com/spry_default.html
save me?

Hi altruistic gramps!
thank you!
re-optimized via photoshop... pics are all under 50k -still only displaying half... if you have any other insights I would be grateful!
K

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 Content Slideshow (Wanderlust)...adding more slides

Hello! I know after hours of research this has been asked quiet a few times, in different ways, but I can't find an answer for this:
How do you add more slides to this widget? I need more than 4.
I have tried to play around with the png images for the buttons (although I don't need the buttons - just the numbers. I don't really want the buttons.) I don't know if I'm just doing it wrong or what, but nothing is working.
I have looked through all sources of code, and have found nothing to help me!
If you guys could help me figure this out, it would be appreciated! Thank you!

Okay, I found the answer myself, and I wanted to post it for anyone else who is interested:
I did this earlier, and it didn't work. So I'm not sure what precisely made this work for me.
First, I went to wanderlust-brown.css. I went to
.WLBSlideShow .SSSlideLinks {
This is where I found a rule for "right" - I moved it way over to see if it would pop out (I saw something about moving this over in another forum)
I did 100px;
Then, I went back to add another article. I'll post an entire section so you guys can see EXACTLY what you need to write:
<div class="article">
                <div class="photo"> <img src=
"(YOUR IMAGE LINK)" alt="Orchids" />
                              <div class="caption">Orchids</div>
        </div>
         <div class="banner">
                   <div class="title">CONTENT</div>
            <div class="subTitle">CONTENT</div>
         </div>
         <div class="content">
                   <p>CONTENT</p>
            <button type="button"><span><span><span>More!</span></span></span></button>
        </div>
      </div>
    </div>
MAKE SURE you post this after the THIRD </div> on the 4th slider.
That did the trick for me! It kinda did something weird to my layout and added some spaces above my sidebar, but that takes about 3 seconds to fix.
I hope this helps someone!

Change size of Spry Content Slideshow Wanderlust Widget??

Found a way.

Okay, I found the answer myself, and I wanted to post it for anyone else who is interested:
I did this earlier, and it didn't work. So I'm not sure what precisely made this work for me.
First, I went to wanderlust-brown.css. I went to
.WLBSlideShow .SSSlideLinks {
This is where I found a rule for "right" - I moved it way over to see if it would pop out (I saw something about moving this over in another forum)
I did 100px;
Then, I went back to add another article. I'll post an entire section so you guys can see EXACTLY what you need to write:
<div class="article">
                <div class="photo"> <img src=
"(YOUR IMAGE LINK)" alt="Orchids" />
                              <div class="caption">Orchids</div>
        </div>
         <div class="banner">
                   <div class="title">CONTENT</div>
            <div class="subTitle">CONTENT</div>
         </div>
         <div class="content">
                   <p>CONTENT</p>
            <button type="button"><span><span><span>More!</span></span></span></button>
        </div>
      </div>
    </div>
MAKE SURE you post this after the THIRD </div> on the 4th slider.
That did the trick for me! It kinda did something weird to my layout and added some spaces above my sidebar, but that takes about 3 seconds to fix.
I hope this helps someone!

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

Hi Guys
Im struggaling to expand the content box so all my information can be seen and also have more that 4 slide any idears please
Graham

I've not played with this one, but after giving it a quick look, I'd say repeat the HTML area of a <div class="article">...</div>, and modify your attached CSS (wanderlust-brown), manually. It appears the link buttons (1-4) are generated by the JavaScript, so in theory, all should be good, there, for however many articles you have.
Giving the CSS a quick look, it seems that you would want to reduce the width of ".WLBSlideShow .story" and increase the widths of ".WLBSlideShow .photo" and ".WLBSlideShow .photo img" by the same amount, to have a wider photo, or reverse that for a thinner one.
If you are satisfied with the current width of the photos, and want to change the height of the photo/article area(s), all of these classes will need to be increased by an equal amount: ".WLBSlideShow .SSClip", ".WLBSlideShow .SSView", ".WLBSlideShow .SSSlide", ".WLBSlideShow .story", ".WLBSlideShow .photo img". The first three likely control the height of the entire slideshow (and will probably leave a rather tall button bar), and the last two are the text area and the photo, respectively.
I see that's it's been a while since you've been on, but I hope this helps. If not you, then maybe someone else.
Richard

Spry Content Slideshow looks fine in DW CS5

but when I upload it to Hostgator the pics show but the text on the right don't. Here is the code to the slideshow. I am wondering if anyone can tell me what would cause this to happen? I have emptied the cache and refreshed several times and made sure all the files transfered to my file manager in Hostgator.
Thanks for any help, Denise
PS my site is tocatchamiracle.com
<div class="content">
    <div id="ImageSlideShow">
      <div class="article">
        <div class="photo"> <img src="650treesandthings/mistymornin.JPG" alt="Lookingglass Oregon" />
          <div class="caption">Near Dawn</div>
        </div>
        <div class="story">
          <div class="banner">
            <div class="title"></div>
            <div class="subTitle"></div>
          </div>
          <div class="content">
            <p>I'm usually up before or by dawn and I have seen so many beautiful mornings. This is just one of the many, Denise</p>
          </div>
        </div>
      </div>
      <div class="article">
        <div class="photo"> <img src="650treesandthings/inpurple.jpg" alt="Willis Creek, OR" />
          <div class="caption">In Purple</div>
        </div>
        <div class="story">
          <div class="banner">
            <div class="title"></div>
            <div class="subTitle"></div>
          </div>
          <div class="content">
            <p>Found these pretty things at a rock quarry. Hard to believe and easy to overlook.</p>
          </div>
        </div>
      </div>
      <div class="article">
        <div class="photo"> <img src="650thingsilove/hinges.JPG" alt="Lookingglass, OR" />
          <div class="caption">Old Hinges</div>
        </div>
        <div class="story">
          <div class="banner">
            <div class="title"></div>
            <div class="subTitle"></div>
          </div>
          <div class="content">
            <p>These hinges were all removed and replaced over years of a great, man's life, my friend Courtney. He was a real family man, the best one I have ever known in my life. This photo is just part of a tribute to him, thank you Courtney, Teenie</p>
          </div>
        </div>
      </div>
      <div class="article">
        <div class="photo"> <img src="650thingsilove/Alicesfence.JPG" alt="Orchids" />
          <div class="caption">Moss Covered Fence</div>
        </div>
        <div class="story">
          <div class="banner">
            <div class="title"></div>
            <div class="subTitle"></div>
          </div>
          <div class="content">
            <p>These are places I walked through in my childhood. I am so glad to get to see them again. They have changed and grown older just like me but they are still standing</p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
// BeginOAWidget_Instance_2141541: #ImageSlideShow
var ImageSlideShow = new Spry.Widget.ContentSlideShow("#ImageSlideShow", {
    widgetClass: "WLBSlideShow",
    displayInterval: 4000,
    transitionDuration: 2000

I see it is an issue with my Firefox because it "is" showing correctly in IE
as well as my webhost, hostgator can see it just fine. I haven't known
Firefox to fail me but now I don't know, weird. Question is answered. I
don't get the forum, I couldn't find anywhere to reply to gramps except by
email. Hope you get this and thank you much gramps, Denise

Spry Content Slideshow Wanderlust Image Adjustment

I was wondering if someone could help me to find a way so that the preivous button does not dissappear with this widget by locking it in place at a certian picture number. The objective is to hide all the numbers beyond a certain point. I figured out how to move the button through a preivous post but now I want a certain number of number buttons showing and the rest hidden in the previous and next button for example previous 1 2 3 4 5 next | previous 2 3 4 5 6 next ad so on.

how did you add images and get it to appear in the slideshow? I copied the code, but the image appears below/outside the slide show!

Inserting articles in the Spry Content Slideshow

Hi
I need to use this widget for an articles archive page.
The widget works perfectly with a max of 4 articles. When I try to add more (I need about 20) I the articles above 4 do not display.
Do you have a lolution ?
I thought that only repeating the code would automatically add more content, but it soesn't.
I use Dreamweaver CS5
Thanks a lot for your help.
Jean Michel

Please don't worry about this topic.
I only had a missing tag inserting new items.
Sorry for taking some of your time.
Jean Michel

Spry Content Slideshow Question

I would like to add a 5th, 6th, or 7th slide to the slide show but when I try, the previous slide button << disappears. Is there any way to prevent this from happening and still add in extra slides?
eBauer

have you tried in IE7?
If it does work in IE7 then place the following into your document
<meta http-equiv="X-UA-Compatible" content="IE=7" />
or alternatively change the <button> to <input type="button">
Gramps

Spry Content Slideshow buttons with IE8?

Similar Messages

Maybe you are looking for