UFade individual buttons

[s323790r]

I have been using this script for a while now, http://www.dynamicdrive.com/dynamici...nslideshow.htm, and I love it!

One question. I am working on a new styling for this script, where thumbnails of each slide appear below the main slider, which would ideally be able to be clicked to transfer to that slide... is this possible?

Here is where I have the script currently:

http://kanzius.org/new-site/

Would this be possible with this script?

Thanks in advance!

[jscheuer1]

Please post new questions in a new thread like here where I've moved this, and:

Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.

And:

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

That said, I'm about to release an add on for Ultimate Fade In that enables extra buttons. It can do what you want.

Download this script:

Attachment 4033

And put it in the same folder as the slideshow script. Then on your page update to jQuery version 1.5.2 or greater, add in the tag for the extrabuttons.js script right after the tag for the fadeslideshow.js (which you've renamed slideshow.js) file. So this part:

    <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
    <script type="text/javascript" src="http://kanzius.org/new-site/sources/js/slideshow.js"></script>

will now look like so:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kanzius.org/new-site/sources/js/slideshow.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" src="http://kanzius.org/new-site/sources/js/extrabuttons.js">
// Extra Buttons Script (c)2011 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// add on for Ultimate Fade In Slideshow
// username: jscheuer1 - This Notice Must Remain for Legal Use
</script>

Change your init to:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "slider", //ID of blank DIV on page to house Slideshow
	dimensions: [974, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://kanzius.org/new-site/uploads/slides/curley.jpg", "", "", ""],
		["http://kanzius.org/new-site/uploads/slides/counter.jpg", "", "", ""]
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	extrabuttons: {pause: 6000},
	togglerid: "overlay"
})
</script>

And add the navbut class to your navigation images (replace your current overlay division with this one):

    	<div id="overlay">
      	<img class="navbut" src="http://kanzius.org/new-site/uploads/slides/thumbs/curley.jpg" />
        <img class="navbut" src="http://kanzius.org/new-site/uploads/slides/thumbs/counter.jpg" />
        <img class="navbut" src="http://kanzius.org/new-site/uploads/slides/thumbs/john.jpg" />
        <img class="navbut" src="http://kanzius.org/new-site/uploads/slides/thumbs/faces.jpg" />
      </div>

That's it, save all the changes, upload the files, clear the browser cache and refresh the page.

Notes:

I tested this locally with your page and it's working. However, you have 4 nav images and only 2 slideshow images. So the extra two will link to the first two images in the show. Once you have the same number of slide images as you have nav images, it will work out.

I added an extrabuttons pause to the init. This makes the show resume after 6 seconds after one of the nav images is clicked.

You may set the style for the class .navbut to include cursor: pointer; to make them look more like they do something.

The script adds lots of other capabilities, but everything is optional. One thing you might be interested in at some point is the onbrforeslide function. With it you can highlight a border for or otherwise draw attention to the active thumbnail.

I'll be blogging about this add on soon. When I do you can check out all the options and how to use them there.

[s323790r]

Thanks for the quick support! I've added the copyright/legal information to the source code of the main page. This fix was perfect!

Thank you for your time and effort to help me with this! Greatly appreciated.

[ccesca]

Thanks this really helped me out too!

If i want to use numbers instead of images, do i just apply the class to some text (i.e. my numbers)?

Is there a way that Fadslideshow could/would automatically insert the correct amount of numbers in the overlay div depending on how many images i had in the slideshow (or is that something only experienced coders would be able to dynamically general themselves)?

PS) I'm aware of the "view 1/3" style option, but wouldprefer plain text numbers in a row.

PPS) I downloaded the extrabuttons.js thank you! Where can i find documentation about what this script is capable of? For example the onbrforeslide function you mentioned above?

[jscheuer1]

Documentation is here:

http://www.dynamicdrive.com/forums/blog.php?b=248

Which has a linked in page:

http://home.comcast.net/~jscheuer1/s...tons_usage.htm

which explains things further. There are also demos on the blog page. this one:

http://home.comcast.net/~jscheuer1/s...ion/garden.htm

does what you want with numbered buttons, auto generates them.

I'm not sure what you mean by:

I'm aware of the "view 1/3" style option, but wouldprefer plain text numbers in a row.

could you elaborate? However that same demo may have what you want there as well. If not, let me know. You can use your browser's 'view source' to see how it's set up for the numbered buttons.