Урок 3.3 - Создание слайдшоу (slideshow) и jQuery-каруселей. Часть 1

******** ***** ********* *** ******* ******** ********, ******* ******* ****. *****, ********* ** ******* * ********* ******, ***** *********, ********* ***, * ******* ***** *** **** *************, ***********, ****** * ******.  *** ***** ***** ******* ********** ****, *********** *********** ******** *** ****** * ***** *****.

** ****** *** ******* ****** CSSi, * ******* **** ** ******* ******* **** **************, ******** ******** *****. ** * ********* *********** ******* ** ******* ******* ***** ******** ******* ***************** *****, ******** ** ***** ******, ** *** **. ******* ****** * *******.

****** ******* *********** *** ****** * ******* .gif ***********, ******* ************ ********* *********** * *****, *** flash-*******. ********** ****** ******* ****** * ** ****** ***** ******** ********* *** * flash-********. ****** * flash, ******** ** *** *******, **** **** **** **********, ******** ** ***** ***** ********** ******** *** ***** ***********.

***** **** ******* ****** * * ******* javascript, ** *** ******** *** ****** ******* * ********* ****** ***** *****. * ********** **********-javascript  jQuery *** ***** ****** ******* ***** * *******, ** * javascript ***** ***** *************.

* *** **** **************** ****, ******* ** ********* ******:

*** ****** * ********* ******* ********* ******, **** ** ******* **** * ********.

******* **** ***** **** .info * ***** ***** ******** ********:

regions[content] = Content
regions[right] = Right sidebar
regions[left] = Left sidebar
regions[footer] = Footer

 

******* **** ****** *** *******:

regions[topbanner] = Top banner

****** *** ********* ******* ***** ****** ****** ** *****. **** *** ******* ******* ***** ***********, ** ***** ******* ******** ***** Views_slideshow. ********** **** ****** * *** ********* Views Slideshow: SingleFrame * Views Slideshow: ThumbnailHover. *** ** ********* *********** ****** Views,  * ***** ** * *** *** **********.

Views Slideshow: SingleFrame - ********* *****-*** * ***** *****.

Views Slideshow: ThumbnailHover - *****-*** * **** ** ****-********** *** ******** ******* ******

******** ***** ***, * **** Tags ***** ********* slideshow:

****** ***** ******** **** (fields) *** ***********, * ******* *** **********, *** ********* * **********,  ** ****** ******** ******* (title) ****, **** (body) ****.

* ******** ***** ********: ********: ***********, *** ********* = ********* (**** *** *** ********* Page, Story *** ***** ****** ********* *****).

********** (Sort criteria) ***** ********* ** Node: Post date = Descending.

******** ******* * *****.

* Basic settings ********** ******** ********* Style: slideshow. ***** ***** ******** **** ********* ********. **** ** *********, ** ******* "********" ***** **** style:slideshow.

********* *****-*** *********, *** Slideshow mode: SingleFrame
Timer delay: ***** * ************ ***** ************* *******;
Initial slide delay offset: ***** * ************ ** ******* ************;
Speed: ******** * ******* ****** ********;
Controls: ********* ************* *******;
Pager: ******** ************* *******;
Image Counter: ********** ***** ** ***** ***** ************;
Items per slide: ******* ******* ************ ************;
Effect: ****** * ******* ********** *****;

*** ********, *** * ******, ********* ********* ******** **** *** ***********.

********* *****-*** *********, *** Slideshow mode: ThumbnailHover
Main frame fields: **** ******* ************ * ******;
Breakout fields: **** ******* ************ * **** *****-***. ***** ******** ********** *** *****-*** * ******** ******** *******, ***** ***** ******* ***** **** ** ********* **********;
 

********* ********* ***** ** *** * * Slideshow mode: SingleFrame.

********* *** * **** ** ******* display - block, ** ******* * ******* ********* ****** ******.

*** ********* ******** **** ******* ********** ********** CSS ****, ***** style.css ***** ****, ** *** ********* ****** ************** * * ************ * ********** ******** ******.

* ********* ****** ***** ** ******* ****** * **** ***********, Query-****** ***  ************** ******* * jQuery-********.

‹ Drupal *********. ****** ****** ********** ****** Webform ***** ******** ******** (slideshow) * jQuery-*********. ***** 2 ›