Change content of div as slideshow changes

[svoltmer]

I am using a Jquery plugin, "jslidernews 2.0" and would like to have a div with descriptive content below the slideshow (Heading and lorum-ipsum) that would change as the slideshow changes.

Here is my site page:
http://www.rose-hulman.edu/testing/

[jscheuer1]

In about the simplest terms you would add the highlighted to your on page init:

<script type="text/javascript">
 $(document).ready( function(){	
		var buttons = { previous:$('#jslidernews2 .button-previous') ,
						next:$('#jslidernews2 .button-next') };	
		$('body').append($('<div style="visibility: hidden; position: absolute; top: -10000px; left: -10000px;"></div>').append($('.slider-extra')));
		$('#jslidernews2').lofJSidernews( { interval:6000,
			easing:'easeInOutQuad',
			duration:1200,
			auto:true,
			mainWidth:1000,
			mainHeight:300,
			navigatorHeight		: 100,
			navigatorWidth		: 310,
			maxItemDisplay:3,
			onComplete:function(slider, index){
				$('.center-content').empty().append($('.slider-extra').eq(index).clone(true));
			},
			buttons:buttons
		});						
	});

</script>

This allows you to add a slider-extra class div to each li. Put what you want in it for each slide:

    		 <!-- CAROUSEL CONTENT --> 
              <div class="main-slider-content" style="width:1000px; height:300px;">
                <ul class="sliders-wrap-inner">
                    <li>
                    <img src="images/thumbl_1000x340.png" title="Newsflash 1" >
                      <div class="slider-description">
                        <div class="slider-meta"><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 1</h4>
                            <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                         <div class="slider-extra">1Hello World!</div>
                    </li> 
                   <li>
                      <img src="images/thumbl_1000x340_002.png" title="Newsflash 2" >           
                         <div class="slider-description">
                           <div class="slider-meta"><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a> 	<i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 2</h4>
                            <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                         <div class="slider-extra">2Hello World!</div>
                  </li> 
                   <li>
                      <img src="images/thumbl_1000x340_003.png" title="Newsflash 3" >            
                        <div class="slider-description">
                          <div class="slider-meta"><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> 	<i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 3</h4>
                            <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                         <div class="slider-extra">3Hello World!</div>
                    </li> 
                    <li>
                      <img src="images/thumbl_1000x340_004.png" title="Newsflash 5" >            
                        <div class="slider-description">
                          <div class="slider-meta"><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a>	<i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 4</h4>
                            <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                         <div class="slider-extra">4Hello World!</div>
                    </li> 
                    <li>
                      <img src="images/thumbl_1000x340_005.png" title="Newsflash 5" >            
                        <div class="slider-description">
                           <div class="slider-meta"><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a>	<i> — Monday, February 15, 2010 12:42</i></div>
                           <h4>Content of Newsflash 5</h4>
                            <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                         <div class="slider-extra">5Hello World!</div>
                    </li> 
                    <li>
            
                      <img src="images/thumbl_1000x340_006.png" title="Newsflash 5" >            
                        <div class="slider-description">
                          <div class="slider-meta"><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a>	<i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 6</h4>
                            <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                         <div class="slider-extra">6Hello World!</div>
                    </li> 
                
                  </ul>  	
            </div>
<!-- END MAIN SLIDER CONTENT -->

The browser cache may need to be cleared and/or the page refreshed to see changes.

[svoltmer]

Thanks! I really need to learn Javascript better.