久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

Create Featured Content Slider Using jQuery UI

 nikybook 2014-03-19

Featured Content Slider using jQuery UI

Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.

There are a few tutorials on creating featured content sliders like the one from CSS-Tricks, but it uses jQuery Coda Slider plugin. Today I’m going to show you how to create a featured content slider for your website using the jQuery UI library.

Let’s start with it..

Add JavaScript Files

First of all, grab the jQuery and jQuery UI libraries, if you havena€?t already and include them in your page header. For this tutorial, youa€?ll need jQuery UI version 1.5.3. I usually use Google AJAX libraries to load jQuery and jQuery UI files as it acts as a CDN for your JavaScript files.

  1. <code><script type="text/javascript" src="http://ajax./ajax/libs/jquery/1.3.2/jquery.min.js" ></script>  
  2. <script type="text/javascript" src="http://ajax./ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>  
  3. </code>  

The Featured Content Structure

Now create a div with its contents as the tabs structured as a list and content corresponding to each tab within a separate div.

  1. <div id="featured" >  
  2.     <ul class="ui-tabs-nav">  
  3.         <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>  
  4.         <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>  
  5.         <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>  
  6.         <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>  
  7.     </ul>  
  8.     <!-- First Content -->  
  9.     <div id="fragment-1" class="ui-tabs-panel" style="">  
  10.         <img src="images/image1.jpg" alt="" />  
  11.         <div class="info" >  
  12.         <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>  
  13.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>  
  14.         </div>  
  15.     </div>  
  16.     <!-- Second Content -->  
  17.     <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">  
  18.         <img src="images/image2.jpg" alt="" />  
  19.         <div class="info" >  
  20.         <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>  
  21.         <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>  
  22.         </div>  
  23.     </div>  
  24.     <!-- Third Content -->  
  25.     <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">  
  26.         <img src="images/image3.jpg" alt="" />  
  27.         <div class="info" >  
  28.         <h2><a href="#" >35 Amazing Logo Designs</a></h2>  
  29.         <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>  
  30.         </div>  
  31.     </div>  
  32.     <!-- Fourth Content -->  
  33.     <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">  
  34.         <img src="images/image4.jpg" alt="" />  
  35.         <div class="info" >  
  36.         <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>  
  37.         <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>  
  38.         </div>  
  39.     </div>  
  40. </div>  

The class names ui-tabs-selected and ui-tabs-hide should not be changed, you can change other class names to your own.

The CSS Styles

Now for the CSS part, I fixed the width and height of the outer container div with id #featured and added a right padding of 250px to make space for the absolutely positioned navigation tabs for our featured content slider. Also, i set its position attribute to relative so that i can absolutely position elements inside #featured div relative to it.

  1. #featured{   
  2.     width:400px;   
  3.     padding-right:250px;   
  4.     position:relative;   
  5.     height:250px;  
  6.     background:#fff;  
  7.     border:5px solid #ccc;  
  8. }  

The navigation tabs are absolutely positioned to the right with following styles:

  1. #featured ul.ui-tabs-nav{   
  2.     position:absolute;   
  3.     top:0; left:400px;   
  4.     list-style:none;   
  5.     padding:0; margin:0;   
  6.     width:250px;   
  7. }  
  8. #featured ul.ui-tabs-nav li{   
  9.     padding:1px 0; padding-left:13px;    
  10.     font-size:12px;   
  11.     color:#666;   
  12. }  
  13. #featured ul.ui-tabs-nav li span{   
  14.     font-size:11px; font-family:Verdana;   
  15.     line-height:18px;   
  16. }  

The content panels are given following styles so as to fit them inside featured div container. The ui-tabs-hide class is essential to working of this script as it decides which content panels are hidden and which is displayed.

  1. #featured .ui-tabs-panel{   
  2.     width:400px; height:250px;   
  3.     background:#999; position:relative;  
  4.         overflow:hidden;  
  5. }  
  6. #featured .ui-tabs-hide{   
  7.     display:none;   
  8. }  

