1. Thomas Schommler

    image
    Geboren in Hamburg,
    wohnhaft mittlerweile am Niederrhein.
    Ich bin leidenschaftlicher Hobbyfotograf und
    widme meine Freizeit ganz dem Thema Fotografie.

  2. Tiere

    image
    Tiere, egal welcher Gattung, dienen immer für die besonderen Aufnahmen.
    Möchten Sie Ihr Tier auch fotografiert haben, so wenden Sie sich gerne an mich.

  3. Natur-Fotografie

    image
    Die Natur hat so viel schönes zu bieten, warum nicht einmal mit offenen
    Augen durch den Wald und die Wiese spazieren gehen ?

  4. Konzert-Fotografie

    image
    Ob ein Solist, ein Duo, ein Trio oder eine ganze Band.
    Gute Bilder, ob als Cover oder als Erinnerung an wunderschöne Konzerte,
    ich mache sie gerne für Sie.

  5. Freizeit & Sport

    image
    Sportliche Bilder, Männer und Frauen in Aktion, hier sind sie zu sehen.
    Gerne mache ich auch für ganze Mannschaften zur Erinnerung Fotos.

  6. People-Fotografie

    image
    People-, Portrait, Teilakt- oder Dessous, bei mir sind jede Art von Fotos machbar.

  7. Sammelsurium

    image
    In dieser Rubrik finden Sie alle Fotos, die sich so ergeben haben
    oder die in keine andere Kategorie passen. Teilweise sind auch kleine Bildspielereien dabei.








































Download

More details and download here

FAQ

Q. Why is this plugin called 'liteAccordion'?
A. It is called liteAccordion because the raw JavaScript source only weighs a (heavily commented!) 4.7kb, and the themes don't use any background images. If you minify and gzip the JS, you can get the file size down to ~1.4kb!
Q. What can I use it for?
A. Anything you like! Text, images, video - anything you can put in a div, you can put in a slide.
Q. But my page isn't 960px wide...
A. Not a problem. The plugin has a range of options, and I've tried to use relative measurements in the css so that the styles scale.
Q. What themes are available?
A. There are currently two themes available, 'basic' and 'dark', though I plan to add a light theme and a stitch theme based on Orman Clark's stitch theme for SlideDeck in the very near future. If these themes aren't suitable, you can always customise the css :)
Q. Does it work in...
A. It's been tested on the latest versions of Firefox, Chrome, Safari and Opera on both OSX and W7. It has also been tested on IE7, IE8 & IE9 on W7, and IE8 on WinXP. Unfortunately IE6 is not supported - you will need to provide your own css if you plan to support IE6.
Q. Sounds good! Can I use it for commercial projects?
A. liteAccordion is free to use for commercial and personal projects. As long as you're not trying to sell this plugin 'as is', feel free to do with it as you please.

If you find any bugs, please file a ticket on Github and I'll fix it as soon as possible. Thanks!

New in 1.1!

In version 1.1 (released 21/03/2011), a pause on hover function was added to the plugin.

Basic Implementation

1. Include jQuery, the liteAccordion CSS and the liteAccordion JavaScript files in your page:

			<head>
				<link rel="stylesheet" href="liteAccordion.css">
			</head>
			<body>
				... 
				<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
				<script src="liteaccordion.jquery.js"></script>
			</body>

2. Insert the basic liteAccordion markup into your page:

		

		    
    
				
  1. 
				    
    Thomas Schommler
    
				
    2. 
				
  2. 
				    
    Tiere
    
				
    3. 
				
  3. 
				    
    Natur-Fotografie
    
				
    4. 
				
  4. 
				    
    Konzertfotografie
    
				
    5. 
				
  5. 
				    
    Freizeit & Sport
    
				
    6. 
                				
  6. 
				    
    People-Fotografie
    
				
    7. 
                				
  7. 
				    
    Sammelsurium
    
				
    8.

3. Call the plugin

			<script>
				$('#yourdiv').liteAccordion();
			</script>

Basic Example

This is a demonstration of the default implementation above, but with some text content added to the slides.

  1. Slide One

    This is Slide One.

    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. Link somewhere

  2. Slide Two

    This is Slide Two.

    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.
    Link somewhere

  3. Slide Three

    This is Slide Three.

    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. Link somewhere

  4. Slide Four

    This is Slide Four.

    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.
    Link somewhere

  5. Slide Five

    This is Slide Five.

    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. Link somewhere

Options

These are the default settings for the liteAccordion plugin:

			
			containerWidth : 1060, 			// width of accordion (px)
			containerHeight : 320, 			// height of accordion (px)
			headerWidth : 48, 				// width of tabs (px)

			firstSlide : 1, 				// number of the first active slide (integer)
			onActivate : function() {},		// callback function triggered on tab click/mouseover (function)
			slideSpeed : 800,				// speed of slide animation (time/ms)
			slideCallback : function() {},	// callback function triggered after slide animation is complete (function)

			autoPlay : false, 				// automatically scroll through the slides, if true with pause on user click (boolean)
			pauseOnHover : false, 			// *NEW in 1.1* - pause slides on hover
			cycleSpeed : 6000,				// time between slide activation (time/ms)

			theme : 'basic', 				// which theme to use ('basic', 'light'*, 'dark', or 'stitch'*)
			rounded : false,				// whether to use rounded corners or not** (boolean)
			enumerateSlides : false			// show slide number in tab

(* coming soon, **doesn't work in IE)

Simply pass options into the liteAccordion function with an object literal, for example, below is the code for the accordion at the top of the page.

			$('#one').liteAccordion({
				onActivate : function() {
					this.find('figcaption').fadeOut();
				},
				slideCallback : function() {	
					this.find('figcaption').fadeIn();
				},
				autoPlay : true,
				pauseOnHover : true,
				theme : 'dark',
				rounded : true,
				enumerateSlides : true				
			}).find('figcaption:first').show();

Note: the context for the two callback functions is the (jQuery wrapped) slide div (adjacent to the tab trigger).

More Examples

  1. Thomas Schlommler

    image

  2. Tiere

    image

  3. Natur-Fotografie

    image

  4. Konzert-Fotografie

    image

  5. Freizeit & Sport

    image

  6. People-Fotografie

    image

  7. Sammelsurium

    image 
$('#yourdiv').liteAccordion({
	theme : 'dark',
	containerWidth : 600,
	containerHeight : 200,
	slideSpeed : 600,
	firstSlide : 2
});

Licence

The liteAccordion plugin is free for personal and commercial use, providing that the copyright notices are left intact. You may freely include this jQuery plugin in websites, web applications, templates, themes, and other materials intended for sale and/or distribution. You are not permitted to offer this plugin for distribution and/or resale 'as is' without prior consent.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Attribution

The 'dark' theme was inspired by Orman Clark. Thanks Orman! :)

More script and css style : www.htmldrive.net