PDA

View Full Version : Ultimate Fade-In Slideshow centering conflict with IE9?



tnd1000
08-31-2012, 10:28 PM
Ultimate Fade-In Slideshow

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm


I am using this slideshow script on my website, which I am building using SocialEngine software. The show itself has the slideshow images centered in the middle of the slideshow frame, except when I view it on my site in IE9.

If I view it in Firefox, the show is centered. If I use the code in a simple .html webpage and view it with IE9, it is centered. I have tried adding some CSS such as the following:


#fadeshow1 img {
margin-right: auto;
margin-left: auto;
width: 70%;
}



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>


<script type="text/javascript" src="http://[mysite.com]/fadeslideshow.js">


/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/


</script>


<script type="text/javascript">


var mygallery=new fadeSlideShow(
{

wrapperid: "fadeshow1",
//ID of blank DIV on page to house Slideshow
dimensions: [1000, 500],

//width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray:
[

["img", "link", "_blank", "caption"],

["img", "link", "_blank", "caption"]

],


displaymode: {
type:'auto', pause:2500, cycles:0, wraparound:false
},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})




</script>

<body>

<div id="fadeshow1">

</div>


</body>

I have tried several different forms of CSS, but nothing is working. Any help in this matter would be greatly appreciated. Here's a link to the page in question:

http://mypetsonparade.com/pages/parade/

Thank you for your time!

jscheuer1
09-01-2012, 01:20 AM
Update to jQuery 1.7x. Change:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

to:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">

tnd1000
09-01-2012, 02:39 AM
Thank you very much! You guys have been stellar, in both your coding and your helpfulness!