Automatic slideshow?

[lukeurtnowski]

On my site, I have 1 image flipped 4 times, using links…
http://fixmysite.us/OTO/loc.shtml
Only when the mouse moves over each link does the right image show, and the color of the link (its background) changes.
I’m trying to figure out how I can automatically make it so that the images switch as soon as the page is loaded so that the links color also changes.
There must be a way to do this with javascript but I can figure how.
Can I get some help?
Thanks…

[Paul_Wilkins]

To try and phrase this in a more programmable way, are you wanting one of them to be selected by default when the page loads?

[lukeurtnowski]

No sorry (Its hard to explain) but what I’m looking for is once the page loads, each of the 4 images (the ones with the red boxes) showing the location of the unit is put into an automatic slideshow starts, with about a 2 second delay between 4 slides. It would be a plus if I can also get that link background (to change to grey) each of the 4 times, can this be done so that the image flip still works after the slideshow?
I want this because I dont know if the user would know to put his mouse over each link in order to do the image flip.
thanks Paul

[Paul_Wilkins]

You could loop through each of the links in the ‘modernbricksmenu’ section, and trigger the onmouseover event.

The background color of the nav section is set by CSS, so you would need to simulate that with an added class name, perhaps called ‘current’ on the currently active link.

How could this be achieved? You could use a setInterval event that checks for a link with the class name ‘current’, which then removes it and sets it on the next link before triggering the onmouseover function of that link.

[lukeurtnowski]

Lemme explain this better…

What im looking for is as soon as the page opens a slideshow starts over that super large image. The first image will just be of nothing but the buildings (as it is now), the second, third, fourth, and fifth image would be the locations of each of the four units (red boxes). This slideshow would be simple image “flips” with about a 2 second interval between each image. Also if possible, id like to have those black boxes (hover over them turns them to grey) so that what image is being shown corresponds to its highlighted link. It would also be nice if the manual image flip would work once the slideshow has ended.
Thanks

[lukeurtnowski]

jeez…
your fast…

[Paul_Wilkins]

@lukeurtnowski

jeez…
your fast…

My answer came in 3 minutes earlier than your question.

The only conclusion can be: I’m a time traveller.

[lukeurtnowski]

[FONT=Arial][SIZE=3]<script type=“text/javascript”>
<!–
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.global.src=eval(“myimage”+step+“.src”)
if (step<5)
step++
else
step=1
//call function “slideit()” every 2.5 seconds
setTimeout(“slideit()”,2500)
}
slideit()
//–>
</script>

I can see how that would flip the images, but how would I also change the CSS and add the class=“current”
to the active link?

[/SIZE][/FONT]

[Paul_Wilkins]

@lukeurtnowski

I can see how that would flip the images, but how would I also change the CSS and add the class=“current”
to the active link?

You’re going to need an easy way to add/remove/check if an element has a class name on it. There’s a well-used set of functions at http://snipplr.com/view/3561/addclass-removeclass-hasclass/ for doing that.

function hasClass(ele,cls) {
	return ele.className.match(new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)'));
}
 
function addClass(ele,cls) {
	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
 
function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
    	var reg = new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)');
		ele.className=ele.className.replace(reg,' ');
	}
}

You may also find it effective to create a toggleClass function

function toggleClass(ele, cls) {
    if (hasClass(ele, cls)) {
        removeClass(ele, cls);
    } else {
        addClass(ele, cls);
    }
}

Next, you’ll want to start off by searching the links to find the one that has a class name of “current”. If none is found you can add the “current” class to the first link. If one is found though, you’ll want to remove the “current” class from that link, and then add it to the next link (looping back to the start if need be).

Once the class has been set, you know which link is the one to use, so you don’t need to do any tricksy eval stuff. Instead you can just invoke the onmouseover function of that particular link.

[lukeurtnowski]

is this ok?

<script type=“text/javascript”>
<!–
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.global.src=eval(“myimage”+step+“.src”)
if (step<5)
step++
else
step=1
//call function “slideit()” every 2.5 seconds
setTimeout(“slideit()”,2500)
}
slideit()

