Coda slider 1.1.1 - Enhanced
I was in search for a "slider" which could present both content and images. Found nothing, that is that worked in most browsers.
I was looking at Poppolls Playground and liked the feature, but that slider do not operate well with the slightly fecked up browser IE (surprized ?). So my quest for a slider that was more cross browser continued.
I stumbled upon Niall Doherty's website and fell in love with that little script. So far I have only tried it in Firefox, but I do think it's working in IE aswell (don't have IE installed) if anyone have any other browser please confirm if it's in fact working (test link: fagereke.se).
Now, this one made me search even more, and after going deeper into Niall Doherty's website I found a link to what seems to be an enhancement of the script.
and now I have. I found this site which takes up on the possible "flaws" with the Coda Slider 1.1.1. This is nothing I claim to have discovered or even pointed out, but never the less this version works even better as I see it. See example below:
How to
Follow these simple steps by either clicking the right navigational arrow, or use tabs above.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Download
Ok. Now lets see if I can show you how I accomplished this. First off you need to download the JQuery library. Then you need to download these four JavaScripts:
- jquery.scrollTo-1.4.1-min.js
- jquery.localscroll-1.2.7-min.js
- jquery.serialScroll-1.2.1-min.js
- coda-slider.js
And these images: scroll_left.png, scroll_left.png
Install
Now the first thing you do is to upload these to your js folder (or wherever you keep your scripts) and link them in your head tag:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script src="js/jquery.scrollTo-1.4.1-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.serialScroll-1.2.1-min.js" type="text/javascript"></script>
<script src="js/coda-slider.js" type="text/javascript"></script>
Editing
When this is done you need to edit the coda-slider.js to show the left and right arrows . This you do on lines 28-29, just add the correct path to the images.
CSS
There, now you're ready for some magic. This will however demand some basic knowledge of CSS and XHTML in order for you to make it appear as you want it. This will not be supported by me in anyway.
The css used in this example is this one:
#slider {width:500px;margin:0 0 0 0;position:relative;}
.scroll {height:280px;width:480px;position:relative;clear:left;background:#FFFFFF;}
.scrollContainer div.panel {padding:20px;height:230px;width:480px;overflow:auto;border:0px solid#eee;}
ul.navigation {list-style:none;margin:0;padding:0 0 9px 30px;}
ul.navigation li {display:inline;margin:0 5px 0 0;}
ul.navigation a {padding:3px 10px 3px 10px;text-decoration:none;color:#999;background-color:#eee;}
ul.navigation a:hover {background-color:#88ac4a;color:#fff;}
ul.navigation a.selected {background-color:#88ac4a;color:#fff;}
ul.navigation a:focus {outline:none;}
.scrollButtons {position:absolute;top:5px;cursor:pointer;}
.scrollButtons.left {left:-20px;}
.scrollButtons.right {right:-20px;}
.hide {display:none;}
HTML
And the actual code in this article (minus the content of course) is this one below. I hope you found this interesting, and that it will work out just dandy for you.
<div id="slider">
<ul class="navigation">
<li><a href="#how">How to</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#install">Install</a></li>
<li><a href="#editing">Editing</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#coda">Coda</a></li>
</ul>
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="how">
<h2>How to</h2>
<p>content</p>
</div>
<div class="panel" id="download">
<h2>Download</h2>
<p>content</p>
</div>
<div class="panel" id="install">
<h2>Install</h2>
<p>content</p>
</div>
<div class="panel" id="editing">
<h2>Editing</h2>
<p>content</p>
</div>
<div class="panel" id="css">
<h2>CSS</h2>
<p>content</p>
</div>
<div class="panel" id="html">
<h2>HTML</h2>
<p>content</p>
</div>
</div>
</div>
</div>
Comments
Damn, that is a pretty delicious slider Patric. Now, how to implement it cleanly within sNews? Hmmm, now that may take some considerable effort, as everyone's use of it would likely be different?
I personally like the way you've shown it here, perhaps this could be used to show multiple "pages" for an article, i.e. create a second break type tag, something like [pagebreak] for each content box?
Damn jury duty is killing me, two weeks now! Gotta go back yet again tomorrow :/
Write a comment
* = required field
Notes
Most downloaded sNews templates
11405 templates downloaded in total.And the 6 most popular is: counter re-set 09-11-20
Website 4 U
I'am at your service. I will produce a CSS/XHTML valid site based upon sNews CMS, a single file, SEO optimized, content managment system. And Joomla, another free CMS.
Advertising
Advertising on p-ahlqvist.com is cheap. If you want to place an ad with me, please contact me for a free consultation.
Rock Band
You're in a local Rock Band in my region. Please contact me if you want free online exposure. You will get visible to many people, and possibly this will lead to something.
sasha 23.04.2009. 05:06
You can use this slider for gallery just top of menu change to no# and you going to have nice small gallery :)