jQuery Simple Slider

jQuery Simple Slider allows you to quickly create a slide show feature from a simple list UL/LI :

1
2
3
4
5

< ul >
"Title 1" >< img title = "Subtitle 1" src = "image1.jpg" / >< / li > < them title = "Title 1"> < img title = "Subtitle 1" src = "image1.jpg" /> </ them >
"Title 2" >< img title = "Subtitle 2" src = "image2.jpg" / >< / li > < them title = "Title 2"> < img title = "Subtitle 2" src = "image2.jpg" /> </ them >
li > < will > ... </ them >
</ ul >

Any links, image, or sottotiolo, can be entered without any problems:

1
2
3
4
5

< ul >
"Title 1" >< a href = "#" >< img border = "0" title = "Subtitle 1" src = "image1.jpg" / >< / a >< / li > < them title = "Title 1"> < a href = "#"> < img border = "0" title = "Subtitle 1" src = "image1.jpg" /> </ a > </ them >
"Title 2" >< img title = "Subtitle 2 with a <a href='#'> link < / a > " src="image2.jpg" /> < / li > < them title = "Title 2"> < img title = "Subtitle 2 with <a href='#'> link </ a > "src =" image2.jpg "/> </ them >
li > < will > ... </ them >
</ ul >

Utilization

You can download the latest version directly from the repository on Google Code :

1
2
3

"text/javascript" src = "http://www.google.com/jsapi" >< / script > < script type = "text / javascript" src = "http://www.google.com/jsapi"> </ script >
"text/javascript" > google.load("jquery", "1.3") < / script > < script type = "text / javascript"> google.load ("jquery", "1.3") </ script >

Once the page is loaded:

1
2
3
4
5
6
7

"text/javascript" > < script type = "text / javascript">
google.setOnLoadCallback (
function () {
$ ('Ul # myslider'). SimpleSlider ();
}
);
</ script >

Options

You can pass a set of parameters to the method simpleSlider ():

1
2
3
4
5
6
7
8

'0.7' ) , Caption alpha opacity (default '0 .7 '),
'#000' ) Caption bgColor the background color (defaults to '# 000')
, 'normal' , 'fast' or number of milliseconds ) default 'slow' bgSpeed Background image fade speed ('slow', 'normal', 'fast' or number of milliseconds) default 'slow'
'slow' , 'normal' , 'fast' or number of milliseconds ) default 'slow' Caption captionSpeed slideUp / slideDown speed ('slow', 'normal', 'fast' or number of milliseconds) default 'slow'
'50px' ) Caption height height (default '50px ')
CSS Object titleStyle for title
CSS Object subtitleStyle for subtitle
4000 ) timeOut Milliseconds Between slide interval (default 4000)

Resources

10 comments to "jQuery Simple Slider"

January 30, 2009 camu :
Very interesting, the only thing I perplime is the accessibility of these tools. In other words, it messes around with Javascript disabled, and the use of position: absolute makes it difficult to manage the layout when the user enlarges the text on the page (ctrl +). How to solve these problems? Thanks
Reply Quote
January 30, 2009 Giovambattista Fazioli :
@ Camu: a great question! The question, in fact, is quite wide. Put simply, trying to answer your question, we can divide the problem into two parts: Javascript is active and liquid layout.
Tools such as the one proposed by me necessarily depart from the assumption that Javascript is on and is properly loaded in the jQuery library. However, as in the case presented here, this type of script performs a runtime change to a pre-existing HTML, and often quite readable even without applying the script. This technique, known as the unobtrusive JavaScript (Unobtrusive Javascript), has as its main aim is to improve a page, which is already functioning and readable, performing additions only if JavaScript is enabled. However there is no real dividing line between a JavaScript "intrusive" and a "non-intrusive." For example, the Plugin I have presented could be considered semi-intrusive.
On the more distinctly dedicated to accessibility, such as the ability to enlarge the font, things are further complicated because it calls into play the bitmap used to build pages that usually do not suffer layoffs as fonts. To overcome the obstacle you must create a special graphics style sheets packaged well and use a variety of techniques (some of which require Javascript active) to "fix" a layout of this type at runtime.
But let's underline that some browsers have recently added internal capabilities, accessibility, to overcome some obstacles related to the current standard CSS and HTML. For example, you can "zoom in" not just the font, but the whole page, doing a real "optical zoom", allowing the entire layput to be still visible in the correct way (the bitmaps may appear a bit 'grainy) .
I believe that such matters should be an integral part of the "core" of a browser so developers may be removed from this type of problem.
Reply Quote
January 30, 2009 camu :
Wow, that's a rispostona Thanks for being so detailed ... I proceeded to take notes!
Reply Quote
January 31, 2009 Santino Bivacqua :
Hello, great script, ... and above all degradable.
I was wondering one thing, but it is possible to decide how much each slide devvo be the duration?
I mean, maybe some pictures are just titles, only 4 seconds and then the next, but if the image has a lot of text to be read should be at least 8 / 10 seconds ...
It would be useful, for example, indicating the duration of the image itself, such as a nice [... Lost ... ]
What do you think?
Reply Quote
January 31, 2009 Giovambattista Fazioli :
@ Santino Bivacqua:
for each slide decide how devvo be the duration
I think I understand what you mean, although it has lost some of your comments ... and it seems a good idea. You could add an attribute, for example in a field rel or custom (see hours) and, if present, to decide individually for between one and another slide.
As soon as I can I will update and I will quote you for the excellent advice. Thanks
Reply Quote
January 31, 2009 Santino Bivacqua :
Oops sorry, I put the tag img and I have not noticed ....
Thank you very much, however my idea was to insert the amount in the rel attribute of the image
for example:
o ancora rel="4" rel="speed[4]" or simply rel="speed-4" , or rel="4"
would be more 'convenient, especially when using a template engine and show slides from database, it would also create JavaScript uncomfortable, but not impossible
Reply Quote
January 31, 2009 Giovambattista Fazioli :
@ Santino Bivacqua: in fact, exactly what I thought
Reply Quote
February 2, 2009 jQuery Simple Slider 1.1.0 | Undolog.com :
[...] Inspired by the suggestion that Santino Bivacqua I plugged in jQuery Simple Slider can set a timeout for each slide [...]
April 8th, 2009 @ g Briele:
You can place links to get the slides back and forth without having to wait the time out?
Reply Quote
April 8, 2009 Giovambattista Fazioli :
@ G @ Briele No, this features in this release has not been scheduled.
Reply Quote

Name

Website

XHTML TAG PERMIT:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

INSERTION CODE:

 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL

Undolog.com