Upload
chalermpon-areepong
View
1.013
Download
0
Tags:
Embed Size (px)
Citation preview
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
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
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/