Greatfriends V-Talk Zubzib # 5Greatfriends V-Talk Zubzib # 5

jQuery ShowcasejQuery ShowcaseUsing jQuery in ASP.NET web pageUsing jQuery in ASP.NET web page

by

Narin Chaipredanan (firefly)July 31, 2010

jQuery Showcase

Coin Slider (jQuery plug-ins) Nivo Slider (jQuery plug-ins) Bottom slide out menu (jQuery)

Coin Slider

Owned by Ivan Lazarevic jQuery Image Slider with Unique Effects (jQuery

Plug-Ins)− Displaying image as slideshow with many

transitions effects.− Slice image in squares.

URL: http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/

Coin Slider: Features

Unique transition effects Compatible with IE6+, FF2+, Safari 2+, Google

Chrome 3+, Opera 9+ Lightweight (8kb only) Flexible configuration Fully customizable using CSS Free to use under MIT licence

Coin Slider: Usage

Include the jQuery, Coin Slider javascript and CSS file on the page:

<script src="clientscripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="clientscripts/coin-slider.min.js" type="text/javascript"></script> <link href="clientscripts/coin-slider-styles.css" rel="stylesheet" type="text/css" />

Writing javascript: <script language="javascript" type="text/javascript"> $(document).ready(function() { $('#img-slider').coinslider({width: 500, height: 333, delay: 4500}); }); </script>

Coin Slider: Usage (cont.)

The Markup:<div id="img-slider" style="width: 500px; float:left;">

<a href="#"><img src="images/flowers/flower_0001.jpg" /><span><b>ดอกบัว</b> (Lotus)</span>

</a>..........<a href="#">

<img src="images/flowers/flower_0019.jpg" /><span><b>ดาวเรือง</b> (Marigold)</span>

</a></div>

Coin Slider: Options

width (width of slider panel) height (height of slider panel) spw (squares per width) sph (squares per height) delay (delay between images in ms.) sDelay (delay between squares in ms.) opacity (opacity of titleand navigation)

Coin Slider: Options (cont.)

titleSpeed (speed of title appereance in ms.) effect (transition effects: random, swirl, rain,

straight) navition link (indicate that show image as links or not) hoverPause

Coin Slider: Showcase

Nivo Slider

Owned by Gilbert Pellegrom (Dev7studios) jQuery Image Slider (jQuery Plug-Ins) Current version: 2.0 URL: http://nivo.dev7studios.com

Nivo Slider: Features

9 unique transition effects Browser support: IE7+, FF3+, Google Chrome 4,

Safari 4, Opera10.5 Built-in directional and control navigation Support keyboard navigation Lightweigh (packed version only 7kb) Free to use under MIT licence

Nivo Slider: Usage

Include the jQuery, Nivo Slider javascript and CSS file on the page:

<script src="clientscripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="clientscripts/jquery.nivo.slider.js" type="text/javascript"></script> <link href="clientscripts/nivo-slider.css" rel="stylesheet" type="text/css" />

Writing javascript: <script language="javascript" type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>

Nivo Slider: Usage (cont.)

The Markup: <div id="slider" style="width: 500px;">

<img src="images/animal_001.jpg" alt="Camel" title="<div class='textDescriptionTitle'>อูฐ</div><div class='textDescription'>(ภาษาอังกฤษ: camel ภาษาอาหรับ: ญะมัล)<br />อูฐมีถ่ินกำาเนิดในอเมริกาเหนือ ยุคเทอเทียร่ีในยุคนั้นมีขนาดเทา่กับกระต่ายและมี 4 นิ้วเทา้ ปัจจุบันสัตว์ในตระกูลอูฐไดถู้กนำามาเลี้ยงเป็นสัตว์เศรษฐกิจในบาง ประเทศ แตใ่ช้ประโยชน์ในดา้นต่าง ๆ ได้แก่ เป็นอาหาร ตัดขน รีดนม และใช้เนื้อเพ่ือบริโภค</div>" />

.....

..... <img src="images/animal_028.jpg" alt="Eagle" />

</div>

Nivo Slider: Options

effect

slices

animSpeed

pauseTime

startSlide

directionNav

directionNavHide

controlNav

controlNavThumbs

controlNavThumbsFromRel

controlNavThumbsSearch

controlNavThumbsReplace

keyboardNav

pauseOnHover

manualAdvance

captionOpacity

beforeChange: function()

afterChange: function()

slideshowEnd: function()

Nivo Slider: Effects

slideDown slideDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft fold

fade random

Nivo Slider: Showcase

Bottom Slide Out Menu

Bottom Slide Out Menu: Showcase

Thumbnails Navigation Gallery

Thumbnails Navigation Gallery: Showcase

Related Links

Coin Slider – jQuery Image Slider Plug-In: http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/

Nivo Slider – jQuery Image Slider Plug-In: http://nivo.dev7studios.com

jQuery Bottom Slide Out Menu: http://tympanus.net/codrops/2010/03/09/a-fresh-bottom-slide-out-menu-with-jquery/

THANK YOU!THANK YOU!