Ultimate Fade-In Slideshow v2.6.1

[benyon24]

1) Script Title: Ultimate Fade-In Slideshow v2.6(.1)

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...nslideshow.htm

3) Describe problem: Hi guys. I'm trying to incorporate your excellent fade-in slideshow onto a small site for my son (work so far at http://www.websiteprototypes.co.uk/autoartworks2/) and have managed to install a three-image slideshow, working automatically on entry but with the ability to make it manual if desired ... and that all works nicely. However, I don't know what to do to get the current slide number to show (through 'status').

I'm afraid I'm not that experienced in web design and I'm also intrigued to know where the 'prev' and 'next' class definitions are as well as that for 'status' - naively I would expect to see them somewhere in a stylesheet.

Thanks in advance for your help.

[jscheuer1]

Everything seems to be there, the trouble with the status is that it's black, so you can hardly see it. You can change the style of things either inline or in a stylesheet, but the previous and next buttons themselves are the images. So if you want to change them dramatically, you need to either change them in an image editing program or make/get different ones. Optionally you could use characters, html, and/or style. To just get the status to be more readable, add the highlighted:

<div id="slideshowtoggler"><a href="#" class="prev"><img src="images/left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold; color:white;"></span> <a href="#" class="next"><img src="images/right.png" style="border-width:0" /></a></div>

If you want to style these things from a stylesheet, the hooks would be:

#slideshowtoggler .prev {styles go here}
#slideshowtoggler .status {styles go here}
#slideshowtoggler .next {styles go here}

[benyon24]

Thank you very much, John. I'm kicking myself (on your behalf) as I did briefly think of this but convinced myself the counter wasn't there.

Would you mind if I asked again where the 'prev', 'next' and 'status' style definitions are? I tried changing the name of one of them and the button then didn't work (as it should - it then used the # link to go to the top of the page) so obviously the style class isn't there just in case I want to use it.

Very best wishes.

Neil

[jscheuer1]

You cannot remove the class, but you can use it in your stylesheet if you want to. Alternatively, you can add a class or classes and it will still work, then you can use the other class(es) for styling. You can also add one id*. So you could do:

<div id="slideshowtoggler"><a href="#" class="prev myclass"><img src="images/left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold; color:white;"></span> <a href="#" class="next"><img src="images/right.png" style="border-width:0" /></a></div>

or:

<div id="slideshowtoggler"><a href="#" class="prev myclass anotherclass"><img src="images/left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold; color:white;"></span> <a href="#" class="next"><img src="images/right.png" style="border-width:0" /></a></div>

or:

<div id="slideshowtoggler"><a href="#" class="prev" id="myid""><img src="images/left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold; color:white;"></span> <a href="#" class="next"><img src="images/right.png" style="border-width:0" /></a></div>

Then use one or more of those to style it in the stylesheet. But you can also use the existing class as well. The only requirement is that it still have the "prev" class.

Like you could remove all style from the toggler div:

<div id="slideshowtoggler"><a href="#" class="prev"><img src="images/left.png" /></a> <span class="status"></span> <a href="#" class="next"><img src="images/right.png" /></a></div>

Then in your stylesheet you could have:

#slideshowtoggler img {border-width:0;}
#slideshowtoggler .status {margin:0 50px; font-weight:bold; color:white;}

If you wanted to do something particular with just with the previous button:

#slideshowtoggler .prev {position: relative; left: -10px;}

Or as I say, if you already have a class for image links that you want to use, just add it. The only requirement is that you also keep the classes used by the slideshow to find its button and status elements.


*An element can have a virtually unlimited amount of classes added to it and they do not have to be unique to that element on that page. An element may also have one and only one id, which should be unique to it on that page. Any or all of these classes and the one id may be used singly or in combination to style the element and/or to incorporate it into a script. Since the script is already using certain classes, those must remain, but they can still also be used for styling, or other class(es) may be added.

[benyon24]

Hi John,

I'm so very grateful for the time you've taken with your explanation and there's lots of stuff that's going into my Web Design Scrapbook but if you didn't mind, I still need to ask : how is the class="prev", for example, functioning, as it is clearly needed to make the back arrow work. Is the "go back an image" defined somewhere - maybe in JavaScript - that is associated with the class="prev" statement? And, of course, how does the class="status" cause the counter to be generated in the span?

Sorry to keep 'ferreting'!

Very best wishes,

Neil

[jscheuer1]

OK, first about posts not showing up right away. Because forums are subject to a lot of spam and sometimes even indecent material, the administrator here has installed a program that automatically holds back posts according to certain algorithms. Most of the time it's a little overzealous, but without it, we would be inundated with garbage posts. As a result though, we often have to manually approve posts later. As a moderator, I'm one of at least several folks who can do that, but we don't always get to everything right away, please be patient and accept our apologies.

As to your question, basically yes. In addition to being hooks for a stylesheet, class names and id's can be used by javascript to identify (initialize in many cases) certain elements for certain purposes. As an example, here's where in the script that the code does this for prev/next and status classes:

	paginateinit:function($){
		var slideshow=this
		var setting=this.setting
		if (setting.togglerid){ //if toggler div defined
			setting.$togglerdiv=$("#"+setting.togglerid)
			setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
			setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
			setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
				var $target=$(this)
				slideshow.navigate($target.data('action'))
				e.preventDefault()
			})
			setting.$status=setting.$togglerdiv.find('.status')
		}
	},

Once they're initialized in this fashion, they can be used later by other parts of the code to perform their desired roles in the slideshow. If they're (the expected elements with the expected class names) not there though, then of course they cannot be utilized.

[benyon24]

Very many thanks, John, for your patience with this newbie and for the explanation.

Very best wishes,

Neil