New BG Stretcher Slideshow With Pager Added
I finally implemented the the slideshow and pager functionality that comes with the BG stretcher plug-in. There is a main.js file that is in the demo. You need that file in order to use the pager functions. Once the file is linked, you can add the options in the initializer. I added a call to a pause method so that when the page loads it defaults to pause. Then you just have to make some divs with id’s that match what you have in the options. That’s about it. Deciding where to put the controller was the hard part. For this site I put it at the top in a fixed positioned div that spans all the way across. Oh, and it’s possible to change the names of the buttons in the main.js file. A class of showPage gets added to the current slide pager list item so you can style the current slide’s number. I used an underline.
<script type=”text/javascript”>
$(document).ready(function(){
// Initialize Backgound Stretcher
$(‘BODY’).bgStretcher({
images: [‘<?php bloginfo(‘template_directory’);?>/images/bg_danshui.jpg’, ‘<?php bloginfo(‘template_directory’);?>/images/bg_korea.jpg’, ‘<?php bloginfo(‘template_directory’);?>/images/bg_gwangali.jpg’, ‘<?php bloginfo(‘template_directory’);?>/images/bg_jcjesena.jpg’, ‘<?php bloginfo(‘template_directory’);?>/images/bg_tongyung.jpg’, ‘<?php bloginfo(‘template_directory’);?>/images/bg_seward.JPG’],
imageWidth: 1920,
imageHeight: 1080,
slideDirection: ‘W’,
slideShowSpeed: 1000,
nextSlideDelay:5000,
transitionEffect: ‘superSlide’,
/*sequenceMode: ‘random’,*/
buttonPrev: ‘#prev’,
buttonNext: ‘#next’,
pagination: ‘#bgpager’,
anchoring: ‘left center’,
anchoringImg: ‘left center’
});
$(‘BODY’).bgStretcher.pause(); //slideshow starts paused
});
</script>
<div id=”bgcontroller”> <!–<img id=”collapse” src=”<?php bloginfo(‘template_directory’);?>/images/Bullet-Picture-32.png” width=”32″ height=”32″ alt=”collapse”>–> <a id=”collapse”>Collapse</a> |
<div><a href=”javascript:;” id=”toggleAnimation” >Play</a> |</div>
<div> <a href=”javascript:;” id=”prev”>Previous</a> | <a href=”javascript:;” id=”next”>Next</a> </div>
<div id=”bgpager”> </div>
</div>