Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/etianen/jquery-showcase
A snazzy little showcase widget, built using jQuery.
https://github.com/etianen/jquery-showcase
Last synced: 25 days ago
JSON representation
A snazzy little showcase widget, built using jQuery.
- Host: GitHub
- URL: https://github.com/etianen/jquery-showcase
- Owner: etianen
- Created: 2011-09-18T17:41:08.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2011-10-03T14:53:39.000Z (about 13 years ago)
- Last Synced: 2023-04-09T06:56:47.953Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://etianen.github.com/jquery-showcase/
- Size: 234 KB
- Stars: 5
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
jQuery Showcase
===============
A snazzy little showcase widget, built using jQuery.
Getting started
---------------
Download the plugin, and copy the `src/showcase` folder into your web root.
Add the following code to the `` of your document:
```html
```
You can then place the showcase markup anywhere in your page.
```html
-
News
Slide 1 title goes here
-
News
Slide 2 title goes here
-
News
Slide 3 title goes here
-
News
Slide 4 title goes here
$("#showcase").showcase();
```
What if I want to use XHTML?
----------------------------
Then you're behind the times! Don't worry, there's still an alternative embed code you can use.
```html
-
News
Slide 1 title goes here
-
News
Slide 1 title goes here
-
News
Slide 1 title goes here
-
News
Slide 1 title goes here
$("#showcase").showcase({
headerSelector: "> div",
titleSelector: "> div > div.title",
subtitleSelector: "> div > div.subtitle",
imageSelector: "> img"
});
```
Configuration options
---------------------
You can control the behaviour of the plugin with the following options.
* **autoPlay:** If true, then the slides will start playing when the page has loaded (default `true`).
* **duration:** The time to spend on each slide before changing to the next (default `5000`).
You can control how the plugin interprets the markup of the embed code using the following options.
* **slideSelector:** `"ul > li"`
* **headerSelector:** `"> article > hgroup"`
* **titleSelector:** `"> article > hgroup > h1"`
* **subTitleSelector:** `"> article > hgroup > h2"`
* **imageSelector:** `"> article > img"`
The two example embed codes above already contain the correct markup selectors, so these options are really only for advanced useage.
More information
----------------
This project was developed by Dave Hall. You can get the code from the
[jquery-showcase project site][].
[jquery-showcase project site]: http://github.com/etianen/jquery-showcase
"jquery-showcase on GitHub"
Dave Hall is a freelance web developer, based in Cambridge, UK. You can usually
find him on the Internet in a number of different places:
* [Website](http://www.etianen.com/ "Dave Hall's homepage")
* [Blog](http://www.etianen.com/blog/developers/ "Dave Hall's blog")
* [Twitter](http://twitter.com/etianen "Dave Hall on Twitter")
* [Google Profile](http://www.google.com/profiles/david.etianen "Dave Hall's Google profile")