PDXSlide 0.9

PDXSlide is a very simple but highly customizeable jQuery slider. Yes, there are a lot of sliders out there, so what makes this one different? Not a whole lot actually. The purpose of this was to make the existing slider on PortlandOnline.com (soon to be PortlandOregon.gov) up to date as the last one was ancient, slow, and didn't work the same on each browser. Also, the markup for it was almost "anti-semantic". Some things that do make this different are:

• Highly customizeble (25+ options)
• No external CSS (drop in the JS file and it works!)
• Internals are built with an "_api()" which has half a dozen calls to make modifying easy

This is not all! There are some features in development before it goes 1.0.

• A slick loader which includes an animated percentage bar (like Gmail when you login).
• Callbacks for nearly every action the slideshow does
• Support for keyboard navigation once focused on
• Ability to link directly to certain slides like: http://mysite.com/mypage/#!/pdxslide/2
• Option to choose a starting point
• Option to choose what direction for it to go

Installation

Installing is easy:

1. First, put the arrow images (optional), on your server where ever you want. By default it looks in the same directory as the script.
2. Next, put your slide images in an <ol> or a <ul> in the <li> tags. Each <li> is a slide.
3. If you want, wrap your <img>s with <a> to make the slides clickable.
4. To add an optional headline and/or description (the text that shows up in the black bar) simply add an <h2> and/or <p> with text. It will accept HTML in those tags as well.

The demo HTML code looks like this

  

    
    
Hello World
    
Boy is it a nice day out... not
  
  

    
    
Something Else Would Go Here
    
Like description text, or a link
    or something, ya know?
  
  

    
      
  
  

    
    
Another one
    
lorem ipsum dolor gamet hollah!
  
    

    
    
Tha…That…Tha…Tha…
    
That's all folks!
  

To get this to work, the only jQuery you need is:

$('#slideshow').pdxslide();