Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Moving Spry Widget from Dreamweaver CS5 to ATA (http://forum.bytesforall.com/showthread.php?t=12014)

IldiW Jan 4, 2011 09:23 PM

Moving Spry Widget from Dreamweaver CS5 to ATA
 
Hi,
I've been given valuable advice here many times, I'm hoping someone can help me out again!
I'm trying to insert some JavaScript files and it doesn't work. Bearing in mind that I know nothing about JS it's mainly a trial and error thing... What I'm trying to achieve is to use a Spry UI Content Slideshow widget from Dreamweaver CS5 for rotating images with links. I have it all working in DW but due to lack of understanding I must be inserting it to the wrong places...

At the moment I have this on the homepage as HTML:

<div id="ImageSlideShow">
<div class="article">
<div class="photo"> <img src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/images/tabs/image1.jpg" alt="Antenatal course" />
<div class="caption">Antenatal Courses</div>
</div>
<div class="story">
<div class="banner">
<div class="title">98% of our members</div>
<div class="subTitle">would recommend our Antenatal Courses!</div>
</div>
<div class="content">
<p>Our courses are designed to meet the needs of parents-to-be, covering everything from choosing a midwife to first days with the new baby.</p>
<button type="button"><span><span><span>Click for Details</span></span></span></button>
</div>
[There's three more images, text, etc here, just wanted to save some space with not showing them.]
</div>

I have the following in ATO:
HTML inserts header:
<link href="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/ SpryAssets/Spry-UI-1.7/css/ContentSlideShow/wanderlust/wanderlust-brown.css" rel="stylesheet" type="text/css" />
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/ SpryAssets/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/ SpryAssets/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/ SpryAssets/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/ SpryAssets/Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/ SpryAssets/Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/ SpryAssets/Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/ SpryAssets/Spry-UI-1.7/includes/SpryContentSlideShow.js" type="text/javascript"></script>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141541" binding="#ImageSlideShow" />
</oa:widgets>
-->
</script>

HTML insert body bottom:
<script type="text/javascript">
// BeginOAWidget_Instance_2141541: #ImageSlideShow

var ImageSlideShow = new Spry.Widget.ContentSlideShow("#ImageSlideShow", {
widgetClass: "WLBSlideShow",
displayInterval: 4000,
transitionDuration: 2000
});

// EndOAWidget_Instance_2141541
</script>

I think I have ftpd all the relevant files to the site, so I don't think that's the problem.
The link to the site (which is in testing at the moment):
http://79.170.44.110/westaucklandparents.org.nz/

Many thanks!
Ildi

juggledad Jan 5, 2011 03:34 AM

After looking at the page, I get a bunch of not found's for files. Notice the space '.../atahualpa/ SpryAssets/....'? it shouldn't be there - it causes the file to be not found

IldiW Jan 5, 2011 01:58 PM

Oh, you're right! This did help! For the benefit of others potentially struggling with the same, my final (and working version) is like this:
HTML Insert Header:
<link href="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/SpryAssets/Spry-UI-1.7/css/ContentSlideShow/wanderlust/wanderlust-brown.css" rel="stylesheet" type="text/css" />
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/SpryAssets/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/SpryAssets/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/SpryAssets/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/SpryAssets/Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/SpryAssets/Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/SpryAssets/Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/SpryAssets/Spry-UI-1.7/includes/SpryContentSlideShow.js" type="text/javascript"></script>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141541" binding="#ImageSlideShow" />
</oa:widgets>
-->
</script>

HTML Insert Body Bottom:
<script type="text/javascript">
// BeginOAWidget_Instance_2141541: #ImageSlideShow

var ImageSlideShow = new Spry.Widget.ContentSlideShow("#ImageSlideShow", {
widgetClass: "WLBSlideShow",
autoPlay: true,
displayInterval: 4000,
transitionDuration: 2000,
});

// EndOAWidget_Instance_2141541
</script>

and in the HTML for the page I only have the divs now.

However, it only works in Firefox not in Explorer 8... Any ideas on this issue?

Thanks again!
Ildi

IldiW Jan 6, 2011 10:41 PM

Unfortunately this question seems to be beyond my feeble knowledge and I'm stuck. It appears that sadly the majority of the people using this community page are still using IE ('sigh') so I have to move on. Again for the benefit of others interested in the same thing (rotating images with links) I'm now using a plugin which is super-easy to use and works perfectly in all browsers (http://www.nathanrice.net/plugins/wp-cycle/).
Thanks again for the help all the way supporting my work!


All times are GMT -6. The time now is 04:31 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.