HOT Effect rotator conflict with other effect

I'm trying to use THIS making the ENTIRE Effect rotator fade-in when I open my homepage.
But I can't make it, it seems something is conflicting to each other,
I tried to disable the rotator's jQuery but didn't work.

I don't want to put a mask over the rotator and make the mask fade-out. If it's possible, I want make the rotator itself fade-in.

Any suggestion is greatly appreciate.

Thanks.
Taylor

P.S. Please excuse my bad English, I used to speak Chinese

Hi,

If you want to do that only to HOT Effect rotator this would be solution:
Add this in index.php of template just before </head>:


<style type="text/css">
.nivoSlider{
opacity: 0;
filter:Alpha(Opacity=0);
}
</style>
<script type="text/javascript">

window.onload = function()
{
if(!jQuery)
{
alert('jQuery is not referenced!Please add reference to head section of your page!');
}
else{
var slider = jQuery('.nivoSlider');
if(slider[0]){
slider.delay(1000).fadeIn(2500);
}
}

};

</script>

Hello,

Thanks for fast reply.

I only use the rotator in my website's Mainpage,
and there are several jQuery modules in other pages.
So, is there a way to add fade-in effect to these different jQuery modules with the method I mentioned before, and use just one solution to solve the conflict?

Apparently it is loading jQuery more than once cause the problem,
maybe you can give me some suggestions about how to load jQuery library appropriately.


also,

<style type="text/css">
.nivoSlider {
opacity: 0;
filter:Alpha(Opacity=0);
}
</style>

It can't pass W3C's CSS validation so may not a good idea.

Thanks again.

Hi,

Make sure reference is in head section on page before any jscript call. Like this:
<script type="text/javascript" src=" code.jquery.com/jquery-latest.min.js ">

(note that above if global remote reference to latest jquery version. You probably have some folder with your site that contains jquery )

If needed you also have to have reference to jquery.ui,js and jQuery.ui.css

Add this script block after that reference:
<script type="text/javascript">
jQuery.noConflict();
</script>

Go from module to module and disable local loading of jQuery.
I'am not sure if you are using our templates and modules. If yes, then in every module that requires jQuery there is parameter named "Load JQuery".