Vertical Sliding Accordion with jQuery

Vertical Sliding Accordion with jQuery: "

View demo Download source
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.
The beautiful portrait photography is by Images by Alan Turkus. Check out his Flickr Photostream. The images are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.
We also use the jQuery Mousewheel Plugin by Brandon Aaron which allows us to navigate through the accordion using the mouse wheel.
The options for this plugin allow to customize the height and width, the number of slices visible, the height of an expanded slice and others. Let’s first see some examples before we explain each option.

Examples

Take a look at all the examples (you can also navigate from them to all the other demos):

• 3 visible slices / Default
• With easing
• 5 visible Slices and higher transparency
• 2 visible slices and slower animation
• Fullscreen example

For the HTML structure we have the accordion container, the navigation spans and the wrapper with the slices:

<div id="va-accordion" class="va-container">
<div class="va-nav">
<span class="va-nav-prev">Previous</span>
<span class="va-nav-next">Next</span>
</div>
<div class="va-wrapper">
<div class="va-slice va-slice-1">
<h3 class="va-title">Marketing</h3>
<div class="va-content">
<p>Henry Watson</p>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="va-slice va-slice-2">
...
</div>
</div>
</div>

We give each slice a different class to define a background image for them. In the last fullscreen example we have color classes to assign a different background color to each slice.
Let’s take a look at the example with just 2 slices and a slower animation speed:

$('#va-accordion').vaccordion({
expandedHeight : 350,
animSpeed  : 400,
animOpacity  : 0.7,
visibleSlices : 2
});

The following options are available:

// the accordion's width
accordionW  : 1000,
// the accordion's height
accordionH  : 450,
// number of visible slices
visibleSlices : 3,
// the height of a opened slice
// should not be more than accordionH
expandedHeight : 350,
// speed when opening / closing a slice
animSpeed  : 250,
// easing when opening / closing a slice
animEasing  : 'jswing',
// opacity value for the collapsed slices
animOpacity  : 0.2,
// time to fade in the slice's content
contentAnimSpeed: 900,
// if this is set to false,
// we collapse any opened slice
// before sliding
savePositions : true

If you, for example, would like to show a slice fully on expansion, using the whole height of the accordion container, then you set the expandedHeight to the same value like the accordionH (the height of the accordion). In our last example we used the full window width and height and also adjusted some style (see inline style in the example) in order to remove any margins:

$('#va-accordion').vaccordion({
accordionW  : $(window).width(),
accordionH  : $(window).height(),
visibleSlices : 5,
expandedHeight : 450,
animOpacity  : 0.1,
contentAnimSpeed: 100
});

We hope you like this accordion and find it useful!
View demo Download source

Share and Enjoy:

"

Content Rotator with jQuery

Content Rotator with jQuery: "

View demo Download source
Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides.
The beautiful images are by Andrey & Lili. The images are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.
We also use the jQuery Mousewheel Plugin by Brandon Aaron and the jScrollPane Plugin by Kevin Luck.

Examples

We have two examples, one with autoplay and one without:

• Example with autoplay
• Example without autoplay

For the HTML structure we will have a main container, the content wrapper and the container for the thumbs. Each cr-content-container needs an ID assigned which we will reference in each thumb with data-content:

<div class="cr-container" id="cr-container">
<div class="cr-content-wrapper" id="cr-content-wrapper">
<div class="cr-content-container" id="content-1" style="display:block;">
<img src="images/1.jpg"class="cr-img"/>
<div class="cr-content">
<div class="cr-content-headline">
<h2>The slide title</h2>
<h3>
<span>Some sub-title</span>
<a href="#" class="cr-more-link"> read more →</a>
</h3>
</div>
<div class="cr-content-text">
<p>Some text here...</p>
</div>
</div><!-- cr-content -->
</div><!-- cr-content-container -->
<div class="cr-content-container" id="content-2">
...
</div><!-- cr-content-container -->
...
</div><!-- cr-content-wrapper -->
<div class="cr-thumbs">
<div data-content="content-1" class="cr-selected">
<img src="images/thumbs/1.jpg"/>
<h4>The slide title</h4>
</div>
<div data-content="content-2">
<img src="images/thumbs/2.jpg"/>
<h4>Another slide title</h4>
</div>
...
</div><!-- cr-thumbs -->
</div><!-- cr-container -->

The default options are the following:

$('#cr-container').crotator({
// slideshow on
autoplay    : false,
// slideshow interval
slideshow_interval  : 3000,
// if true the thumbs will be shown initially
openThumbs   : true,
// speed that the thumbs are shown / hidden
toggleThumbsSpeed : 300
});

We hope you like this little content rotator and find it useful!
View demo Download source

Share and Enjoy:

"