Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
First commit. Includes everything working, but a small bug in IE8 and…
… no real readme file, but does include an index.html file with info and still needs docs on each parameter.
- Loading branch information
0 parents
commit 226d491
Showing
15 changed files
with
628 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| #Coming Soon | ||
| See the index.html until then |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>PDX Slide</title> | ||
| <link href="" rel="stylesheet"> | ||
| <style> | ||
| body { font-family:helvetica,arial,sans-serif; background:url(bg.gif); color:#444; text-shadow:#fff 0 1px 0; } | ||
| a {color:#648DAA;} | ||
| .clear{clear:both} | ||
| #wrapper { width:640px; margin:20px auto } | ||
| #wrapper > h1,#wrapper > h2,#wrapper > h3 { position:relative; margin-bottom:0;padding-bottom:0; } | ||
| #wrapper > h2 { font-size:14px; margin-bottom:15px; } | ||
| #description p,#description ul,#description ol { font-size:14px; line-height:1.5em; } | ||
| #description ul {margin:0 0 25px 0;} | ||
| .bug,.download {width:300px;} | ||
| .bug {float:left} | ||
| .download {float:right} | ||
| .bug {margin-right:20px;} | ||
| .bug p,.download p {margin-top:-10px;} | ||
| .bug .left,.download .left {width:64px;float:left;margin:20px 15px 0 0;} | ||
| .bug .right,.download .right {width:220px;float:left;} | ||
| pre {background:#444;border:1px dashed #fff;padding:10px;color:#fff;text-shadow:#000 0 1px 0;overflow:auto} | ||
|
|
||
| /* Hides images on load */ | ||
| #slideshow { height:295px;overflow:hidden; } | ||
| /* The only styles not included with PDXSlide: */ | ||
| .pdxslide-wrapper {border:5px solid #FFFFFF;-webkit-box-shadow:rgba(0,0,0,0.25) 0 0 10px;-moz-box-shadow:rgba(0,0,0,0.25) 0 0 10px;box-shadow:rgba(0,0,0,0.25) 0 0 10px;text-shadow:none;} | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="wrapper"> | ||
| <h1>PDXSlide 0.9</h1> | ||
| <h2>PortlandOregon.gov's jQuery Slider</h2> | ||
| <ol id="slideshow"> | ||
| <li><a href="http://google.com"><img src="slides/city.jpeg"></a><h2>Hello World</h2><p>Boy is it a nice day out... not</p></li> | ||
| <li><img src="slides/family_walking.jpeg"><h2>Something Else Would Go Here</h2><p>Like description text, or <a href="http://reddit.com">a link</a> or something, ya know?</p></li> | ||
| <li><img src="slides/install_solar.jpeg"><!-- intentionally left blank --></li> | ||
| <li><img src="slides/man_plant.jpeg"><h2>Another one</h2><p>lorem ipsum dolor gamet hollah!</p></li> | ||
| <li><img src="slides/pioneer_place.jpeg"><h2>Tha…That…Tha…Tha…</h2><p>That's all folks!</p></li> | ||
| </ol> | ||
|
|
||
| <div id="description"> | ||
| <p>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 <a href="http://portlandonline.com">PortlandOnline.com</a> (soon to be <a href="http://portlandoregon.gov">PortlandOregon.gov</a>) 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 <em>do</em> make this different are:</p> | ||
| <ul> | ||
| <li>Highly customizeble (25+ options)</li> | ||
| <li>No external CSS (drop in the JS file and it works!)</li> | ||
| <li>Internals are built with an "_api()" which has half a dozen calls to make modifying easy</li> | ||
| <!--<li>Supports key command actions once a user focuses on the slideshow</li>--> | ||
| </ul> | ||
|
|
||
| <p>This is not all! There are some features in development before it goes 1.0.</p> | ||
| <ul> | ||
| <li>A slick loader which includes an animated percentage bar (like Gmail when you login).</li> | ||
| <li>Callbacks for nearly every action the slideshow does</li> | ||
| <li>Support for keyboard navigation once focused on</li> | ||
| <li>Ability to link directly to certain slides like: <code>http://mysite.com/mypage/#!/pdxslide/2</code></li> | ||
| <li>Option to choose a starting point</li> | ||
| <li>Option to choose what direction for it to go</li> | ||
| </ul> | ||
|
|
||
| <h3>Installation</h3> | ||
|
|
||
| <p>Installing is easy:</p> | ||
| <ol> | ||
| <li>First, put the arrow images <em>(optional)</em>, on your server where ever you want. By | ||
| default it looks in the same directory as the script.</li> | ||
| <li>Next, put your slide images in an <code><ol></code> or a <code><ul></code> | ||
| in the <code><li></code> tags. Each <code><li></code> is a slide.</li> | ||
| <li>If you want, wrap your <code><img></code>s with <code><a></code> to make the slides clickable.</li> | ||
| <li>To add an optional headline and/or description (the text that shows up in the black bar) simply add an | ||
| <code><h2></code> and/or <code><p></code> with text. It will accept HTML in those tags as well.</li> | ||
| </ol> | ||
|
|
||
| <p>The demo HTML code looks like this</p> | ||
| <pre><ol id="slideshow"> | ||
| <li> | ||
| <a href="http://google.com"><img src="slides/city.jpeg"></a> | ||
| <h2>Hello World</h2> | ||
| <p>Boy is it a nice day out... not</p> | ||
| </li> | ||
| <li> | ||
| <img src="slides/family_walking.jpeg"> | ||
| <h2>Something Else Would Go Here</h2> | ||
| <p>Like description text, or <a href="http://reddit.com">a link</a> | ||
| or something, ya know?</p> | ||
| </li> | ||
| <li> | ||
| <img src="slides/install_solar.jpeg"> | ||
| <!-- intentionally left blank --> | ||
| </li> | ||
| <li> | ||
| <img src="slides/man_plant.jpeg"> | ||
| <h2>Another one</h2> | ||
| <p>lorem ipsum dolor gamet hollah!</p> | ||
| </li> | ||
| <li> | ||
| <img src="slides/pioneer_place.jpeg"> | ||
| <h2>Tha…That…Tha…Tha…</h2> | ||
| <p>That's all folks!</p> | ||
| </li> | ||
| </ol></pre> | ||
|
|
||
| <p>To get this to work, the only jQuery you need is:</p> | ||
| <pre>$('#slideshow').pdxslide();</pre> | ||
|
|
||
| <div class="bug"> | ||
| <div class="left"> | ||
| <img src="bug.png" width="64"> | ||
| </div> | ||
| <div class="right"> | ||
| <h3>Found a Bug?</h3> | ||
| <p> | ||
| As with any script, this will have bugs. Please report bugs on | ||
| <a href="http://github.com/OscarGodson/pdxslide">github</a>. You can ask for | ||
| cool new features there. | ||
| </p> | ||
| </div> | ||
| <br class="clear"> | ||
| </div> | ||
|
|
||
| <div class="download"> | ||
| <div class="left"> | ||
| <img src="zip.png" width="64"> | ||
| </div> | ||
| <div class="right"> | ||
| <h3>Download Source</h3> | ||
| <p>You can <a href="http://github.com/OscarGodson/pdxslide">fork on github</a> or download | ||
| it <a href="pdxslide-1.0.js">directly from here</a>. Code is licensed under the MIT license. | ||
| Feel free to do what you want with it.</p> | ||
| </div> | ||
| <br class="clear"> | ||
| </div> | ||
| <br class="clear"> | ||
| </div> | ||
|
|
||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> | ||
| <script src="js/jquery.pdxslide.js"></script> | ||
|
|
||
| <script> | ||
|
|
||
| $('pre').each(function(){ | ||
| $(this).text($(this).html().toLowerCase()); | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| <script> | ||
| $('#slideshow').pdxslide(); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.