I am using Actinic V10 and have recently added a slideshow to the header section of my home page at www.gprsmodems.co.uk. It works fine except I wanted to "fade" between images.
I researched and finally decided to use JQuery plug-in "innerfade". I have it working in Dreamweaver, however when placed in the header the positioning is to the far right of the page. The script is written using a list (UL) for the image locations. I have tried to position using CSS i.e Display:block; Margin-left:auto to no avail. I have tried creating using a table, again can position in Dreamweaver but not within the header section in Actinic.
Please see the script I am using below:
Any help would be appreciated.
Kind regards
John
---------------------------------
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsFrontPage%22%20%2f%3e" >
<html>
<head>
<style type="text/css">
#slideshow {
display:block;
margin-left:auto
}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.innerfade.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul#slideshow').innerfade( {
speed: 2000,
timeout: 10000,
type: 'sequence',
containerheight: '200px'
});//end of innerfade
});//end of jquery
</script>
</head>
<body>
<ul id="slideshow">
<li>
<a href="http://www.gprsmodems.co.uk/acatalog/Sierra_Wireless_Intelligent_GSM_GPRS_3G_Gateways_and_Routers.html#xe">
<img src="slideshow_images/ss0.jpg" alt="scada applications" />
</a>
</li>
<li>
<a href="http://www.gprsmodems.co.uk/acatalog/Telic_STD_32_and_35_Telemetry_Devices.html#std35">
<img src="slideshow_images/ss1.jpg" alt="flood risk control" />
</a>
</li>
<li>
<a href="http://www.gprsmodems.co.uk/acatalog/Online_Catalogue_Siemens_GSM_GPRS_Modems_116.html">
<img src="slideshow_images/ss2.jpg" alt="vending machine automation" />
</a>
</li>
<li>
<a href="http://www.gprsmodems.co.uk/acatalog/Sierra_Wireless_Airlink_FXT_Series_programmable_gateways.html">
<img src="slideshow_images/ss.jpg" alt="M2M Application" />
</a>
</li>
</ul>
</body>
</html>
</actinic:block>
<actinic:block if="%21%20%3cactinic%3avariable%20name%3d%22IsFrontPage%22%20%2f%3e" >
<actinic:variable formatting="bold,font(Color|ff0000)" name="HeaderText" />
</actinic:block>
I researched and finally decided to use JQuery plug-in "innerfade". I have it working in Dreamweaver, however when placed in the header the positioning is to the far right of the page. The script is written using a list (UL) for the image locations. I have tried to position using CSS i.e Display:block; Margin-left:auto to no avail. I have tried creating using a table, again can position in Dreamweaver but not within the header section in Actinic.
Please see the script I am using below:
Any help would be appreciated.
Kind regards
John
---------------------------------
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsFrontPage%22%20%2f%3e" >
<html>
<head>
<style type="text/css">
#slideshow {
display:block;
margin-left:auto
}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.innerfade.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul#slideshow').innerfade( {
speed: 2000,
timeout: 10000,
type: 'sequence',
containerheight: '200px'
});//end of innerfade
});//end of jquery
</script>
</head>
<body>
<ul id="slideshow">
<li>
<a href="http://www.gprsmodems.co.uk/acatalog/Sierra_Wireless_Intelligent_GSM_GPRS_3G_Gateways_and_Routers.html#xe">
<img src="slideshow_images/ss0.jpg" alt="scada applications" />
</a>
</li>
<li>
<a href="http://www.gprsmodems.co.uk/acatalog/Telic_STD_32_and_35_Telemetry_Devices.html#std35">
<img src="slideshow_images/ss1.jpg" alt="flood risk control" />
</a>
</li>
<li>
<a href="http://www.gprsmodems.co.uk/acatalog/Online_Catalogue_Siemens_GSM_GPRS_Modems_116.html">
<img src="slideshow_images/ss2.jpg" alt="vending machine automation" />
</a>
</li>
<li>
<a href="http://www.gprsmodems.co.uk/acatalog/Sierra_Wireless_Airlink_FXT_Series_programmable_gateways.html">
<img src="slideshow_images/ss.jpg" alt="M2M Application" />
</a>
</li>
</ul>
</body>
</html>
</actinic:block>
<actinic:block if="%21%20%3cactinic%3avariable%20name%3d%22IsFrontPage%22%20%2f%3e" >
<actinic:variable formatting="bold,font(Color|ff0000)" name="HeaderText" />
</actinic:block>
Comment