Results 1 to 5 of 5

Thread: JQuery Slider Help

  1. #1
    Join Date
    Apr 2010
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy JQuery Slider Help

    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:

    Code:
    // 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:

    Code:
    /* 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

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    As for the number, replace the highlighted with "&nbsp;"
    Code:
    $('#slideReference').append('<div class="slideNumber">'+i+'</div>');
    For the different color dot, you'd have to edit this picture: http://www.jickpictures.com/preview/...mages/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:
    Code:
    	for(i = 1; i < (totalSlides+1); i++){
    		$('#slideReference').append('<div class="slideNumber">&nbsp;</div>');
    	}
    You could add an if statement like:
    Code:
    	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!
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    jickpictures (11-04-2010)

  4. #3
    Join Date
    Apr 2010
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #4
    Join Date
    Apr 2010
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by jickpictures; 11-04-2010 at 09:35 AM.

  6. #5
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Okay - instead leave the part I told you to change alone, and in the css add the highlighted:
    Code:
    					.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:
    Code:
    					.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:
    Code:
    	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?
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •