My script needs a fade rotator!
Why don't they communicate with each other.
I saw this (www.3fm.nl) which has a nice slider and I want to create a similar one.
I got the hover-part. Which seems to work fine. However I need the fading slideshow when not hovering.
Who can help me with my final js?html
- <div id="slideshow">
- <div class="show_pictures_container">
- <ul class="show_pictures">
- <li class="article_row cols1 clearfix">
- <div class="article_column column1">
- <div class="contentpaneopen">
- <div class="article-content">
- <a href="#">
- <img src="1.jpg" height="440" width="940"></a>
- </div>
- </div>
- </div>
- </li>
- <li class="article_row cols1 clearfix">
- <div class="article_column column1">
- <div class="contentpaneopen">
- <div class="article-content">
- <a href="#">
- <img src="2.jpg" height="440" width="940"></a>
- </div>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div class="show_menu_container">
- <ul class="show_menu">
- <li>
- <a href="#">Item1</a>
- </li>
- <li>
- <a href="#">Item2</a>
- </li>
- </ul>
- </div>
- </div><!-- end slideshow -->
javascript
- <script type="text/javascript">
- $jquery(document).ready(function(){
- $jquery(".show_menu li:last").addClass("actief")
- $jquery(".show_menu li").hover(function() {
- $jquery(".show_menu li:last").removeClass("actief");
- var index = $jquery(".show_menu li").index(this);
- $jquery(this).addClass("actief");
- $jquery("ul.show_pictures").find('li').eq(index).addClass("over");
- },function(){
- $jquery(".show_menu li:last").addClass("actief");
- $jquery(this).removeClass("actief");
- var index = $jquery(".show_menu li").index(this);
- $jquery("ul.show_pictures").find('li').eq(index).removeClass("over");
- });
- });
- </script>