And the selected tab is given a background image with a left arrow. Here are the styles for selected tab.

  1. #featured li.ui-tabs-nav-item a{/*On Hover Style*/   
  2.     display:block;   
  3.     height:60px;   
  4.     color:#333;  background:#fff;   
  5.     line-height:20px;  
  6.     outline:none;  
  7. }  
  8. #featured li.ui-tabs-nav-item a:hover{   
  9.     background:#f2f2f2;   
  10. }  
  11. #featured li.ui-tabs-selected{ /*Selected tab style*/  
  12.     background:url('images/selected-item.gif') top left no-repeat;    
  13. }  
  14. #featured ul.ui-tabs-nav li.ui-tabs-selected a{   
  15.     background:#ccc;   
  16. }  

Since i used small thumbnail images in the navigation tabs, i applied following styles to them.

  1. #featured ul.ui-tabs-nav li img{   
  2.     float:left; margin:2px 5px;   
  3.     background:#fff;   
  4.     padding:2px;   
  5.     border:1px solid #eee;  
  6. }  

Also, in the content panel which is displayed, it has one image of size 400px x 250px and some relavent title and description inside the div with class info. To display .info div over the image i absolutely positioned it over the image with a transparent background to add some eye-candy.

  1. #featured .ui-tabs-panel .info{   
  2.     position:absolute;   
  3.     top:180px; left:0;   
  4.     height:70px; width: 400px;  
  5.     background: url('images/transparent-bg.png');   
  6. }  
  7. #featured .info h2{   
  8.     font-size:18px; font-family:Georgia, serif;   
  9.     color:#fff; padding:5px; margin:0;  
  10.     overflow:hidden;   
  11. }  
  12. #featured .info p{   
  13.     margin:0 5px;   
  14.     font-family:Verdana; font-size:11px;   
  15.     line-height:15px; color:#f0f0f0;  
  16. }  
  17. #featured .info a{   
  18.     text-decoration:none;   
  19.     color:#fff;   
  20. }  
  21. #featured .info a:hover{   
  22.     text-decoration:underline;   
  23. }  

Note: All the required styles are within style.css file.

The JavaScript Code

Finally the JavaScript code, that’ll make our featured content slider work. I’m using rotating tabs feature of jQuery UI library that makes the content panels rotate automatically after given time interval.

  1. $(document).ready(function(){  
  2.     $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  
  3. });  

And there you are with a nice looking featured content slider.

View Working Demo or Download the source code and try it.

Update(Aug 20, 2008)

How To Use With Latest version of jQuery UI

1. With jQuery UI version less than 1.9

If you are using the latest jQuery UI version aleady on your website, then do not use the earlier version I am using above, simply change the code as below(Thanks Deni Sri Supriyono for commenting about this):

Just change this line from the JavaScript code:

  1. $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  

to:

  1. $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  

2. jQuery UI Version greater than 1.9

Updated on (Oct 12, 2012)

In the recent jquery UI release, the tabs rotate method has been deprecated and it is now available as a separate plugin for those who need to use it. To get this slider working, you will need to change the code a little bit. First, grab the JqueryUI tabs rotate plugin(jquery-ui-tabs-rotate.js file) created by Christopher McCulloh and add it to the html page containing slider.
Next, in the html code, remove the ui-tabs-selected class from the ui-tabs-nav first list item.

  1. <ul class="ui-tabs-nav">  
  2.     <li class="ui-tabs-nav-item" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>  
  3.     <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>  
  4.     <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>  
  5.     <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>  
  6.               
  7. </ul>  

Finally, add these css styles to styles.css file because now jquery ui adds ui-tabs-active class to the currently active tab instead of ui-tabs-selected.

  1. #featured li.ui-tabs-active{   
  2.     background:url('images/selected-item.gif') top left no-repeat;    
  3. }  
  4. #featured ul.ui-tabs-nav li.ui-tabs-active a{   
  5.     background:#ccc;   
  6. }  

View Demo with jQuery UI 1.9.0 and jQuery 1.8.2

Pausing Slideshow on Hover

Here is a nice solution from Vernon(in comments below) for those who were looking to enable pause on hover for the current slide. Use this piece of JavaScript code instead of above.

  1. $(document).ready(function(){  
  2. $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  
  3. $("#featured").hover(  
  4. function() {  
  5. $("#featured").tabs("rotate",0,true);  
  6. },  
  7. function() {  
  8. $("#featured").tabs("rotate",5000,true);  
  9. }  
  10. );  
  11. });  

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多