2010 December

ABOUT

I use s3slider plugin for jQuery for a month in my site.since i am just learning javascript,writing a new plugin instead would be a nice training,so i write this slider plugin for jQuery.

HOW TO USE

step1:,download zxdSlider plugin,include jQuery and zxdSlider javascript file in the page.something like

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="/js/zxdslider.js" type="text/javascript"><!--mce:1--></script>

step2:html structure like
<div id="zxdslider"> 
  <span class="slidernav leftnav left">&lt;</span>
  <ul id="zxdsliderContent">
    <li class="zxdsliderli"> <img src="/demo/zxdslider/img/a1.jpg" alt="a1" /> <span>
      <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="jQuery is sweet!">jQuery is sweet!</a></h2>
      <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
      </span> </li>
    <li class="zxdsliderli"> <img src="/demo/zxdslider/img/a2.jpg" alt="a2" /> <span>
      <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is small!">jQuery is sweet!</a></h2>
      <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
      </span> </li>
    <li class="zxdsliderli"> <img src="/demo/zxdslider/img/a3.jpg" alt="a3" /> <span>
      <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is easy to use!">jQuery is sweet!</a></h2>
      <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
      </span> </li>
    <li class="zxdsliderli"> <img src="/demo/zxdslider/img/a4.jpg" alt="a4" /> <span>
      <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is ?!">jQuery is sweet!</a></h2>
      <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
      </span> </li>
  </ul>
  <span class="slidernav rightnav right">&gt;</span> 
</div>
<!-- #zxdslider-->

step3:css
#zxdslider {
        width: 960px;
        height: 262px;
        position: relative;
        overflow: hidden;
        background:#555;
        margin:10px 0px 25px 0px;
        padding:0;
}
#sliderContent {
        width: 880px;/*its width= #zxdslider's width - .slidernav's width*/
        padding:0;
        margin:0;
}
.zxdsliderli{
        float: left;//must have this
        position: relative;
        display: none;/*must have this*/
        width:880px;/*its width= #zxdslider's width - .slidernav's width*/
        height:262px;
}
.zxdsliderli span {
        position:absolute;/*must have this*/
        right:0;
        font: 13px Arial, Helvetica, sans-serif;
        width:370px;
        color: #ddd;
        display: none;/*must have this*/
        top: 0;
        padding: 10px 13px;
        margin:0 40px 0 0;
}
.zxdsliderli img{
        margin:6px;
}
.zxdsliderli a{
        color:#fff;
}
#zxdslider h2 {
        line-height: 40px;
}
#zxdslider h2 a {
        color: #ddd;
}
.slidernav{
        height:262px;
        width:40px;
        font-size:38px;
        color:transparent;
        line-height:250px;
}
.slidernav:hover{
        cursor:pointer;
}
.rightnav{
        text-align:right;
}
.left{float:left}/*must have this*/
.right{float:right}/*must have this*/

step4:add this javascript which fires the engine!
<script type='text/javascript'>
$(function($) {
        $("#zxdslider").zxdSlider();
})
</script>

check the zxdslider demo page,you can read more detail from the html souce code.

COPY RIGHT

This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones.

BROWSER SUPPORT

as far as i know,it works fine in
ie6,
ie7,
ie8,
ie9,
firefox,
chome,
safari…

KNOWN PROBLEM

there is a bug in Jquery 1.5.0 which will cause slider fail to work,so just avoid using Jquery 1.5.0 if you want to use this plugin
not jquery’s bug.in version 1.1,it is fixed.

UPDATE

ver 1.1 it works fine with jquery 1.5.0 now.thanks to fudge@stackoverflow

DOWNLOAD

1.0

zxdSlider plugin,zipped,you should unzip it yourself

1.1

zxdSlider plugin,zipped,you should unzip it yourself

share to»

if you are using a static page as homepage, and try to show many post in this page,you use code like

                &lt;?php
                        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                        $args = array(
                                'posts_per_page' =&gt; 10,
                                'paged' =&gt; $paged,
                        );
                        query_posts($args);?&gt;

to get pagination work,but it do not work,i searched a lot ,eventrually find the answer.
just use
get_query_var('page')

instead,i do not know why,but it will work.

share to»

不支持ie6,用现代浏览器吧。 firefox, google chrome, opera, safari 等,或请升级到 更高版本的Internet Explorer

you see this because you are using ie6,which is old ,ugly,and not supported by this site,try get a modern browser!
firefox, google chrome, opera, safari , or upgrade to Internet Explorer 8+