PDA

View Full Version : Change content of div as slideshow changes



svoltmer
07-30-2012, 02:44 PM
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
07-31-2012, 04:15 PM
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
08-02-2012, 08:35 PM
Thanks! I really need to learn Javascript better.