Team:USTC-Software/test

From 2013.igem.org

(Difference between revisions)
(Created page with "<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>灰绿色搭配的横向二级导航</title> <style>...")
 
(One intermediate revision not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml"><head>
+
<html class="ui-mobile ui-mobile-rendering wf-abel-n4-active wf-ptsans-n4-active wf-active"><head>  
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
+
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
-
<title>灰绿色搭配的横向二级导航</title>
+
    <title>Diapo | a free jQuery slideshow by Pixedelic</title>  
-
<style>
+
    <meta name="description" content="Diapo a free jQuery slideshow with many effects, transitions, easy to customize, using canvas and mobile ready">
-
body {margin: 0;padding: 0;background: url(/jscss/demoimg/201309/bg_texture.png);font-family:\5B8B\4F53,Arial Narrow,arial,serif; color:#fff;}
+
    <meta name="viewport" content="width=1280"> 
-
a {color: #fff;text-decoration: none;cursor: pointer;cursor: hand;}
+
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
-
a:hover{text-decoration: underline;}
+
    //
-
ul {margin:0;padding:0;list-style:none;}
+
    // Scripts
-
#header {float: left;display: inline;width: 100%;min-width: 980px;padding: 0;margin:0;height:119px;overflow: visible;}
+
    //
-
#dd-navigation {background: url('/jscss/demoimg/201309/nav-bg.png') repeat-x;clear:both; border-top:1px solid #1b1b1b;border-bottom:1px solid #1b1b1b;height: 48px;}
+
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->
-
#nav-strip ul li.nav-item,#nav-strip ul li.nav-item.active ,#nav-strip ul li.nav-item:hover{border-left: 1px solid #373737;border-right: 1px solid #181818;}
+
    <!--[if lt IE 9]>
-
#nav-strip {clear: both; margin: 0 auto;width: 936px;height: 48px;line-height: 28px;position:relative;z-index: 16777265;border-right: solid 1px #373737;border-left: solid 1px #181818;background: url('/jscss/demoimg/201309/nav-li.png') repeat-x;}
+
    <script src="scripts/html5.js"></script>
-
#nav-strip a:hover {text-decoration:none;}
+
    <![endif]-->
-
#nav-strip ul li.nav-item { display: inline;float: left;position:relative;width:115px;height: 48px;text-align:center;}
+
       
-
#nav-strip ul li.nav-item:hover, #nav-strip ul li.nav-item.hover{background: url('/jscss/demoimg/201309/nav-hover.png') repeat-x;}
+
   
-
#nav-strip ul li.nav-item:hover a, #nav-strip ul li.nav-item.hover a{color: #6ebb1f;}
+
   
-
#nav-strip ul li a{ font-weight: bold;color: #FFFFFF;display:block;padding:10px;font-size: 14px;outline:none;}
+
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
-
#nav-strip ul li a .primary-link, #nav-strip ul li.active a .primary-link, #nav-strip ul li.hover a .primary-link{background: url('/jscss/demoimg/201309/sprite-nav.gif') 100% -10px no-repeat transparent;padding-right: 10px;}
+
    //
-
#nav-strip ul li.no-subnav a .primary-link{ background: none;padding-right: 0;}
+
    // Styles
-
#nav-strip ul li .subnav {display: none;position:absolute;top:49px;left: -1px;background:#282828;border-top:1px solid #313131;border-left: 1px solid #333;border-right: 1px solid #333;border-bottom: 1px solid #333;z-index: 16777263;*min-width: 150px;-webkit-box-shadow:0 0px 2px #000;-moz-box-shadow:0 0px 2px #000;box-shadow:0 0px 2px #000;-webkit-border-bottom-left-radius:2px;-webkit-border-bottom-right-radius:2px;-moz-border-bottom-left-radius:2px;-moz-border-bottom-right-radius:2px;border-bottom-left-radius:2px;border-bottom-right-radius:2px;}
+
    //
-
#nav-strip .subnav-inner {float: left;width: 160px;}
+
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->  
-
#nav-strip ul li .subnav ul{margin-bottom: 3px;float: left;width: 160px;margin:0;}
+
   
-
#nav-strip ul li .subnav ul li{display:block;border-bottom:1px solid #333;float:left;height: auto;margin: 0;width: 160px;}
+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
-
#nav-strip ul li .subnav ul li a{font-weight: normal;}
+
<link rel="stylesheet" id="style-css" href="style.css" type="text/css" media="all">  
-
#nav-strip ul li .subnav ul li a,#nav-strip ul li.nav-item:hover .subnav ul li a{font-size: 12px;color: #fff;white-space: nowrap;*white-space: normal; _white-space: nowrap;padding: 5px 24px; text-align:left;height:24px;}
+
<link rel="stylesheet" id="style-css" href="diapo.css" type="text/css" media="all">
-
#nav-strip ul li .subnav ul li a,#nav-strip ul li.nav-item:hover .subnav ul li a {white-space: normal;}
+
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script>  
-
#nav-strip ul li .subnav ul li.active a,#nav-strip ul li .subnav ul li a:hover {background: #0a0a0a url('/jscss/demoimg/201309/arrow.gif') 6px 16px no-repeat; color:#6ebb1f!important; }
+
<script type="text/javascript" src="scripts/jquery.min.js"></script>
-
</style>
+
<!--[if !IE]><!--><script type="text/javascript" src="scripts/jquery.mobile-1.0rc2.customized.min.js"></script><!--<![endif]-->
-
<script src="/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
+
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>  
-
</head>
+
<script type="text/javascript" src="scripts/waypoints.min.js"></script>  
-
<body>
+
<script type="text/javascript" src="scripts/jquery.hoverIntent.minified.js"></script>  
-
<div id="header"></div>
+
<script type="text/javascript" src="scripts/diapo.js"></script>  
-
<div id="dd-navigation">
+
<script type="text/javascript" src="scripts/custom.js"></script><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.0.29/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Abel%7CPT+Sans">  
-
    <div id="nav-strip">
+
-
            <ul>
+
</head>  
-
                <li class="nav-item no-subnav active" id="nav-item_1"><a href="#" target="_blank"><span class="primary-link">首页</span></a></li>
+
<body style="background-position: -597.5px 0px;">
-
                <li class="nav-item" id="nav-item_2"><a href="#" target="_blank"><span class="primary-link">关于我们</span></a>
+
<div id="header_fake">
-
                    <div class="subnav " id="subnav_2" style="display: none;">                     
+
        <header style="position: fixed; top: -100px;">  
-
                      <div class="subnav-inner">
+
            <div class="container_16" id="top">  
-
                        <ul>                      
+
                <h1 id="logo" style="height: 158px;">  
-
                            <li class=""><a href="#" target="_blank">电子商务人才</a></li>
+
                    <a href="#header_fake" title="Diapo">
-
                            <li class=""><a href="#" target="_blank">苏州网站建设</a></li>
+
                         Diapo
-
                            <li class=""><a href="#" target="_blank">苏州网站推广</a></li>
+
                    </a>  
-
                            <li class=""><a href="#" target="_blank">导航条代码</a></li>
+
                </h1><!-- #logo -->  
-
                            <li class=""><a href="#" target="_blank">网络营销外包</a></li>
+
                 <div id="author" style="opacity: 1; display: block;">
-
                            <li class=""><a href="#" target="_blank">苏州网站制作</a></li> 
+
                    <a href="http://themeforest.net/user/pixedelic" target="_blank">
-
                        </ul>                     
+
                        by Pixedelic
-
                      </div>                     
+
                    </a>
-
                  </div>
+
                </div><!-- #author -->
-
              </li>
+
               
-
                <li class="nav-item" id="nav-item_3"><a href="/" target="_blank"><span class="primary-link">产品展示</span></a>
+
                <nav id="main_nav" style="width: 858px;">  
-
                    <div class="subnav " id="subnav_3" style="display: none;">                      
+
                    <div id="social_top">  
-
                      <div class="subnav-inner">
+
                         <div id="social_hide">  
-
                        <ul>                     
+
                            <a href="https://plus.google.com/112839129482064373116/posts" id="google_social" target="_blank" style="right: 86px; opacity: 1;">&nbsp;</a>  
-
                            <li class=""><a href="#" target="_blank">电子商务人才</a></li>
+
                             <a href="http://twitter.com/#!/pixedelic" id="twitter_social" target="_blank" style="right: 43px; opacity: 1;">&nbsp;</a>  
-
                            <li class=""><a href="#" target="_blank">网站建设</a></li>
+
                            <a href="http://www.facebook.com/pages/Consorzio-Creativo/209711855772" id="facebook_social" target="_blank" style="right: 0px; opacity: 1;">&nbsp;</a>  
-
                            <li class=""><a href="#" target="_blank">网站推广</a></li>
+
                        </div>  
-
                            <li class=""><a href="#" target="_blank">导航条代码</a></li>
+
                     </div><!-- #social_top -->  
-
                            <li class=""><a href="#" target="_blank">网络营销外包</a></li>
+
                    <ul>  
-
                            <li class=""><a href="#" target="_blank">网站制作</a></li>  
+
                        <li class="current" style="opacity: 1;">  
-
                         </ul>                     
+
                             <a href="#header_fake">  
-
                      </div>                      
+
                                demo
-
                  </div>
+
                            </a>  
-
              </li>
+
                        </li>
-
                 <li class="nav-item" id="nav-item_4"><a href="/" target="_blank"><span class="primary-link">行业资讯</span></a>
+
                        <li style="opacity: 1;">
-
                    <div class="subnav " id="subnav_4" style="display: none;">                      
+
                        <a href="#introduction">
-
                        <div class="subnav-inner">
+
                            introduction
-
                         <ul>                     
+
                            </a>
-
                            <li class=""><a href="#" target="_blank">网站制作</a></li>                         
+
                        </li>  
-
                             <li class=" "><a href="#" target="_blank">电子商务人才</a></li>
+
                        <li style="opacity: 1;">
-
                          </ul>                     
+
                        <a href="#methods">
-
                      </div>                     
+
                            methods
-
                  </div>
+
                            </a>
-
              </li>
+
                        </li>  
-
                <li class="nav-item" id="nav-item_5"><a href="/" target="_blank"><span class="primary-link">工程案例</span></a>
+
                        <li style="opacity: 1;">  
-
                     <div class="subnav " id="subnav_5" style="display: none;">                      
+
                            <a href="#options">  
-
                        <div class="subnav-inner">
+
                                options
-
                        <ul>                      
+
                            </a>  
-
                            <li class=""><a href="#" target="_blank">网站建设</a></li>
+
                        </li>  
-
                             <li class=""><a href="#" target="_blank">网站推广</a></li>
+
                        <li style="opacity: 1;">  
-
                            <li class=""><a href="#" target="_blank">导航条代码</a></li>
+
                            <a href="#apis">  
-
                            <li class=""><a href="#" target="_blank">网络营销外包</a></li>
+
                                apis
-
                            <li class=""><a href="#" target="_blank">网站制作</a></li>   
+
                            </a>  
-
                        </ul>                     
+
                        </li>  
-
                      </div>                      
+
                        <li style="opacity: 1;">  
-
                  </div>
+
                             <a href="#download">  
-
              </li>
+
                                download
-
              <li class="nav-item no-subnav" id="nav-item_6"><a href="#" target="_blank"><span class="primary-link">源码空间</span></a></li>
+
                            </a>  
-
                <li class="nav-item" id="nav-item_7"><a href="/" target="_blank"><span class="primary-link">联系我们</span></a>
+
                        </li>  
-
                    <div class="subnav" id="subnav_7" style="display: none;">                      
+
                        <li style="opacity: 1;">  
-
                        <div class="subnav-inner">
+
                            <a href="#changelog">  
-
                        <ul>                     
+
                                changelog
-
                             <li class=""><a href="#" target="_blank">导航条代码</a></li>
+
                            </a>  
-
                            <li class=""><a href="#" target="_blank">网络营销外包</a></li>
+
                        </li>  
-
                            <li class=""><a href="#" target="_blank">苏州网站制作</a></li>  
+
                    </ul>  
-
                          </ul>                    
+
                    <div id="nav_border" style="width: 858px;">
-
                      </div>                      
+
                    </div><!-- #nav_border -->
-
                  </div>
+
                </nav>  
-
              </li>                           
+
            </div><!-- .container_16 -->  
-
              <li class="nav-item no-subnav end" id="nav-item_8"><a href="/" target="_blank"><span class="primary-link">客服中心</span></a></li>
+
           
-
        </ul>
+
        </header>
-
      </div>
+
-
    </div>
+
 +
        <div id="yellow_border" style="position: fixed; top: 89px;">
 +
        </div><!-- #yellow_border -->
 +
   
 +
    </div><!-- #header_fake -->
 +
   
 +
 +
    <section class="container_16">
 +
   
 +
    <div id="basic_demo" style="overflow:hidden" class="activeScroll">
 +
            <div class="fit_screen" style="margin-top: 100px; margin-bottom: 100px;">
 +
                <div class="pix_diapo diapostarted">
 +
 +
                    <div data-thumb="images/thumbs/megamind1048.jpg" class="diapocurrent" style="display: block; z-index: 999; margin-left: 0px; margin-top: 0px;"><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <img src="images/slides/megamind1048.jpg">
 +
                        <div class="caption elemHover fromLeft" style="visibility: visible; width: 900px; left: 0px; right: auto;">
 +
                            This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.
 +
                        </div>
 +
                    </div></div>
 +
                   
 +
                    <div data-thumb="images/thumbs/megamind_07.jpg" class="" style="display: none; z-index: 1;"><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <img src="images/slides/megamind_07.jpg">
 +
                        <div class="caption elemHover fromRight" style="bottom: 65px; padding-bottom: 5px; color: rgb(255, 255, 0); text-transform: uppercase; visibility: hidden; width: 900px; left: 0px; right: auto;">
 +
                            Here you can see two captions.
 +
                        </div>
 +
                        <div class="caption elemHover fromLeft" style="padding-top: 5px; visibility: hidden; width: 900px; left: 0px; right: auto;">
 +
                            The first is loaded immediately before than the second one
 +
                        </div>
 +
                    </div></div>
 +
                   
 +
                    <div data-thumb="images/thumbs/wall-e.jpg" data-time="7000" class="" style="display: none; z-index: 1;"><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <img src="images/slides/wall-e.jpg">
 +
                        <div class="elemHover caption fromLeft" style="bottom: 70px; width: 285px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; visibility: hidden; left: 0px; right: auto;">
 +
                            You can also get the same effect as the caption with:
 +
                        </div>
 +
                        <div class="elemHover button fromTop" data-easing="easeOutExpo" style="left: 338px; bottom: auto; visibility: hidden; width: 63px; top: 350px;">
 +
                            A button
 +
                        </div>
 +
                        <div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left: 450px; bottom: auto; visibility: hidden; width: 112px; top: 350px;">
 +
                            Or two buttons
 +
                        </div>
 +
                        <div class="elemHover fadeIn" style="left: 600px; bottom: auto; top: 0px; padding-top: 50px; color: rgb(255, 255, 0); font-size: 13px; line-height: 20px; width: 272px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background-image: url(http://www.pixedelic.com/plugins/diapo/images/arrow_caption.png); visibility: hidden; opacity: 1; background-position: 230px 30px; background-repeat: no-repeat no-repeat;">
 +
                            Or any other html element...<br>
 +
                            and you can decide the transition time of any slide
 +
                        </div>
 +
                    </div></div>
 +
                   
 +
                    <div data-thumb="images/thumbs/up-official-trailer-fake.jpg" class="" style="display: none; z-index: 1;"><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <img src="images/slides/up-official-trailer-fake.jpg" class="imgFake">
 +
                        <div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width: 490px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left: 0px; visibility: hidden; right: auto;">
 +
                            You can also display videos, but it requires a "fake image"... read the documentation please
 +
                        </div>
 +
                    </div></div>
 +
                   
 +
                    <div data-thumb="images/thumbs/big_buck_bunny.jpg" data-time="7000" class="" style="display: none; z-index: 1;"><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <div style="position:absolute; top:0; left:0; width:900px; height:430px; padding:20px; background:#fff; color:#222;">
 +
                        <div style="float:left; width:300px;">
 +
                                <p><br><br>You can display any html element directly in the slider, but pay attention, with many elements the transition effect could be slowed.<br>
 +
                                In this case you can see a Vimeo video and a price table</p>
 +
                                <img src="images/slides/big_buck_bunny.jpg" class="imgFake">
 +
                            </div>
 +
                            <div class="price_table"><div>
 +
                                <div class="price_column highlighted" style="top:0; left:190px; height:387px; background:#fff; -moz-box-shadow: 0 1px 4px #666; -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>
 +
                                </div></div><!-- .price_column -->
 +
                                <div class="price_column" style="top:0; left:0; height:383px; background:#ddd; -moz-box-shadow: 0 1px 4px #666; -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>
 +
                                </div></div><!-- .price_column -->
 +
                                <div class="price_column" style="top:0; left:380px; height:383px; background:#ddd; -moz-box-shadow: 0 1px 4px #666; -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>
 +
                                </div></div><!-- .price_column -->
 +
                                <div class="price_column highlighted fadeIn" style="top: 0px; left: 190px; visibility: hidden; width: 180px; opacity: 1;"><div>
 +
                                    <div class="price_title">Standard</div><!-- .price_title -->
 +
                                    <div class="price_price">$9/mo.</div><!-- .price_price -->
 +
                                    <div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation -->
 +
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
 +
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
 +
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
 +
                                    <div class="pix_error">Error sign</div><!-- .pix_error -->
 +
                                    <div>
 +
                                        <a class="button button3" href="#">Purchase</a>
 +
                                    </div>
 +
                                </div></div><!-- .price_column -->
 +
                                <div class="price_column fromTop" style="top: 0px; left: 0px; visibility: hidden; width: 180px; bottom: auto;"><div>
 +
                                    <div class="price_title">Basic</div><!-- .price_title -->
 +
                                    <div class="price_price">Free</div><!-- .price_price -->
 +
                                    <div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation -->
 +
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
 +
                                    <div class="pix_error">Error sign</div><!-- .pix_error -->
 +
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
 +
                                    <div class="pix_error">Error sign</div><!-- .pix_error -->
 +
                                    <div>
 +
                                        <a class="button" href="#">Purchase</a>
 +
                                    </div>
 +
                                </div></div><!-- .price_column -->
 +
                                <div class="price_column fromBottom" style="top: 0px; left: 380px; visibility: hidden; width: 180px; bottom: auto;"><div>
 +
                                    <div class="price_title">Professional</div><!-- .price_title -->
 +
                                    <div class="price_price">$19/mo.</div><!-- .price_price -->
 +
                                    <div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation -->
 +
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
 +
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
 +
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
 +
                                    <div class="pix_check">Check sign</div><!-- .pix_check -->
 +
                                    <div>
 +
                                        <a class="button" href="#">Purchase</a>
 +
                                    </div>
 +
                                </div></div><!-- .price_column -->
 +
                            </div></div><!-- price_table -->
 +
                        </div>
 +
                    </div></div>
 +
                   
 +
                   
 +
                    <div data-thumb="images/thumbs/ratatouille2.jpg" class="" style="display: none; z-index: 1;"><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <img src="images/slides/ratatouille2.jpg">
 +
                        <div class="caption elemHover fromLeft" style="visibility: hidden; width: 900px; left: 0px; right: auto;">
 +
                            But you can also display images only... from the next one
 +
                        </div>
 +
                    </div></div>
 +
                   
 +
                    <div data-thumb="images/thumbs/monsterinc1904.jpg" class="" style="display: none; z-index: 1;"><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <img src="images/slides/monsterinc1904.jpg">
 +
                    </div></div>
 +
                   
 +
                    <div data-thumb="images/thumbs/up11322.jpg" class="" style="display: none; z-index: 1;"><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <img src="images/slides/up11322.jpg">
 +
                    </div></div>
 +
                   
 +
                    <div data-thumb="images/thumbs/dragon_trainer.jpg" class="" style="display: none; z-index: 1;"><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <img src="images/slides/dragon_trainer.jpg">
 +
                    </div></div>
 +
                   
 +
                    <div data-thumb="images/thumbs/incredibles14128.jpg" style="z-index: 1; display: none;" class=""><div class="pix_relativize" style="width:940px; height:470px">
 +
                        <img src="images/slides/incredibles14128.jpg">
 +
                    </div></div>
 +
                   
 +
              <canvas id="pix_canvas" width="50" height="50" style="position: absolute; z-index: 1002; top: 5px; right: 5px; opacity: 0.8;"></canvas><div id="pix_prev" style="opacity: 0;"></div><div id="pix_next" style="opacity: 0;"></div></div><div id="pix_pag"><ul id="pix_pag_ul"><li id="pag_nav_0" style="position:relative; z-index:1002" class="diapocurrent"><span><span>0</span></span><img src="images/thumbs/megamind1048.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li><li id="pag_nav_1" style="position:relative; z-index:1002" class=""><span><span>1</span></span><img src="images/thumbs/megamind_07.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li><li id="pag_nav_2" style="position:relative; z-index:1002" class=""><span><span>2</span></span><img src="images/thumbs/wall-e.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li><li id="pag_nav_3" style="position:relative; z-index:1002" class=""><span><span>3</span></span><img src="images/thumbs/up-official-trailer-fake.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li><li id="pag_nav_4" style="position:relative; z-index:1002" class=""><span><span>4</span></span><img src="images/thumbs/big_buck_bunny.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li><li id="pag_nav_5" style="position:relative; z-index:1002" class=""><span><span>5</span></span><img src="images/thumbs/ratatouille2.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li><li id="pag_nav_6" style="position:relative; z-index:1002" class=""><span><span>6</span></span><img src="images/thumbs/monsterinc1904.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li><li id="pag_nav_7" style="position:relative; z-index:1002" class=""><span><span>7</span></span><img src="images/thumbs/up11322.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li><li id="pag_nav_8" style="position:relative; z-index:1002" class=""><span><span>8</span></span><img src="images/thumbs/dragon_trainer.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li><li id="pag_nav_9" style="position:relative; z-index:1002" class=""><span><span>9</span></span><img src="images/thumbs/incredibles14128.jpg" class="pix_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li></ul><div id="pix_commands"><div id="pix_play" style="display: none;"></div><div id="pix_stop"></div></div></div><!-- #pix_diapo -->
 +
               
 +
            </div><!-- .fit_screen -->
 +
        </div><!-- #slideshow -->
 +
   
 +
    <div id="introduction" style="overflow:hidden">
 +
            <div class="fit_screen" style="margin-top: 173px; margin-bottom: 73px;">
 +
            <div class="text_content">
 +
                    <h2>Introduction</h2>
 +
                    <p>Hi there. First of all excuse me for my bad english, second excuse me if you will find some bugs in Diapo slideshow.</p>
 +
                    <p>Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation).</p>
 +
                    <p>Diapo slideshow is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don't think I will spend many hours to improve this feature, sorry.</p>
 +
                    <p>Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing (<a href="http://gsgd.co.uk/sandbox/jquery/easing/" title="jQuery Easing plugin" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a>), jQuery HoverIntent (<a href="http://cherne.net/brian/resources/jquery.hoverIntent.html" title="jQuery HoverIntent plugin" target="_blank">http://cherne.net/brian/resources/jquery.hoverIntent.html</a>), jQuery Mobile (<a href="http://jquerymobile.com/" title="jQuery Mobile" target="_blank">http://jquerymobile.com/</a>, but not all the plugins). These plugins are included in the zip you can download at the bottom of this page.</p>
 +
                    <p>Diapo slideshow is the first jQuery plugin I develop from scratch and I distribute for free, so please be lenient</p>
 +
                </div><!-- .text_content -->
 +
            </div><!-- .fit_screen -->
 +
    </div><!-- #introduction -->
 +
   
 +
    <div id="methods" style="overflow:hidden">
 +
            <div class="fit_screen" style="margin-top: 230.5px; margin-bottom: 130.5px;">
 +
            <div class="text_content">
 +
                    <h2>Methods</h2>
 +
                    <table class="options" cellspacing="1">
 +
                        <tbody><tr>
 +
                        <td class="even">$('selector').diapo();</td><td>basic format</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                        <td class="even">$('selector').diapo({fx: 'scrollHorz', time: '5000'});</td><td>an example with some customizations</td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">$('selector').diapoStop();</td><td>you can use this function to stop the slideshow</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                        <td class="even">$('selector').diapoPlay();</td><td>you can use this function to play/resume the slideshow</td>
 +
                        </tr>
 +
                    </tbody></table>
 +
                </div><!-- .text_content -->
 +
            </div><!-- .fit_screen -->
 +
    </div><!-- #methods -->
 +
                   
 +
    <div id="options" style="overflow:hidden">
 +
            <div class="fit_screen" style="margin-top: 100px; margin-bottom: 100px;">
 +
            <div class="text_content">
 +
                    <h2>Options</h2>
 +
                    <table class="options" cellspacing="1">
 +
                        <tbody><tr>
 +
                            <td class="even">selector:</td><td>'div', <small>[target element]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">fx:</td><td>'random',</td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">&nbsp;</td>
 +
                            <td><small>Available effects:</small> 'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight'<br>
 +
                            <small>You can also use more than one effect:</small> 'curtainTopLeft, mosaic, bottomLeftTopRight'
 +
                            </td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">mobileFx:</td><td>'', <small>[leave empty if you want to display the same effect on mobile devices and on desktop etc.]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">slideOn:</td><td>'random', <small>[next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">gridDifference:</td><td>250, <small>[to make the grid blocks slower than the slices, this value must be smaller than transPeriod]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">easing:</td><td>'easeInOutExpo', <small>[for the complete list http: jqueryui.com/demos/effect/easing.html]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">mobileEasing:</td><td>'', <small>[leave empty if you want to display the same easing on mobile devices and on desktop etc.]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">loader:</td><td>'pie', <small>[pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar)]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">loaderOpacity:</td><td> .8, <small>[0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">loaderColor:</td><td>'#ffff00',</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">loaderBgColor:</td><td>'#222222',</td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">pieDiameter:</td><td>50,</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">piePosition:</td><td>'top:5px; right:5px', <small>[this option accepts any CSS value]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">pieStroke:</td><td>8,</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">barPosition:</td><td>'bottom', <small>[bottom, top]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">barStroke:</td><td>5,</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">navigation:</td><td>true, <small>[true, false. It enables the previous and the next buttons, their IDs are #pix_prev and #pix_next]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">mobileNavigation:</td><td>true, <small>[true, false. It enables the previous and the next buttons on mobile devices]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">navigationHover:</td><td>true, <small>[true, false. If true navigation will be visible only on hover state]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">mobileNavHover:</td><td>true, <small>[true, false. If true navigation will be visible only on hover state for mobile devices]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">commands:</td><td>true, <small>[true, false. It enables stop and play buttons]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">mobileCommands:</td><td>true, <small>[true, false. It enables stop and play buttons on mobile devices]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">pagination:</td><td>true, <small>[true, false. It enables the pagination numbers. Here below you can see the appended code]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">&nbsp;</td>
 +
                            <td><small>&lt;div id="pix_pag"&gt;<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul id="pix_pag_ul"&gt;<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="pag_nav_0"&gt;&lt;span&gt;&lt;span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="pag_nav_1"&gt;&lt;span&gt;&lt;span&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="pag_nav_2"&gt;&lt;span&gt;&lt;span&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...etc.<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br>
 +
&lt;/div&gt;</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">mobilePagination:</td><td>true, <small>[true, false. It enables the pagination numbers on mobile devices]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">thumbs:</td><td>true, <small>[true, false. It shows the thumbnails (if available) when the mouse is on the pagination buttons. Not available for mobile devices]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">hover:</td><td>true, <small>[true, false. Puase on state hover. Not available for mobile devices]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">pauseOnClick:</td><td>true, <small>[true, false. It stops the slideshow when you click the sliders.]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">rows:</td><td>4,</td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">cols:</td><td>6,</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">slicedRows:</td><td>8, <small>[if 0 the same value of rows]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">slicedCols:</td><td>12, <small>[if 0 the same value of cols]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">time:</td><td>3000, <small>[milliseconds between the end of the sliding effect and the start of the nex one]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">transPeriod:</td><td>1500, <small>[lenght of the sliding effect in milliseconds]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">                   
 +
                            <td class="even">autoAdvance:</td><td>true, <small>[true, false]</small></td>
 +
                        </tr>
 +
                        <tr>                   
 +
                            <td class="even">mobileAutoAdvance:</td><td>true, <small>[true, false. Auto-advancing for mobile devices]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">onStartLoading:</td><td>function() {  },</td>
 +
                        </tr>
 +
                        <tr>                   
 +
                            <td class="even">onLoaded:</td><td>function() {  },</td>
 +
                        </tr>
 +
                        <tr class="odd">                   
 +
                            <td class="even">onEnterSlide:</td><td>function() {  },</td>
 +
                        </tr>
 +
                        <tr>                   
 +
                            <td class="even">onStartTransition:</td><td>function() {  }</td>
 +
                        </tr>
 +
                    </tbody></table>
 +
                </div><!-- .text_content -->             
 +
            </div><!-- .fit_screen -->
 +
        </div><!-- #options -->
 +
   
 +
    <div id="apis" style="overflow:hidden">
 +
            <div class="fit_screen" style="margin-top: 100px; margin-bottom: 100px;">
 +
            <div class="text_content">
 +
                    <h2>APIs</h2>
 +
                    <table class="options" cellspacing="1">
 +
                        <tbody><tr class="odd">
 +
                            <td class="even">'data-fake'</td><td>a path to an image, <small>[iframes (or objects) must be replaced by an image during the transition. Paste here the path to the image, for an example see here below]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">&nbsp;</td>
 +
                            <td><small>&lt;iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&amp;autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                        <td class="even">'data-thumb'</td><td>a path to an image, <small>[its size is set by default on 50x50 pixels. You can change it in the stylesheets. Use this attribute for the target element to set the thumbnail relative to the slide]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">'data-fx'</td><td>the same value as 'fx' option, <small>[use this attribute for the target element to set the effect relative to a slide]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                        <td class="even">'data-mobileFx'</td><td>the same value as here above, but for mobile devices</td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">'data-slideOn'</td><td>next or prev, <small>[use this attribute for the target element to set if apply the transition effect to the previous or the next element relative to the slide]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                        <td class="even">'data-slideOn'</td><td>next or prev, <small>[use this attribute for the target element to set if apply the transition effect to the previous or the next element relative to the slide]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">'data-time'</td><td>in milliseconds, <small>[use this attribute for the target element to set for a slide the time between one transition the and the next one]</small></td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                        <td class="even">'data-easing'</td><td>the same value as 'easing' option, <small>[use this attribute for the target element to set the easing effect for a slide]</small></td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">'.fromLeft'</td><td>add this class to an element (with position:absolute) you want to appear from the left after the transition effect has terminated*</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                        <td class="even">'.fromRight'</td><td>add this class to an element (with position:absolute) you want to appear from the right after the transition effect has terminated*</td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">'.fromTop'</td><td>add this class to an element (with position:absolute) you want to appear from the top after the transition effect has terminated*</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                        <td class="even">'.fromBottom'</td><td>add this class to an element (with position:absolute) you want to appear from the bottom after the transition effect has terminated*</td>
 +
                        </tr>
 +
                        <tr>
 +
                        <td class="even">'.fadeIn'</td><td>add this class to an element (with position:absolute) you want to appear fade in after the transition effect has terminated*</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                        <td class="even">&nbsp;</td><td>(*)all these elements are display not at the same time, but consecutively5080</td>
 +
                        </tr>
 +
                    </tbody></table>
 +
                </div><!-- .text_content -->             
 +
            </div><!-- .fit_screen -->
 +
        </div><!-- #apis -->
 +
 +
    <div id="download" style="overflow:hidden">
 +
            <div class="fit_screen" style="margin-top: 112.5px; margin-bottom: 12.5px;">
 +
            <div class="text_content">
 +
                    <h2>Download, support and donations... if you want</h2>
 +
                    <p>Diapo slideshow is an open source plugin and you can use it for free. But if you want to help me to improve it, keep it updated etc. please consider a free donation or buy something on my portfolio on ThemeForest.</p>
 +
                   
 +
                    <div class="grid_4 grid_fancy" style="margin-left:0">
 +
                    <span>
 +
                            <h4>Donations</h4>
 +
                            <p>Buy me a beer, a coffee or an ice cream to my daughter. Decide the amount you prefer</p>
 +
                            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="pp_pix_donation">
 +
                           
 +
                                <input type="hidden" name="cmd" value="_xclick">
 +
                                <input type="hidden" name="business" value="manuelmasia@tin.it">
 +
                                <input name="item_name" type="hidden" value="Donation to Pixedelic">
 +
                                <input name="item_number" type="hidden" value="Diapo slideshow">
 +
                                <span class="alignleft">$ <input type="text" name="amount" value="2"></span>
 +
                                <input type="hidden" name="no_shipping" value="0">
 +
                                <input type="hidden" name="no_note" value="1">
 +
                                <input type="hidden" name="currency_code" value="USD">
 +
                                <input type="hidden" name="lc" value="IT">
 +
                                <input type="hidden" name="bn" value="PP-BuyNowBF">
 +
                                <input type="hidden" name="return" value="http://www.pixedelic.com/plugins/diapo/thankyou.php">
 +
                                <input type="submit" value="Donate with PayPal" onclick="_gaq.push(['_trackPageview', '/paypal']);">
 +
                           
 +
                            </form>
 +
                        </span>
 +
                    </div>
 +
 +
                    <div class="grid_4 grid_fancy">
 +
                    <span>
 +
                            <h4>Buy something</h4>
 +
                            <p style="width:80px;" class="alignleft"><a onclick="_gaq.push(['_trackPageview', '/pixwall']);" href="http://codecanyon.net/item/pixwall-slideshow-for-wordpress/859727?ref=pixedelic" target="_blank" title="Pixwall WP plugin on CodeCanyon"><img src="images/pixwall_th.png" width="80" height="80" alt="Pixwall WP plugin on CodeCanyon" style="margin-top:5px"></a></p>
 +
                            <p style="width:90px;" class="alignright">Buy my works: here is my portfolios on <a onclick="_gaq.push(['_trackPageview', '/themeforest']);" href="http://themeforest.net/user/pixedelic/portfolio?ref=pixedelic" target="_blank" title="Pixedelic portfolio on ThemeForest">Themeforest</a> and <a onclick="_gaq.push(['_trackPageview', '/codecacnyon']);" href="http://codecanyon.net/user/pixedelic/portfolio?ref=pixedelic" target="_blank" title="Pixedelic portfolio on CodeCanyon">CodeCanyon</a></p>
 +
                        </span>
 +
                    </div>
 +
 +
                    <div class="grid_4 grid_fancy">
 +
                    <span>
 +
                            <h4>Hire</h4>
 +
                            <p>If you want you can hire me at <a href="mailto:manu@pixedelic.com" title="Send an email">manu@pixedelic.com</a> (include some details about your project and do not ask for support at this address)</p>
 +
                        </span>
 +
                    </div>
 +
 +
                    <div class="grid_4 grid_fancy" style="margin-right:0">
 +
                    <span>
 +
                            <h4>Support</h4>
 +
                            <p>You can visit the <a href="https://groups.google.com/group/diapo-slideshow" title="Diapo Google Group" target="_blank">Diapo Google Group</a> and ask your question there (post a link that shows your problem) or post a tip or whatever you want... with moderation</p>
 +
                        </span>
 +
                    </div>
 +
                   
 +
                    <div class="clear" style="height:40px"></div>
 +
 +
                    <div class="grid_4" style="margin-left:0">
 +
                        <a onclick="_gaq.push(['_trackPageview', '/scripts/diapo.js']);" href="scripts/diapo.js" target="_blank" title="Diapo slideshow for developers" class="grid_fancy" style="margin-right:0"><span>diapo.js</span></a>
 +
                    </div>
 +
 +
                    <div class="grid_4">
 +
                        <a onclick="_gaq.push(['_trackPageview', '/scripts/diapo.min.js']);" href="scripts/diapo.min.js" target="_blank" title="Diapo slideshow minified" class="grid_fancy" style="margin-right:0"><span>diapo.min.js</span></a>
 +
                    </div>
 +
 +
                    <div class="grid_8" style="margin-right:0">
 +
                        <a onclick="_gaq.push(['_trackPageview', '/diapo.zip']);" href="diapo.1.0.4.zip" target="_blank" title="Diapo slideshow with demo" class="grid_fancy" style="margin-right:0"><span>Download Diapo Slideshow (zip with demo)</span></a>
 +
                    </div>
 +
 +
 +
                </div><!-- .text_content -->             
 +
            </div><!-- .fit_screen -->
 +
        </div><!-- #download -->
 +
   
 +
    <div id="changelog" style="overflow:hidden">
 +
            <div class="fit_screen" style="margin-top: 215px; margin-bottom: 115px;">
 +
            <div class="text_content">
 +
                    <h2>Changelog</h2>
 +
                   
 +
                    <table class="options" cellspacing="1">
 +
                        <tbody><tr>
 +
                            <td class="even">11/14/2011 v.1.0.4</td><td>fixed a minor "comma" bug :-P</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">11/10/2011 v.1.0.3</td><td>fixed some navigation bugs and other issues regarding mobile devices</td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">9/20/2011 v.1.0.2</td><td>fixed some bugs with IE</td>
 +
                        </tr>
 +
                        <tr class="odd">
 +
                            <td class="even">8/28/2011 v.1.0.1</td><td>made it compatible with jQuery 1.4+</td>
 +
                        </tr>
 +
                        <tr>
 +
                            <td class="even">8/23/2011 v.1.0.0</td><td>first public release</td>
 +
                        </tr>
 +
                    </tbody></table>
 +
 +
 +
                </div><!-- .text_content -->             
 +
            </div><!-- .fit_screen -->
 +
        </div><!-- #changelog -->
 +
   
 +
    </section>
 +
 +
<div style="position:fixed; bottom:0; right:0; width:150px; background:#ffff00; color:#222; padding:10px; border-top:1px solid #dadada; border-left:1px solid #dadada; z-index:9999">
 +
So sorry, Diapo slideshow is no more supported. Please visit my new slideshow plugin page: <a href="http://www.pixedelic.com/plugins/camera/">Camera slideshow</a>, a new free slideshow with an adaptive layout
 +
</div>
<script type="text/javascript">
<script type="text/javascript">
-
if (typeof(Reuters) == 'undefined' || Reuters == null) {
 
-
Reuters = new Object();
 
-
}
 
-
if (typeof(Reuters.nav) == 'undefined' || Reuters.nav == null) {
 
-
Reuters.nav = new Object();
 
-
}
 
-
if (typeof(Reuters.info) == 'undefined' || Reuters.info == null) {
 
-
Reuters.info = new Object();
 
-
}
 
-
if (typeof Reuters.info.edition == "undefined") {
 
-
Reuters.info.edition = "BETAUS";
 
-
}
 
-
if (typeof(Reuters.nav.baseUrlPrefix) == 'undefined') {
 
-
Reuters.nav.baseUrlPrefix = '';
 
-
}
 
-
if (typeof(Reuters.nav.PRIMARY_SITE_URL) == 'undefined') {
 
-
Reuters.nav.PRIMARY_SITE_URL = 'http://www.reuters.com';
 
-
}
 
-
if(Reuters.info.edition == 'BETAUS' || Reuters.info.edition == 'US') {
 
-
Reuters.nav.PRIMARY_SITE_URL = 'http://www.reuters.com';
 
-
} else {
 
-
Reuters.nav.PRIMARY_SITE_URL = 'http://'+(Reuters.info.edition).toLowerCase()+'.reuters.com';
 
-
}
 
-
$("li.nav-item").hover(
 
-
        function () {
 
-
$(this).addClass("hover");
 
-
$(this).children(".subnav").stop(true,true).delay(50).slideDown(50, function(){
 
-
if($.fn.bgiframe && ($("select").length > 0)){
 
-
$(this).bgiframe({opacity: false});
 
-
}
 
-
});
 
-
        },function(){
 
-
$(this).removeClass("hover");
 
-
$(this).children(".subnav").stop(true,true).delay(50).slideUp(50);
 
-
});
 
-
$('#nav-strip a').click(function() {
 
-
var theParent = $(this).closest('.nav-item');
 
-
var theParentText= $('a .primary-link', theParent).text();
 
-
var linkText = $(this).text();
 
-
linkText = (linkText == theParentText)? linkText : theParentText + " - " + linkText;
 
-
var destLink = $(this).attr('href');
 
-
if (typeof(dcsMultiTrack) == "function") {
 
-
dcsMultiTrack('DCSext.DartZone','','DCSext.ModID','','DCSext.ModImp','0','DCSext.VirtualEvent', '1','DCSext.rNavChannel',theParentText,'DCSext.NavSection',linkText,'DCSext.NavURL',destLink,'WT.z_navtest', '1');
 
-
}
 
-
});
 
-
$('#masthead a').click(function() {
+
  var _gaq = _gaq || [];
-
var destLink = $(this).attr('href');
+
  _gaq.push(['_setAccount', 'UA-5981799-9']);
-
if (typeof(dcsMultiTrack) == "function") {
+
  _gaq.push(['_trackPageview']);
-
DcsMultiTrack('DCSext.DartZone','','DCSext.ModID','','DCSext.ModImp','0','DCSext.VirtualEvent','1','DCSext.rNavChannel','Other','DCSext.NavURL',destLink,'WT.z_navtest','1');
+
-
}
+
-
});
+
-
$('#editionSwitchTop li').hover(function() {
+
-
$(this)
+
-
.find('ul')
+
-
.stop(true,true);
+
-
},function () {
+
-
$(this)
+
-
.find('ul')
+
-
.stop(true, true)
+
-
.delay(500)
+
-
.slideUp(50);
+
-
});
+
-
$("#editionSwitchTop li").click(function(event) {
+
-
  if($(this).find('ul').css('display') == 'none'){
+
-
$(this)
+
-
.find('ul')
+
-
.stop(true, true)
+
-
.slideDown(75);
+
-
} else if($(this).find('ul').css('display') == 'block'){
+
-
$(this)
+
-
.find('ul')
+
-
.stop(true, true)
+
-
.slideUp(50);
+
-
}
+
-
});
+
-
$(document).ready(function() {
+
-
$('#editionSwitchFooter li').hover(function() {
+
-
$(this)
+
-
.find('ul')
+
-
.stop(true,true);
+
-
},function () {
+
-
$(this)
+
-
.find('ul')
+
-
.stop(true, true)
+
-
.delay(500)
+
-
.slideUp(50);
+
-
});
+
-
$(function() {
+
-
$("#editionSwitchFooter li").click(function(event) {
+
-
  if($(this).find('ul').css('display') == 'none'){
+
-
$(this)
+
-
.find('ul')
+
-
.stop(true, true)
+
-
.slideDown(75);
+
-
} else if($(this).find('ul').css('display') == 'block'){
+
-
$(this)
+
-
.find('ul')
+
-
.stop(true, true)
+
-
.slideUp(50);
+
-
}
+
-
});
+
-
});
+
-
});
+
-
if($("#searchForm").attr("action") == '/search') {
+
-
$("#searchForm").attr("action", Reuters.nav.PRIMARY_SITE_URL +'/search');
+
-
}
+
-
$('#nav-strip a').each(function(ind) {
+
-
if (this.href.search(/\.reuters.com/i) == -1) {
+
-
this.target = "_blank";
+
-
}
+
-
});
+
-
</script>
+
 +
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
 +
</script>
 +
   
</body></html>
</body></html>

Latest revision as of 08:03, 28 October 2013

Diapo | a free jQuery slideshow by Pixedelic

This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.



You can display any html element directly in the slider, but pay attention, with many elements the transition effect could be slowed.
In this case you can see a Vimeo video and a price table

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Introduction

Hi there. First of all excuse me for my bad english, second excuse me if you will find some bugs in Diapo slideshow.

Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation).

Diapo slideshow is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don't think I will spend many hours to improve this feature, sorry.

Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing (http://gsgd.co.uk/sandbox/jquery/easing/), jQuery HoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html), jQuery Mobile (http://jquerymobile.com/, but not all the plugins). These plugins are included in the zip you can download at the bottom of this page.

Diapo slideshow is the first jQuery plugin I develop from scratch and I distribute for free, so please be lenient

Methods

$('selector').diapo();basic format
$('selector').diapo({fx: 'scrollHorz', time: '5000'});an example with some customizations
$('selector').diapoStop();you can use this function to stop the slideshow
$('selector').diapoPlay();you can use this function to play/resume the slideshow

Options

selector:'div', [target element]
fx:'random',
  Available effects: 'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight'
You can also use more than one effect: 'curtainTopLeft, mosaic, bottomLeftTopRight'
mobileFx:'', [leave empty if you want to display the same effect on mobile devices and on desktop etc.]
slideOn:'random', [next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide]
gridDifference:250, [to make the grid blocks slower than the slices, this value must be smaller than transPeriod]
easing:'easeInOutExpo', [for the complete list http: jqueryui.com/demos/effect/easing.html]
mobileEasing:'', [leave empty if you want to display the same easing on mobile devices and on desktop etc.]
loader:'pie', [pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar)]
loaderOpacity: .8, [0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1]
loaderColor:'#ffff00',
loaderBgColor:'#222222',
pieDiameter:50,
piePosition:'top:5px; right:5px', [this option accepts any CSS value]
pieStroke:8,
barPosition:'bottom', [bottom, top]
barStroke:5,
navigation:true, [true, false. It enables the previous and the next buttons, their IDs are #pix_prev and #pix_next]
mobileNavigation:true, [true, false. It enables the previous and the next buttons on mobile devices]
navigationHover:true, [true, false. If true navigation will be visible only on hover state]
mobileNavHover:true, [true, false. If true navigation will be visible only on hover state for mobile devices]
commands:true, [true, false. It enables stop and play buttons]
mobileCommands:true, [true, false. It enables stop and play buttons on mobile devices]
pagination:true, [true, false. It enables the pagination numbers. Here below you can see the appended code]
  <div id="pix_pag">
    <ul id="pix_pag_ul">
        <li id="pag_nav_0"><span><span>0</span></span></li>
        <li id="pag_nav_1"><span><span>1</span></span></li>
        <li id="pag_nav_2"><span><span>2</span></span></li>
        ...etc.
    </ul>
</div>
mobilePagination:true, [true, false. It enables the pagination numbers on mobile devices]
thumbs:true, [true, false. It shows the thumbnails (if available) when the mouse is on the pagination buttons. Not available for mobile devices]
hover:true, [true, false. Puase on state hover. Not available for mobile devices]
pauseOnClick:true, [true, false. It stops the slideshow when you click the sliders.]
rows:4,
cols:6,
slicedRows:8, [if 0 the same value of rows]
slicedCols:12, [if 0 the same value of cols]
time:3000, [milliseconds between the end of the sliding effect and the start of the nex one]
transPeriod:1500, [lenght of the sliding effect in milliseconds]
autoAdvance:true, [true, false]
mobileAutoAdvance:true, [true, false. Auto-advancing for mobile devices]
onStartLoading:function() { },
onLoaded:function() { },
onEnterSlide:function() { },
onStartTransition:function() { }

APIs

'data-fake'a path to an image, [iframes (or objects) must be replaced by an image during the transition. Paste here the path to the image, for an example see here below]
  <iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
'data-thumb'a path to an image, [its size is set by default on 50x50 pixels. You can change it in the stylesheets. Use this attribute for the target element to set the thumbnail relative to the slide]
'data-fx'the same value as 'fx' option, [use this attribute for the target element to set the effect relative to a slide]
'data-mobileFx'the same value as here above, but for mobile devices
'data-slideOn'next or prev, [use this attribute for the target element to set if apply the transition effect to the previous or the next element relative to the slide]
'data-slideOn'next or prev, [use this attribute for the target element to set if apply the transition effect to the previous or the next element relative to the slide]
'data-time'in milliseconds, [use this attribute for the target element to set for a slide the time between one transition the and the next one]
'data-easing'the same value as 'easing' option, [use this attribute for the target element to set the easing effect for a slide]
'.fromLeft'add this class to an element (with position:absolute) you want to appear from the left after the transition effect has terminated*
'.fromRight'add this class to an element (with position:absolute) you want to appear from the right after the transition effect has terminated*
'.fromTop'add this class to an element (with position:absolute) you want to appear from the top after the transition effect has terminated*
'.fromBottom'add this class to an element (with position:absolute) you want to appear from the bottom after the transition effect has terminated*
'.fadeIn'add this class to an element (with position:absolute) you want to appear fade in after the transition effect has terminated*
 (*)all these elements are display not at the same time, but consecutively5080

Download, support and donations... if you want

Diapo slideshow is an open source plugin and you can use it for free. But if you want to help me to improve it, keep it updated etc. please consider a free donation or buy something on my portfolio on ThemeForest.

Donations

Buy me a beer, a coffee or an ice cream to my daughter. Decide the amount you prefer

$

Buy something

Pixwall WP plugin on CodeCanyon

Buy my works: here is my portfolios on Themeforest and CodeCanyon

Hire

If you want you can hire me at manu@pixedelic.com (include some details about your project and do not ask for support at this address)

Support

You can visit the Diapo Google Group and ask your question there (post a link that shows your problem) or post a tip or whatever you want... with moderation
diapo.js
diapo.min.js
Download Diapo Slideshow (zip with demo)

Changelog

11/14/2011 v.1.0.4fixed a minor "comma" bug :-P
11/10/2011 v.1.0.3fixed some navigation bugs and other issues regarding mobile devices
9/20/2011 v.1.0.2fixed some bugs with IE
8/28/2011 v.1.0.1made it compatible with jQuery 1.4+
8/23/2011 v.1.0.0first public release
So sorry, Diapo slideshow is no more supported. Please visit my new slideshow plugin page: Camera slideshow, a new free slideshow with an adaptive layout

Retrieved from "http://2013.igem.org/Team:USTC-Software/test"