Contact JD

x Cancel

JD

developer & designer

United States

posted 2 years ago

Super-simple Dynamic Slider Pagination

                // Cycle through each slider image
$("#slides img").each(function(index) {
	// Assign friendly slider numbers	
	index = index + 1;

	// Paginate slides after the first slide
	if (index != 0) {
		// Append pagination image to #pagination
		$("#pagination").append("<img src='img/dot-empty.png' class='pagination' id='p" + index + "' alt='Navigate to " + index + "' />");
		
		// Hide other slides
		$(this).css("display", "none");
	} else {
		// Paginate first slide
		$("#pagination").append("<img src='img/dot-full.png' class='pagination' id='p" + index + "' alt='Navigate to " + index + "' />");
	}
});                
Raw

Dynamic Pagination

This super-lightweight, super-simple dynamic jQuery pagination cycles through a set of images in a #slides element and generates pagination for them inside a #pagination element. An appended element looks something like this (I know that look intimidating):

 <img src="img/dot-empty.png" class="pagination" id="p1" alt="Navigate to 1" />
posted 3 years ago

New Personal Site Mockup

A quick, new design test with inspiration from <a href="http://daverupert.com/">Dave Rupert</a> and <a href="http://pancakeapp.com/">Pancake App</a>.

A quick, new design test with inspiration from Dave Rupert and Pancake App.

posted 3 years ago

jQuery Full Page Slider

                // -- Body Backgroud Slider Code
// -- JD French: May 27, 2011 --

$(document).ready(function() {
// VARIABLES //
btnWidth = "84"; //width of button(s) in pixels
btnHeight = "84"; //height of buttons(s) in pixels
leftButton = "#arrow-left"; //jQuery selector of left button
rightButton = "#arrow-right"; //jQuery selector of right button
padding = "7"; //pixel value of button padding

// LIST SLIDES //
var slides = [];
slides[1] = "home";
slides[2] = "about";
slides[3] = "services";
// END VARIABLES //

intSlides = slides.length - 1; //how many slides there are
//Hide other slides
for (i = 0; i<slides.length; i++) {
    if(i != 1) { //don't hide first slide
        $("#" + slides[i]).hide();
    }
}

//SetButtons function
function setButtons() {
    var height = $(window).height();
    var width = $(window).width();

    var hpos = width-btnWidth-padding + "px";
    var vpos = height/2-btnHeight + "px";

    //Arrows
    $(leftButton).css("top", vpos);
    $(leftButton).css("left", padding + "px");
    $(rightButton).css("top", vpos);
    $(rightButton).css("left", hpos);
}
    //Call SetButtons
    setButtons();

    //Define .resize to call SetButtons
    $(window).resize(function() {
        setButtons();
    });

    //Cycling
    currentObj = 1; //holds which slide is being displayed

    $(leftButton).click(function() {
        //Go back
        newObj = currentObj-1;
        if (newObj<1) {
            newObj = intSlides; //if you cycle back from slide 1, go to slide intSlides (max)
        }
        newBg = "images/" + slides[newObj] + ".jpg"; //background image url - images/the ID.jpg
        //Animation
        $("body").fadeOut(1000, function() {
            $("body").css("background", "url(" + newBg + ") no-repeat center center fixed").ready(function() {
                $("#" + slides[currentObj]).hide();
                $("#" + slides[newObj]).show();
                $("body").fadeIn(1000);
                //Change the currentObj
                currentObj = newObj;
                //Reposition the arrows in case of scrollbars
                setButtons();
            });
        });
    });
    $(rightButton).click(function() {
            //Go back
            newObj = currentObj+1;
            if (newObj>intSlides) {
                newObj = 1; //if you cycle forward from intSlides (max), go to 1st slide
            }
            newBg = "images/" + slides[newObj] + ".jpg"; //background image url - images/the ID.jpg
            //Animation
            $("body").fadeOut(1000, function() {
                $("body").css("background", "url(" + newBg + ") no-repeat center center fixed").ready(function() {
                    $("#" + slides[currentObj]).hide();
                    $("#" + slides[newObj]).show();
                    $("body").fadeIn(1000);
                    //Change the currentObj
                    currentObj = newObj;
                    //Reposition the arrows in case of scrollbars
                    setButtons();
                });
            });
        });
});
                
Raw

92 lines of pure awesome, in my opinion.

What it needs:

•   Two right and left buttons
•   Container (div, span, etc) with an ID corresponding to the slide name
•   Background image (images/id.jpg) that has a name that corresponds to the ID name

What it does:

•   Positions the buttons perfectly vertically centered and up against either side of the page horizontally and adds/subtracts the value of padding so the buttons are symmetrical
•   When the window is resized calls the positioning function again
•   Cycles the slides
•   Shows the next or previous slide by hiding slides[i-1] or slides[i+1] and showing slides[i]
•   Uses .css() to change the body background to images/#id#.jpg
•   Comes ready for new slides to be added into the slides array

Design I used it with is here: http://forr.st/~YuF
What do you think?

Update: Demo

posted 3 years ago

jQuery Full Page Slider

This snap is of my new home page layout on my hard drive. I'm not sure if the concept is new, but in essence the entire body of the document is a giant slider. The two arrows and the two tool-tips that pop up are positioned dynamically via jQuery by using the .height() and .width() function. The function that positions them is also called every time the window is resized.

The full page background image is based off of <a href="http://css-tricks.com/perfect-full-page-background-image/">Chris Coyier's post</a> on CSS-Tricks. When either arrow is clicked, it cycles to the next or previous page. The content and full page background is replaced. 

Like I said, I'm sure it has been done before, but I wanted some feedback. A one-page jQuery slider website. What do you think?

<strong>Edit:</strong> I've posted the jQuery code that makes this happen: <a href="http://forr.st/~YyJ">http://forr.st/~YyJ</a> Oh, and <a href="http://elephantlorry.com/personal/example/">demo</a>!

This snap is of my new home page layout on my hard drive. I'm not sure if the concept is new, but in essence the entire body of the document is a giant slider. The two arrows and the two tool-tips that pop up are positioned dynamically via jQuery by using the .height() and .width() function. The function that positions them is also called every time the window is resized.

The full page background image is based off of Chris Coyier's post on CSS-Tricks. When either arrow is clicked, it cycles to the next or previous page. The content and full page background is replaced.

Like I said, I'm sure it has been done before, but I wanted some feedback. A one-page jQuery slider website. What do you think?

Edit: I've posted the jQuery code that makes this happen: http://forr.st/~YyJ Oh, and demo!