hey people. Been messing around with the new jQuery just from today. so far I made this just to mess around with.

 

slideshow

 

Couple of things, I cant get the pictures to slide and also the buttons look very pixelated.

 

Will be thankful for the help, thank you.

 

HTML

<div id="slideshow">
     <ul>
       <li id="img1"><a href="#"><img src="images/slideshow/img1.jpg" alt="first picture" /></a></li>
       <li id="img2"><a href="#"><img src="images/slideshow/img2.jpg" alt="second picture" /></a></li>
       <li id="img3"><a href="#"><img src="images/slideshow/img3.jpg" alt="third picture" /></a></li>
    </ul>
</div>
<div id="slideshow-nav">
     <ul>
         <li><a href="#img1">picture1</a></li>
         <li><a href="#img2">picture2</a></li>
         <li><a href="#img3">picture3</a></li>
      </ul>
</div>

CSS

#slideshow {
width: 300px;
height: 300px;
overflow: scroll;
overflow-y: hidden;
box-shadow: 0px 0px 80px #000;
-moz-box-shadow: 0px 0px 80px #000;
-webkit-box-shadow: 0px 0px 80px #000;
margin-top: 40px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
#slideshow ul {
width: 1500px; 
list-style: none;
}
#slideshow ul li {
float: left;
}
#slideshow-nav {
width: 250px;
visibility: hidden;
margin-top: 0;
margin-right: auto;
margin-bottom: 200px;
margin-left: auto;
}
#slideshow-nav ul {
list-style: none;
}
#slidshow-nav ul li {
float: left;
}
#slideshow-nav ul li a {
display: block;
width: 30px;
height: 30px;
background-colour: #fff;
text-indent: -9999px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
-webkit-box-shadow: 0px 0px 30px #000;
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
float: left;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
background-color: #a89d8a;
}

jQuery

$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visibility", "visible");
$("#slideshow a(href=#img1]").addClass("active");

$("#slideshow-nav").localScroll({
	target: '#slideshow', axis: 'x'
});

$("#slideshow-nav a").click(function(){
	$("#slideshow-nav a").removeClass("active");
	$(this).addClass("active");
});
});

regards

Webpage error details

 

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB7.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; .NET CLR 1.1.4322)

Timestamp: Thu, 4 Aug 2011 07:20:21 UTC

 

 

Message: Syntax error

Line: 1

Char: 1

Code: 0

URI: https://ajaz.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

 

 

Message: 'jQuery' is undefined

Line: 11

Char: 2

Code: 0

URI: http://www.b3webstudio.com/scripts/jquery.scrollTo.js

 

 

Message: 'jQuery' is undefined

Line: 9

Char: 2

Code: 0

URI: http://www.b3webstudio.com/scripts/jquery.localscroll.js

 

 

Message: Object doesn't support this property or method

Line: 4

Char: 2

Code: 0

URI: http://www.b3webstudio.com/scripts/slideshow.js

 

 

 

for a start looks like jquery is not being loaded.

Well you typed 'ajax' wrong.

 

<script src="https://ajaz.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

 

Change to:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>