Photo Slideshow Function or CSS problem?

Hello! I’m very relatively new to JavaScript and web design/development. Trying to read books about it and all the different types of languages. Today, I started working on a personal project. On one of the pages, I’ve been trying to work on… the JS or CSS for it or something isn’t right and the photos aren’t displaying or anything… just the empty picture symbol in the upper right hand corner. Ugh! Been searching online for solutions and came up with zilch, goose egg, nada. Could be doing something wrong as a beginner, but was wondering if anyone could help me figure it out? Any advice would be nice as well :slight_smile:

Here’s the script:

function slideSwitch() {
var $active = $(‘#slideshow IMG.active’);

		if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

		var $next =  $active.next().length ? $active.next()
    		: $('#slideshow IMG:first');

		$active.addClass('last-active');

		$next.css({opacity: 0.0})
    		.addClass('active')
    		.animate({opacity: 1.0}, 1000, function() {
        		$active.removeClass('active last-active');
    		});
	}

	$(function() {
		setInterval( "slideSwitch()", 3000 );
	});

Then here’s the CSS:

#slideshow {
position:relative;
height:350px;
}

	#slideshow IMG {
		position:absolute;
		top:0;
		left:0;
		z-index:8;
	}


	#slideshow IMG.active {
		z-index:10;
	}


	#slideshow IMG.last-active {
		z-index:9;
	}

And in the body to call it (if that’s the terminology?) I have:

<div id=“slideshow”>
<img src=“1.jpg” alt=“” class=“active” />
<img src=“2.jpg” alt=“” />
<img src=“3.jpg” alt=“” />
<img src=“4.jpg” alt=“” />
</div>

Thank you!

Hi Telo. We really need to see a live link to be able to help. Is that possible?

There is nothing else to the code than that. I was just testing to see if it worked when previewing. Maybe I put it into the source code file wrong?

Honestly, don’t know exactly what I’m doing… sorry for the troubles.

<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript”>

	function slideSwitch() {
		var $active = $('#slideshow IMG.active');

		if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

		var $next =  $active.next().length ? $active.next()
    		: $('#slideshow IMG:first');

		$active.addClass('last-active');

		$next.css({opacity: 0.0})
    		.addClass('active')
    		.animate({opacity: 1.0}, 1000, function() {
        		$active.removeClass('active last-active');
    		});
	}

	$(function() {
		setInterval( "slideSwitch()", 3000 );
	});


	&lt;/script&gt;

	&lt;style type="text/css"&gt;

	#slideshow {
		position:relative;
		height:350px;
	}


	#slideshow IMG {
		position:absolute;
		top:0;
		left:0;
		z-index:8;
	}


	#slideshow IMG.active {
		z-index:10;
	}


	#slideshow IMG.last-active {
		z-index:9;
	}


&lt;/style&gt;

</head>

&lt;body&gt;
	&lt;div id="slideshow"&gt;
			&lt;img src="1.jpg" alt=" class="active" /&gt;
			&lt;img src="2.jpg" alt="" /&gt;
			&lt;img src="3.jpg" alt="" /&gt;
			&lt;img src="4.jpg" alt="" /&gt;
	&lt;/div&gt;
&lt;/body&gt;

<html>

I’m no JS buff, but it looks like your code is referencing a library (like jQuery) so you’d need a link to the library that is being referenced, too. E.g.

<head>
[COLOR="#0000CD"]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>[/COLOR]
<script type="text/javascript">
 [COLOR="#FF0000"][I]your script here[/I][/COLOR]
</script>

I’m just guessing here, though. Where did you get that JavaScript code?

When I added that it still didn’t work.

I got the code online… at least for referencing/help.
Did some research on some learning JS sites and it seemed right?
As mentioned before… a noob at all this.
Will continue to look about though.

If a solution can’t be found, this part can be dropped from the project.
It’s not major.

Thanks for the suggestion :slight_smile:


Update! Figured it out. Got it fixed. Thanks for your help @ralph.m