Ultimate Fade-In Slideshow - making the show full-screen
1) Script Title: Ultimate Fade-In Slideshow (v2.4)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm
3) Describe problem:
Hello there. I am building a slideshow for my client, and we both agree that the script is fantastic for our needs. However, there are two things I was wondering about:
First, I added navigation buttons using the togglerid option, so that users can scroll through pictures. It is set to cycle through pictures automatically. However, once the buttons are used, then the slideshow no longer plays on its own. Is there some way that the buttons won't make the cycling stop?
Second, my client would like users to be able to make the slideshow full-screen. I've seen this function on sites such as Photobucket, but I have no idea how to do it myself.
Here is the code:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://[WEBSITE]/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["image1.jpg", "link1", "_new", "Title"],
["image2.jpg", "link2", "_blank", "Title"],
["image3.jpg", "link3", "_blank", "Title"]
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "paradetoggler"
})
</script>
<body>
<div id="fadeshow1"></div>
<div id="paradetoggler">
<a href="#" class="prev"><img src="reverse.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="forward.png" style="border-width:0" /></a>
</div>
</body>
Any help on either of these topics would be greatly appreciated! If you need more information, I would be happy to provide it. Thank you for your time.
