JQuery Slider Help

[jickpictures]

Hey everyone,

I was wondering if someone can help me change some actions with a JQuery content slider menu. You can take a look at it here: http://www.jickpictures.com/preview.

As you can see, the dots at the bottom control the slider. That's how I want it. However, I have no idea how to get rid of the numbers. I also want to make it so I can add a different color dot than the rest. And finally, I want to be able to have an active image state once you're on the current slider.

Here is a the javascript:


// JavaScript Document
$(document).ready(function(){
var slideTime = 700;
var currentSlide = 1;
var totalSlides = $("#slideBoard > div").size();
var slideWidth = $('#slideFrame').css('width');
var slideAmount = parseInt(slideWidth);
function slideLeft(){
if(currentSlide > 1){
$("#slideBoard").animate({
left: ['+='+slideAmount, 'swing']
}, slideTime );
currentSlide += -1;
}
}
function slideRight(){
if(currentSlide < totalSlides){
$("#slideBoard").animate({
left: ['+=-'+slideAmount, 'swing']
}, slideTime );
currentSlide += 1;
}
}
function slideTo(slideNumber){
///*
slideNumber = parseInt(slideNumber);
slidePos = slideNumber -1;
var p1 = $('#slideBoard');
var position1 = p1.position();

var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
//alert(p2.html());
var position2 = p2.position();
var slideFor = (-position1.left) - position2.left;

//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
$("#slideBoard").animate({
left: ['+='+slideFor, 'swing']
}, slideTime );
currentSlide = slideNumber;

//*/
}
$('#slide2Left').click(function(){
slideLeft();
});
$('#slide2Right').click(function(){
slideRight();
});

$(document).keydown(function(e){
if(e.keyCode == 37){
//alert( "left pressed" );
slideLeft();
return false;
}
if(e.keyCode == 39){
//alert( "rigt pressed" );
slideRight();
return false;
}
});

//# Slide Reference Tool
for(i = 1; i < (totalSlides+1); i++){
$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
}
$('.slideNumber').click(function(){
slideTo($(this).html());
});
$(".slidePoint").touchwipe({
wipeLeft: function() { slideRight(); },
wipeRight: function() { slideLeft(); },
min_move_x: 20,
preventDefaultEvents: true
});
});


Also, the CSS that corresponds with this script:


/* CSS Document */
#slideFrame{
width:1000px;
min-height:375px;
height:375px;
overflow:hidden;
position:relative;
}
#slideBoard{
position:absolute;
top:0px;
left:0px;
width:3000px;
min-height:350px;
margin:0px;
padding:0px;
}
.slidePoint{
width:1000px;
min-height:375px;
height:350px;
display:inline-block;
margin:0px;
padding:0xp;
float:left;
}
.slidePoint p{
padding:5px;
}

#slide2Left{
left:5px;
}
#slide2Right{
right:5px;
}
#slideReference{
position:absolute;
width: 900px;
min-height:20px;
bottom:5px;
left:50px;
text-align:center;
}
.slideNumber{
background: url(../images/dots.png);
cursor:pointer;
display:inline-block;
padding:1px;
margin:2px;
text-align:center;
min-height:20px;
min-width:20px;
}


I can't figure this out for the life of me. If anyone can help it'd be greatly appreciated, thank you so much.

Ryan

[Nile]

As for the number, replace the highlighted with "&nbsp;"


$('#slideReference').append('<div class="slideNumber">'+i+'</div>');


For the different color dot, you'd have to edit this picture: http://www.jickpictures.com/preview/site/images/dots.png If you need help editting, just tell me what color you want the dot (lighter darker, blue, red), and I'll provide you with the image.

Then inside:


for(i = 1; i < (totalSlides+1); i++){
$('#slideReference').append('<div class="slideNumber">&nbsp;</div>');
}


You could add an if statement like:


for(i = 1; i < (totalSlides+1); i++){
if(i == 2) {
$('#slideReference').append('<div class="slideNumber_color">&nbsp;</div>');
} else {
$('#slideReference').append('<div class="slideNumber">&nbsp;</div>');
}
}


And then add a new class with the bg for the dot the new image. For the selected - did you also want that a different color? Same color as the other different color, or a different different color - and do you need me to do this to?

Respond with information, thanks!

Good luck!

[jickpictures]

Wow you are so helpful! Haha, no it's okay I don't need you to change the color I can do that at least. But the coding was difficult for me, thank you so much.

[jickpictures]

Actually I just noticed, replacing that code with "&nbsp;" doesn't make it work. Do you know what the problem is?

And I also want the active state to be a different different color. However, I also don't understand how I can add a different color dot to the HTML. For example, one of the slides is a different color. But it also uses the same active color state as the others. The script change you gave me to add a different color also made slide 2 dysfunctional.

[Nile]

Okay - instead leave the part I told you to change alone, and in the css add the highlighted:


.slideNumber{
background: url(../images/dots.png);
cursor:pointer;
display:inline-block;
padding:1px;
margin:2px;
text-align:center;
min-height:20px;
min-width:20px;
text-indent: -999px;
}



To add another image to the css, add this:


.slideNumber{
background: url(../images/dots.png);
cursor:pointer;
display:inline-block;
padding:1px;
margin:2px;
text-align:center;
min-height:20px;
min-width:20px;
text-indent: -999px;
}

The normal highlighted is the location to your image.
The red highlighted would be the new name of the class you're going to use for the new image, then in the for, where I told you to add an if statement, add this:


for(i = 1; i < (totalSlides+1); i++){
if(i == 2) {
$('#slideReference').append('<div class="slideNumber_color">&nbsp;</div>');
} else {
$('#slideReference').append('<div class="slideNumber">&nbsp;</div>');
}
}

And change the highlighted to your new class name.

---

So basically, there are two images being used? One that is for a normal little dot, and one that is for special dots and active dots?