mason/homepage/carousel.mas

   1  <style>
   2
   3 .slider-size {
   4   height: 400px; /* This is your slider height */
   5 }
   6 .carousel {
   7   max-width:98%;
   8   /*width:100%;*/
   9   margin:0 auto; /* center your carousel if other than 100% */
  10   margin-bottom:0px;
  11 }
  12
  13 .carousel-sgn-caption {
  14   position:relative;
  15   float: left;
  16   max-width:49%;
  17   min-width:35%;
  18   padding: 0px 10px 0px 10px;
  19   margin-top:20px;
  20
  21   color: #000;
  22   font-size: 16px;
  23   text-decoration: none;
  24   background-color: #fff;
  25   opacity: 0.80;
  26   filter: alpha(opacity=80); /* For IE8 and earlier */
  27   border-top-right-radius:12px;
  28   border-bottom-right-radius:12px;
  29 }
  30
  31 .carousel-sgn-caption a {
  32   color: #000;
  33   text-decoration: none;
  34 }
  35
  36 .carousel-sgn-caption a:hover {
  37   color: #666;
  38   text-decoration: none;
  39 }
  40
  41 .carousel-sgn-links {
  42   position:absolute;
  43   min-width:35%;
  44   max-width:49%;
  45   margin-top:20px;
  46   right:0px;
  47
  48   color: #000;
  49   font-size: 16px;
  50   text-decoration: none;
  51   background-color: #fff;
  52   opacity: 0.85;
  53   filter: alpha(opacity=85); /* For IE8 and earlier */
  54   border-top-left-radius:12px;
  55   border-bottom-left-radius:12px;
  56 }
  57
  58 .carousel-sgn-links ul {
  59   padding: 10px 30px 0px 15px;
  60   list-style-type: none;
  61 }
  62
  63 .carousel-sgn-links a {
  64   color: #000;
  65   text-decoration: none;
  66 }
  67
  68 .carousel-sgn-links a:hover {
  69   color: #666;
  70   text-decoration: none;
  71 }
  72
  73 @media (min-width: 0px) and (max-width: 650px) {
  74
  75     .carousel-sgn-caption {
  76       margin-top:0px;
  77       width: 100%;
  78       max-width: 100%;
  79       border-radius:0px;
  80       float: none;
  81       margin-bottom:0px;
  82     }
  83
  84     .carousel-sgn-links {
  85       max-width: 100%;
  86       width: 100%;
  87       border-radius:0px;
  88       bottom:30px;
  89     }
  90
  91     .carousel-indicators {
  92       bottom:0px;
  93       margin-bottom:5px;
  94     }
  95
  96 }
  97
  98
  99 </style>
 100
 101 <!--
 102 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 103 -->
 104
 105 <script>
 106
 107   jQuery(document).ready(function() {
 108   //   $('.carousel').carousel({
 109   //     interval: 20000,
 110   //     // wrap:true
 111   //   });
 112
 113
 114
 115
 116
 117
 118     var $item = $('.carousel .item');
 119     var $wHeight = $(window).height();
 120
 121     var $numberofSlides = $('.item').length;
 122     var $currentSlide = Math.floor((Math.random() * $numberofSlides));
 123
 124     $('.carousel-indicators li').each(function(){
 125       var $slideValue = $(this).attr('data-slide-to');
 126       if($currentSlide == $slideValue) {
 127         $(this).addClass('active');
 128         $item.eq($slideValue).addClass('active');
 129       } else {
 130         $(this).removeClass('active');
 131         $item.eq($slideValue).removeClass('active');
 132       }
 133     });
 134
 135     $('.carousel').carousel({
 136       interval: 20000,
 137       wrap: "true",
 138       pause: "false"
 139     });
 140
 141
 142     //$("#myCarousel").swiperight(function() {
 143     //      $("#myCarousel").carousel('prev');
 144     //    });
 145     //   $("#myCarousel").swipeleft(function() {
 146     //      $("#myCarousel").carousel('next');
 147     //   });
 148
 149        $(".ui-loading").css("display","none");
 150        $(".ui-loader").css("display","none");
 151   });
 152 </script>
 153
 154   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
 155     <!-- Indicators -->
 156     <ol class="carousel-indicators">
 157       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 158       <li data-target="#myCarousel" data-slide-to="1"></li>
 159       <li data-target="#myCarousel" data-slide-to="2"></li>
 160       <li data-target="#myCarousel" data-slide-to="3"></li>
 161       <li data-target="#myCarousel" data-slide-to="4"></li>
 162       <li data-target="#myCarousel" data-slide-to="5"></li>
 163     </ol>
 164
 165     <!-- Wrapper for slides -->
 166     <div class="carousel-inner" role="listbox">
 167
 168       <div class="item">
 169           <div style="background:url(/documents/img/homepage_carousel/carousel_slideshare.png) center center; background-size:cover;" class="slider-size">
 170             <div class="carousel-sgn-caption">
 171               <a href="http://www.slideshare.net/solgenomics" target="_blank">
 172                 <h3>SGN SlideShare</h3>
 173                 <p>Slides from conferences and courses</p>
 174               </a>
 175             </div>
 176
 177             <div class="carousel-sgn-links">
 178               <ul>
 179                 <li><a href="http://www.slideshare.net/solgenomics/sol-meeting-2015-sgn-workshop-introduction?related=1" target="_blank">SOL Meeting 2015</a></li>
 180                 <li><a href="http://www.slideshare.net/solgenomics/sgn-introduction-to-unix-commandline-2015-part-1?related=1" target="_blank">Introduction to UNIX Command-line</a></li>
 181               </ul>
 182             </div>
 183
 184           </div>
 185         </a>
 186       </div>
 187
 188
 189       <div class="item">
 190           <div style="background:url(/documents/img/homepage_carousel/sol2016.jpeg) center center; background-size:cover;" class="slider-size">
 191             <div class="carousel-sgn-caption" style="opacity: 0.95; background-color: #efefef">
 192               <a href="http://solgenomics2016.ucdavis.edu" target="_blank">
 193                 <h3 style="color: #00426c">The 13th Solanaceae Conference</h3>
 194                 <p style="color: #00426c"><img src="/documents/img/sgn_transparent_logo.png" width="30"> September 12-16, 2016 - Davis California USA</p>
 195               </a>
 196             </div>
 197
 198             <div class="carousel-sgn-links" style="background-color: #efefef">
 199               <ul>
 200                 <li><a href="http://solgenomics2016.ucdavis.edu/program/" target="_blank" style="color: #00426c">Preliminary Program</a></li>
 201                 <li><a href="http://solgenomics2016.ucdavis.edu/registration/" target="_blank" style="color: #00426c">Registration</a></li>
 202                 <li><a href="http://solgenomics2016.ucdavis.edu/abstract-submission-info/" target="_blank" style="color: #00426c">Abstract Submission</a></li>
 203                 <li><a href="http://solgenomics2016.ucdavis.edu/hotel-information/" target="_blank" style="color: #00426c">Venue Information</a></li>
 204               </ul>
 205             </div>
 206
 207           </div>
 208         </a>
 209       </div>
 210
 211
 212
 213       <div class="item">
 214           <div style="background:url(/documents/img/homepage_carousel/tomato_diseases_2016.jpeg) center center; background-size:cover;" class="slider-size">
 215             <div class="carousel-sgn-caption" style="opacity: 0.95">
 216               <a href="http://www.tomatodiseases2016.es/web/" target="_blank">
 217                 <h3>5th International Symposium on Tomato Diseases</h3>
 218                 <p>Malaga, Spain June 13-16, 2016</p>
 219               </a>
 220             </div>
 221
 222             <div class="carousel-sgn-links">
 223               <ul>
 224                 <li><a href="http://www.tomatodiseases2016.es/web/index.php/tentative-programme" target="_blank">Preliminary Program</a></li>
 225                 <li><a href="http://www.tomatodiseases2016.es/web/index.php/important-dates" target="_blank">Important Dates</a></li>
 226                 <li><a href="http://www.tomatodiseases2016.es/web/index.php/registration" target="_blank">Registration</a></li>
 227                 <li><a href="http://www.tomatodiseases2016.es/web/index.php/accommodation" target="_blank">Accomodation</a></li>
 228               </ul>
 229             </div>
 230
 231           </div>
 232         </a>
 233       </div>
 234
 235       <div class="item">
 236         <div style="background:url(/documents/img/homepage_carousel/carousel_tomato.jpg) center center; background-size:cover;" class="slider-size">
 237           <div class="carousel-sgn-caption">
 238             <h3><a href="/organism/Solanum_lycopersicum/genome">Tomato Genome</a></h3>
 239             <p><a href="http://www.nature.com/nature/journal/v485/n7400/full/nature11119.html" target="_blank">The tomato genome sequence provides insights into fleshy fruit evolution</a></p>
 240           </div>
 241
 242           <div class="carousel-sgn-links">
 243             <ul>
 244               <li><a href="/jbrowse">Browse the tomato genome</a></li>
 245               <li><a href="/tools/blast?db_id=224">Find sequences by similarity</a></li>
 246               <li><a href="ftp://ftp.solgenomics.net/genomes/Solanum_lycopersicum/annotation/ITAG2.4_release/">Download the annotations</a></li>
 247               <li><a href="ftp://ftp.solgenomics.net/genomes/Solanum_lycopersicum/assembly/build_2.50/">Download the Genome Sequence</a></li>
 248             </ul>
 249           </div>
 250         </div>
 251       </div>
 252
 253       <div class="item">
 254         <div style="background:url(/documents/img/homepage_carousel/carousel_potato.jpg) center center; background-size:cover;" class="slider-size">
 255         <div class="carousel-sgn-caption">
 256             <h3><a href="/organism/Solanum_tuberosum/genome">Potato Genome</a></h3>
 257             <p><a href="http://www.nature.com/nature/journal/v475/n7355/full/nature10158.html" target="_blank">Genome sequence and analysis of the tuber crop potato</a></p>
 258         </div>
 259         <div class="carousel-sgn-links">
 260           <ul>
 261             <li><a href="/jbrowse/current/?data=data%2Fjson%2FPGSC_DM_v4.03">Browse the potato genome</a></li>
 262             <li><a href="/tools/blast?db_id=262">Find sequences by similarity</a></li>
 263             <li><a href="ftp://ftp.solgenomics.net/genomes/Solanum_tuberosum/annotation/">Download the annotations</a></li>
 264             <li><a href="ftp://ftp.solgenomics.net/genomes/Solanum_tuberosum/assembly/PGSC_DM_v4.03/">Download the Genome Sequence</a></li>
 265           </ul>
 266         </div>
 267
 268         </div>
 269       </div>
 270
 271       <div class="item">
 272         <div style="background:url(/documents/img/homepage_carousel/3.jpg) center center; background-size:cover;" class="slider-size">
 273         <div class="carousel-sgn-caption">
 274             <h3><a href="/organism/Capsicum_annuum/genome">Pepper Genome</a></h3>
 275             <p><a href="http://www.nature.com/ng/journal/v46/n3/full/ng.2877.html" target="_blank">Genome sequence of the hot pepper provides insights into the evolution of pungency in Capsicum species</a></p>
 276         </div>
 277
 278         <div class="carousel-sgn-links">
 279           <ul>
 280             <li><a href="/jbrowse/current/?data=data%2Fjson%2FPepper.v.1.55">Browse the pepper genome</a></li>
 281             <li><a href="/tools/blast?db_id=217">Find sequences by similarity</a></li>
 282             <li><a href="ftp://ftp.solgenomics.net/genomes/Capsicum_annuum/">Download the annotations</a></li>
 283             <li><a href="ftp://ftp.solgenomics.net/genomes/Capsicum_annuum/">Download the Genome Sequence</a></li>
 284           </ul>
 285         </div>
 286
 287         </div>
 288       </div>
 289
 290       <div class="item">
 291         <div style="background:url(/documents/img/homepage_carousel/carousel_eggplant.jpg) center center; background-size:cover;" class="slider-size">
 292           <div class="carousel-sgn-caption">
 293               <h3><a href="/organism/Solanum_melongena/genome">Eggplant Genome</a></h3>
 294               <p><a href="http://dnaresearch.oxfordjournals.org/content/21/6/649" target="_blank">Draft Genome Sequence of Eggplant (<i>Solanum melongena L.</i>)</a></p>
 295           </div>
 296
 297           <div class="carousel-sgn-links">
 298             <ul>
 299               <li><a href="/tools/blast?db_id=248">Find sequences by similarity</a></li>
 300               <li><a href="ftp://ftp.solgenomics.net/genomes/Solanum_melongena/">Download the annotations</a></li>
 301               <li><a href="ftp://ftp.solgenomics.net/genomes/Solanum_melongena/">Download the Genome Sequence</a></li>
 302             </ul>
 303           </div>
 304
 305         </div>
 306       </div>
 307
 308
 309
 310     </div>
 311
 312     <!-- Left and right controls -->
 313     <!-- <a id="prev_slide" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 314       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 315       <span class="sr-only">Previous</span>
 316     </a>
 317     <a  id="next_slide" class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 318       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 319       <span class="sr-only">Next</span>
 320     </a> -->
 321   </div>
 322
 323