> > jQuery

jQuery


12 2011, 12:10. : Design FactoRy
, jQuery. , . , , .

   jQuery

, , (Andrey & Lili). Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.

jQuery- Mousewheel (Brandon Aaron), jScrollPane (Kevin Luck).



: , :

*
*

HTML-, , . cr-content-container ID, 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 &#8594;</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 -->


:

$('#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
});


, !

|
! .