function hasClass(ele,cls) {
return ele.current.match(new RegExp(‘(\\s|^)’+cls+‘(\\s|$)’));
}

function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.current += " "+cls;
}

function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp(‘(\\s|^)’+cls+‘(\\s|$)’);
ele.className=ele.className.replace(reg,’ ');
}
}
function toggleClass(ele, cls) {
if (hasClass(ele, cls)) {
removeClass(ele, cls);
} else {
addClass(ele, cls);
}
}
//how do I test what link has the class name = “current”?
//im thinking of adding this code
//if (currentPage.parent().hasClass(‘current’))
// toggleClass(ele, “current”);
//define the rule for the class
//below document.images.global.src=eval(“myimage”+step+“.src”)

//–>
</script>

[Paul_Wilkins]

Let’s go from what I was saying before, and put it in to actual code.

@pmw57

You could use a setInterval event that checks for a link with the class name ‘current’, which then removes it and sets it on the next link before triggering the onmouseover function of that link.

Broken down that is:

1. Use a setInterval event
2. Loop through the links
3. Find link with class name of “current” (if not found default to first)
4. remove the “current” class from that link
5. add the "current class to the next link (or if at end, back at the start)
6. trigger the onmouseover event of that link

Here are the pieces of code that achieve the above

1. Use a setInterval event

The menu is the focus of our slider, so we can assign to that menu a variable that relates to the timed event. We can use that saved variable as a reference should we later on want to stop the event.

var menu = document.getElementById('modernbricksmenu');
menu.slider = setInterval(function (el) {
    return function () {
        slideit.call(el);
    }
}(menu), 2500);

Notice that instead of passing a string to the interval function, that something else is being done.

It could have been as simple as setInterval(slideit, 2500) but then we would need to another getElementById inside the function to get the menu. Instead of that, when that function is invoked I want it to be called in the context of the menu itself. We can do that by returning to the interval a function that knows about the menu (as the el variable) so that we can then invoke the slideit function in the context of that menu.

2. Loop through the links

function slideit() {
    var links = this.getElementsByTagName('a'),
        link,
        i;
    for (i = 0; i < links.length; i += 1) {
    
    }
}

3. Find link with class name of “current” (if not found default to first)

var current = 0;
for (i = 0; i < links.length; i += 1) {
    link = links[i];
    if (hasClass(link, 'current')) }
        current = i;
    }
}

4. remove the “current” class from that link

removeClass(links[current], 'current');

5. add the "current class to the next link (or if at end, back at the start)

current = (current + 1) % links.length;
addClass(links[current], 'current');

Using (current + 1) works for all links except for the last one.

Using the modulus operator gives us the remainder after dividing by the number of links, which in the case of the last link, returns the current link back to 0.

6. trigger the onmouseover event of that link

links[current].onmouseover();

That’s all you need so far as the scripting is concerned.

Having the current menu link show that it’s active, is where you update the existing hover effect.

#modernbricksmenu a:hover {
background-color: gray; /*Menu hover bgcolor*/
}

It’s not possible to trigger a hover effect from javascript, so you need to instead use a separate class, which we are using as “current”.
Here it is with the “current” class added as another selector

#modernbricksmenu a:hover,
#modernbricksmenu a.current {
background-color: gray; /*Menu hover bgcolor*/
}

The script that we’ve just gone through, where we keep everything as simple and understandable as practical, looks like this:

function slideit() {
    var links = this.getElementsByTagName('a'),
        link,
        i,
        current = 0;
    for (i = 0; i < links.length; i += 1) {
        link = links[i];
        if (hasClass(link, 'current')) {
            current = i;
        }
    }
    if (hasClass(links[current], 'current')) {
        removeClass(links[current], 'current');
    }

    current = (current + 1) % links.length;
    addClass(links[current], 'current');
    links[current].onmouseover();
}

var menu = document.getElementById('modernbricksmenu');
menu.slider = setInterval(function (el) {
    return function () {
        slideit.call(el);
    }
}(menu), 2500);