Hi I am a newbie to jQuery and have been stuck for 2 days now on a slideshow problem.

 

On my page I have 10 slideshow all similar to the code below (with alaska changed to something else for each slideshow)

 

In IE all the slideshows work perfectly. In FF and Chrome the images do not appear for most of the slideshows and the slideshow doesn't actually work.

 

Any help of advice on what I have done wrong would help.

 

<

div id ="alaska_item_class" runat ="server">

<

h1 >

< asp : Image ID ="imgalaska_Header" runat ="server" />

</ h1 >

< script type ="text/javascript">

var $ja = jQuery.noConflict();

$ja(document).ready(

function (){

$ja(

'#alaska_slideshow' ).css( 'display' , 'block' ).after( '<div id="alaska_nav" class="alaska_nav">' ).cycle({

fx:

'fade' ,

speed:

'medium' ,

pause:

true ,

pager:

'#alaska_nav' ,

pauseOnPagerHover:

true ,

timeout: 7000,

pagerAnchorBuilder:paginate

});

function paginate(index, dom){

var c = index + 1;

return '<a href="#" onClick="pageTracker._trackEvent(\'Home Page Carousel\', \'Pagination\', ' +c+ ');" >' +c+ '</a>' ;

}

});

</ script >

< style type ="text/css">

.alaska_nav

{

display : none ;

margin : 5px 0 ;

position : relative ;

z-index : 500 ;

}

#alaska_nav a

{

font-size : 14px ;

padding : 5px ;

margin : 5px ;

background : #86b334 ;

border : 2px solid #fff ;

text-decoration : none ;

color : #fff ;

weight : 800 ;

}

#alaska_nav a.activeSlide

{

font-size : 14px ;

background : #ff5500 ;

color : #fff ;

border : 2px solid #fff ;

}

#alaska_nav a:focus

{

outline : none ;

}

#alaska_slideshow

{

display : none ;

}

</ style >

< div id ="alaska_slideshow" style =" padding-left : 305px ; ">

< asp : HyperLink ID ="hyp_alaska_Offer1" runat ="server" NavigateUrl ="cruise.aspx?id=1" Style =" text-decoration : none ; "

onclick ="javascript: pageTracker._trackPageview('/internal-links/homepage/carousel/v1/p1/images/ncl-offers/dest1.jpg')">

< asp : Image ID ="img_alaska_Offer1" Width ="301px" Height ="172px" style =" position : relative ; " runat ="server" ImageUrl ="~/images/test.jpg" AlternateText ="" class ="border" />

< div style =" position : absolute ; right : 0 ; width : 70px ; margin-top : -37px ; padding-bottom : 15px ;

vertical-align : top ; font-family : Arial ; font-size : 14px ; font-weight : bold ;

text-decoration : none ; line-height : 1 ; ">

< center >

< span style =" color : #FF5C09 ; font-size : 10px ; font-weight : bold ; text-decoration : none ; ">

< asp : Label ID ="lbl_alaska_offer_1_1" runat ="server"> &nbsp;&nbsp;&nbsp; FROM </ asp : Label ></ span >< br />

< span style =" color : #FF5C09 ; font-size : 24px ; text-decoration : none ; ">

< asp : Label ID ="lbl_alaska_offer_1_price" runat ="server"> 100 </ asp : Label ></ span >

</ center >

</ div >

</ asp : HyperLink >

< asp : HyperLink ID ="hyp_alaska_Offer2" runat ="server" NavigateUrl ="cruise.aspx?id=2" Style =" text-decoration : none ; "

onclick ="javascript: pageTracker._trackPageview('/internal-links/homepage/carousel/v1/p2/images/ncl-offers/dest2.jpg')">

< asp : Image ID ="img_alaska_Offer2" Width ="301px" Height ="172px" style =" position : relative ; " runat ="server" ImageUrl ="~/images/test.jpg" AlternateText ="" class ="border" />

< div style =" position : absolute ; right : 0 ; width : 70px ; margin-top : -37px ; padding-bottom : 15px ;

vertical-align : top ; font-family : Arial ; font-size : 14px ; font-weight : bold ;

text-decoration : none ; line-height : 1 ; ">

< center >

< span style =" color : #FF5C09 ; font-size : 10px ; font-weight : bold ; text-decoration : none ; ">

< asp : Label ID ="lbl_alaska_offer_2_1" runat ="server"> &nbsp;&nbsp;&nbsp; FROM </ asp : Label ></ span >< br />

< span style =" color : #FF5C09 ; font-size : 24px ; text-decoration : none ; ">

< asp : Label ID ="lbl_alaska_offer_2_price" runat ="server"> 200 </ asp : Label ></ span >

</ center >

</ div >

</ asp : HyperLink >

</ div >

<!-- /slideshow -->

< div style =" clear : both ; height : 32px ; ">

< img src ="images/pix.gif" style =" height : 32px ; " alt ="" /></ div >

< asp : Image ID ="alaska_img" ImageUrl ="~/images/pix.gif" runat ="server" />

<

div style =" padding : 8px ; " class ="cruise_item_desc">

< asp : Label ID ="lblcruiseitem_alaska" runat ="server" />

</

div >

</ div >