mason/homepage/carousel.mas

   1 <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
   2
   3     <!-- Indicators -->
   4     <ol class="carousel-indicators" style="display:none">
   5       <li data-target="#myCarousel" data-slide-to="0"></li>
   6       <li data-target="#myCarousel" data-slide-to="1"></li>
   7       <li data-target="#myCarousel" data-slide-to="2"></li>
   8       <li data-target="#myCarousel" data-slide-to="3"></li>
   9       <li data-target="#myCarousel" data-slide-to="4"></li>
  10       <li data-target="#myCarousel" data-slide-to="5"></li>
  11     </ol>
  12
  13     <!-- Wrapper for slides -->
  14     <div class="carousel-inner" role="listbox">
  15
  16
  17       <div class="item">
  18         <div style="background:url(/documents/img/homepage_carousel/varitome.jpeg) center center; background-size:cover;" class="slider-size">
  19           <div class="carousel-sgn-caption" style="opacity: 0.95; background-color: #efefef">
  20             <a href="/projects/varitome/" target="_blank" style="color: #00426c">
  21               <h3>The Varitome Project</h3>
  22               <p>Exploitation of genetic and epigenetic variation in the regulation of tomato fruit quality traits</p>
  23             </a>
  24           </div>
  25         </div>
  26       </div>
  27
  28       <div class="item">
  29         <div style="background:url(/documents/img/homepage_carousel/5.jpg) center center; background-size:cover;" class="slider-size">
  30           <div class="carousel-sgn-caption">
  31             <h3><a href="/organism/Solanum_lycopersicum/genome">Tomato Genome</a></h3>
  32             <p><a href="/organism/Solanum_lycopersicum/genome">The new Tomato Genome assembly (SL3.0) and annotations (ITAG3.0) are now available on SGN</a></p>
  33             <!--<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> -->
  34           </div>
  35
  36           <div class="carousel-sgn-links">
  37             <ul class="sgn_sm_list">
  38               <a href="/jbrowse_solgenomics/?data=data/json/SL3.0"><li>Browse the tomato genome</li></a>
  39               <a href="/tools/blast?db_id=283"><li>Find sequences by similarity</li></a>
  40               <!--<a href="http://vigs.solgenomics.net"><li>Design VIGS constructs</li></a> -->
  41               <a href="ftp://ftp.solgenomics.net/genomes/Solanum_lycopersicum/annotation/ITAG3.0_release/"><li>Download the annotations</li></a>
  42               <a href="ftp://ftp.solgenomics.net/genomes/Solanum_lycopersicum/assembly/build_3.00/"><li>Download the Genome Sequence</li></a>
  43             </ul>
  44           </div>
  45         </div>
  46       </div>
  47
  48
  49       <div class="item">
  50         <div style="background:url(/documents/img/homepage_carousel/3.jpg) center center; background-size:cover;" class="slider-size">
  51         <div class="carousel-sgn-caption">
  52             <h3><a href="/organism/Capsicum_annuum/genome">Pepper Sps. Genomes</a></h3>
  53             <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>
  54         </div>
  55
  56         <div class="carousel-sgn-links">
  57           <ul class="sgn_sm_list">
  58             <a href="/jbrowse_solgenomics/?data=data%2Fjson%2FPepper.v.1.55"><li>Browse the pepper genome</li></a>
  59             <a href="/tools/blast?db_id=217"><li>Find sequences by similarity</li></a>
  60             <a href="ftp://ftp.solgenomics.net/genomes/Capsicum_annuum/"><li>Download the annotations</li></a>
  61             <a href="ftp://ftp.solgenomics.net/genomes/Capsicum_annuum/"><li>Download the Genome Sequence</li></a>
  62           </ul>
  63         </div>
  64
  65         </div>
  66       </div>
  67
  68       <div class="item">
  69         <div style="background:url(/documents/img/homepage_carousel/carousel_benth.jpeg) center center; background-size:cover;" class="slider-size">
  70         <div class="carousel-sgn-caption">
  71             <h3><a href="/organism/Nicotiana_benthamiana/genome"><i>N. benthamiana</i> Genome</a></h3>
  72             <p><a href="http://apsjournals.apsnet.org/doi/abs/10.1094/MPMI-06-12-0148-TA" target="_blank">A draft genome sequence of <i>Nicotiana benthamiana</i> to enhance molecular plant-microbe biology research</a></p>
  73         </div>
  74
  75         <div class="carousel-sgn-links">
  76           <ul class="sgn_sm_list">
  77             <a href="http://bti.cornell.edu/research/projects/nicotiana-benthamiana/"><li>The <i>N. benthamiana</i> sequencing project</li></a>
  78             <a href="/jbrowse_solgenomics/?data=data%2Fjson%2FNiben1.0.1&loc=Niben101Scf00005"><li>Browse the genome</li></a>
  79             <a href="/tools/blast/?db_id=266"><li>Find sequences by similarity</li></a>
  80             <a href="http://vigs.solgenomics.net"><li>Design VIGS constructs</li></a>
  81             <a href="ftp://ftp.solgenomics.net/genomes/Nicotiana_benthamiana"><li>Downloads</li></a>
  82           </ul>
  83         </div>
  84
  85         </div>
  86       </div>
  87
  88
  89       <div class="item">
  90         <div style="background:url(/documents/img/homepage_carousel/carousel_petunia.jpeg) center center; background-size:cover;" class="slider-size">
  91         <div class="carousel-sgn-caption">
  92             <h3><a href="http://www.nature.com/articles/nplants201674" target="_blank">Petunia Sps. Genomes</a></h3>
  93             <p><a href="http://www.nature.com/articles/nplants201674" target="_blank">Insight into the evolution of the Solanaceae from the parental genomes of Petunia hybrida</a></p>
  94         </div>
  95
  96         <div class="carousel-sgn-links">
  97           <ul class="sgn_sm_list">
  98             <a href="/jbrowse_solgenomics/?data=data%2Fjson%2FPeaxi162&loc=Peaxi162Scf00001"><li>Browse the <i>P. axillaris</i> genome</li></a>
  99             <a href="/jbrowse_solgenomics/?data=data%2Fjson%2FPeinf101&loc=Peinf101Scf00001"><li>Browse the <i>P. inflata</i> genome</li></a>
 100             <a href="/tools/blast/?db_id=270"><li>Find sequences by similarity</li></a>
 101             <a href="http://vigs.solgenomics.net"><li>Design VIGS constructs</li></a>
 102             <a href="ftp://ftp.solgenomics.net/genomes/Petunia_axillaris"><li><i>P. axillaris</i> Downloads</li></a>
 103             <a href="ftp://ftp.solgenomics.net/genomes/Petunia_inflata"><li><i>P. inflata</i> Downloads</li></a>
 104           </ul>
 105         </div>
 106
 107         </div>
 108       </div>
 109
 110
 111       <!-- <div class="item">
 112           <div style="background:url(/documents/img/homepage_carousel/carousel_slideshare.png) center center; background-size:cover;" class="slider-size">
 113             <div class="carousel-sgn-caption">
 114               <a href="http://www.slideshare.net/solgenomics" target="_blank">
 115                 <h3>SGN SlideShare</h3>
 116                 <p>Slides from conferences and courses</p>
 117               </a>
 118             </div>
 119
 120             <div class="carousel-sgn-links">
 121               <ul class="sgn_sm_list">
 122                 <a href="http://www.slideshare.net/solgenomics/sol-meeting-2015-sgn-workshop-introduction?related=1" target="_blank"><li>SOL Meeting 2015</li></a>
 123                 <a href="http://www.slideshare.net/solgenomics/sgn-introduction-to-unix-commandline-2015-part-1?related=1" target="_blank"><li>Introduction to UNIX Command-line</li></a>
 124               </ul>
 125             </div>
 126
 127           </div>
 128         </a>
 129       </div> -->
 130
 131
 132       <div class="item">
 133           <div style="background:url(/documents/img/homepage_carousel/sol2019.jpg) center center; background-size:cover;" class="slider-size">
 134             <div class="carousel-sgn-caption" style="opacity: 0.95; background-color: #efefef">
 135               <a href="https://www.sol2019.org/" target="_blank" style="color: #00426c">
 136                 <!-- <h3>Solcuc2017</h3> -->
 137                 <h3>The 16th Solanaceae Conference</h3>
 138                 <p>September 15th - 19th 2019, Jerusalem, Israel</p>
 139               </a>
 140             </div>
 141
 142             <div class="carousel-sgn-links" style="background-color: #efefef">
 143               <ul class="sgn_sm_list">
 144                 <a href="https://www.sol2019.org/registration" target="_blank"><li style="color: #00426c">Registration</li></a>
 145                 <a href="https://www.sol2019.org/program-outline" target="_blank"><li style="color: #00426c">Program outline</li></a>
 146                 <a href="https://www.sol2019.org/general-information" target="_blank"><li style="color: #00426c">Venue and Information</li></a>
 147               </ul>
 148             </div>
 149
 150           </div>
 151         </a>
 152       </div>
 153
 154
 155 </div><!-- Wrapper for slides end-->
 156
 157   <div class="progress" style="height:5px">
 158     <hr class="transition-timer-carousel-progress-bar" />
 159   </div>
 160
 161   <!-- Left and right controls -->
 162   <a id="prev_slide" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="color:white;">
 163     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 164     <span class="sr-only">Previous</span>
 165   </a>
 166   <a  id="next_slide" class="right carousel-control" href="#myCarousel" role="button" data-slide="next" style="color:white;">
 167     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 168     <span class="sr-only">Next</span>
 169   </a>
 170
 171 </div>
 172
 173 <ul id="btn_carousel_indicators" class="nav nav-pills nav-justified sgn_carousel_button_group">
 174     <li><a data-target="#myCarousel" data-slide-to="0">Varitome</a></li>
 175     <li class="active"><a data-target="#myCarousel" data-slide-to="1">Tomato</a></li>
 176   <li><a data-target="#myCarousel" data-slide-to="2">Pepper</a></li>
 177   <li><a data-target="#myCarousel" data-slide-to="3"><i>N. benthamiana</i></a></li>
 178   <li><a data-target="#myCarousel" data-slide-to="4">Petunia</a></li>
 179   <li><a data-target="#myCarousel" data-slide-to="5">SOL Meeting</a></li>
 180   <!-- <li><a data-target="#myCarousel" data-slide-to="6">5th ISTD</a></li> -->
 181 </ul>
 182
 183 <style>
 184         .sgn_carousel_button_group {
 185                 margin-left: 10px;
 186                 margin-top: 10px;
 187                 width:98% !important;
 188         }
 189
 190         .slider-size {
 191           height: 400px; /* This is your slider height */
 192         }
 193         .carousel {
 194           max-width:98%;
 195           /*width:100%;*/
 196           margin:0 auto; /* center your carousel if other than 100% */
 197           margin-bottom:0px;
 198         }
 199
 200         .carousel-sgn-caption {
 201           position:relative;
 202           float: left;
 203           max-width:49%;
 204           min-width:35%;
 205           padding: 0px 10px 0px 10px;
 206           margin-top:20px;
 207
 208     color: #444;
 209           font-size: 16px;
 210           text-decoration: none;
 211           background-color: #fff;
 212           opacity: 0.80;
 213           filter: alpha(opacity=80); /* For IE8 and earlier */
 214           border-top-right-radius:12px;
 215           border-bottom-right-radius:12px;
 216         }
 217
 218         .carousel-sgn-caption a {
 219     color: #444;
 220           text-decoration: none;
 221         }
 222
 223         .carousel-sgn-caption a:hover {
 224           color: #00426c;
 225           text-decoration: none;
 226         }
 227
 228         .carousel-sgn-links {
 229           position:absolute;
 230           min-width:35%;
 231           max-width:49%;
 232           margin-top:20px;
 233           right:0px;
 234
 235           color: #000;
 236           font-size: 16px;
 237           text-decoration: none;
 238           background-color: #fff;
 239           opacity: 0.85;
 240           filter: alpha(opacity=85); /* For IE8 and earlier */
 241           border-top-left-radius:12px;
 242           border-bottom-left-radius:12px;
 243         }
 244
 245         .carousel-sgn-links ul {
 246           padding: 10px 0px 0px 15px;
 247           list-style-type: none;
 248         }
 249
 250         .carousel-sgn-links a {
 251           color: #000;
 252           text-decoration: none;
 253         }
 254
 255         .carousel-sgn-links a:hover {
 256           color: #666;
 257           text-decoration: none;
 258         }
 259
 260   .sgn_sm_list {
 261     color: #444;
 262     width: 100%;
 263     padding: 0px;
 264     padding-left: 5px;
 265   }
 266
 267   .sgn_sm_list li {
 268     color: #444;
 269     width: 100%;
 270     padding: 0px;
 271     padding-left: 5px;
 272     padding-right: 5px;
 273   }
 274
 275   .sgn_sm_list li:hover {
 276     color: #00426c;
 277   }
 278
 279   #btn_carousel_indicators {
 280     cursor: pointer;
 281   }
 282
 283         @media (min-width: 0px) and (max-width: 768px) {
 284
 285     .carousel-sgn-caption {
 286       margin-top:0px;
 287       width: 100%;
 288       max-width: 100%;
 289       border-radius:0px;
 290       float: none;
 291       margin-bottom:0px;
 292       opacity: 0.90;
 293     }
 294
 295     .carousel-sgn-links {
 296       background-color: #efefef;
 297       max-width: 100%;
 298       width: 100%;
 299       border-radius:0px;
 300       bottom:0px;
 301       opacity: 0.9;
 302     }
 303
 304         .carousel-sgn-links ul {
 305           padding: 0px;
 306       margin-bottom: 0px;
 307         }
 308
 309     .sgn_sm_list li {
 310       color: #00426c;
 311       width: 100%;
 312       position: relative;
 313       display: block;
 314       padding: 0px;
 315       padding-left: 5px;
 316       border: 1px solid #ddd;
 317     }
 318
 319     .sgn_sm_list li:hover {
 320       color: #444;
 321           background-color: #fff;
 322       opacity: 1;
 323     }
 324
 325 /*    .carousel-indicators {
 326       bottom:0px;
 327       margin-bottom: 0px;
 328       width:100%;
 329       left:auto;
 330       margin-left:auto;
 331     }
 332 */
 333     .nav-pills>li>a {
 334       border-radius: 4px;
 335       border: 1px solid #ccc;
 336     }
 337
 338         .sgn_carousel_button_group {
 339       margin-left: 5px;
 340                 margin-top: 5px;
 341                 width:98% !important;
 342         }
 343
 344         }
 345
 346         .carousel-control {
 347                 height:100px;
 348                 margin-top:170px
 349         }
 350
 351   .transition-timer-carousel-progress-bar {
 352       height: 4px;
 353       background-color: #337ab7;
 354       width: 0;
 355       margin: 0 0 0 0;
 356       border: none;
 357       z-index: 11;
 358       position: relative;
 359       border-radius: 0px;
 360   }
 361
 362   .progress {
 363     margin-top: 5px;
 364     border-radius: 0px;
 365   }
 366
 367 </style>
 368
 369 <!--
 370 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 371 -->
 372
 373 <script>
 374
 375   jQuery(document).ready(function() {
 376
 377     var $item = jQuery('.carousel .item');
 378     // var $wHeight = $(window).height();
 379
 380     var numberofSlides = jQuery('.item').length;
 381     var randomSlide = Math.floor((Math.random() * numberofSlides));
 382     var currentSlide = randomSlide;
 383
 384     jQuery('.carousel-indicators li').each(function(){
 385       var $slideValue = jQuery(this).attr('data-slide-to');
 386       if (randomSlide == $slideValue) {
 387         jQuery(this).addClass('active');
 388         $item.eq($slideValue).addClass('active');
 389       } else {
 390         jQuery(this).removeClass('active');
 391         $item.eq($slideValue).removeClass('active');
 392       }
 393     });
 394
 395     jQuery('#btn_carousel_indicators a').each(function(){
 396       var $slideValue = jQuery(this).attr('data-slide-to');
 397       // alert("currentSlide: "+$currentSlide+", slideValue: "+$slideValue)
 398       if (randomSlide == $slideValue) {
 399         jQuery(this).parent().addClass('active');
 400       } else {
 401         jQuery(this).parent().removeClass('active');
 402       }
 403     });
 404
 405     jQuery('#myCarousel').bind('slid.bs.carousel', function (e) {
 406       jQuery('.carousel-indicators li').each(function(){
 407         if (jQuery(this).hasClass('active')) {
 408           currentSlide = jQuery(this).attr('data-slide-to');;
 409         }
 410       });
 411
 412       jQuery('#btn_carousel_indicators li').removeClass('active');
 413
 414       jQuery('#btn_carousel_indicators a').each(function(){
 415         var $slideValue = jQuery(this).attr('data-slide-to');
 416         // alert("currentSlide: "+currentSlide+", slideValue: "+$slideValue)
 417         if(currentSlide == $slideValue) {
 418           jQuery(this).parent().addClass('active');
 419         }
 420       });
 421
 422     });
 423
 424     // touch screen
 425                 //     $("#myCarousel").swiperight(function() {
 426                 //       $("#myCarousel").carousel('prev');
 427                 //     });
 428                 //
 429                 // $("#myCarousel").swipeleft(function() {
 430                 //       $("#myCarousel").carousel('next');
 431                 //     });
 432
 433
 434
 435
 436   //progress bar
 437   var percent = 0,
 438         interval = 50,//time showing each slide
 439     $bar = jQuery('.transition-timer-carousel-progress-bar'),
 440         $crsl = jQuery('#myCarousel');
 441
 442     $crsl.carousel({//initialize
 443       interval: false,
 444       pause: true
 445     }).on('slide.bs.carousel', function (){percent = 0;});//restart progress bar on new slide
 446
 447         function progressBarCarousel() {
 448       $bar.css({width:percent+'%'});
 449                 percent = percent +0.5;
 450                 if (percent>=100) {
 451                         percent=0;
 452                         $crsl.carousel('next');
 453                 }
 454         }
 455         var barInterval = setInterval(progressBarCarousel, interval);//set interval to progressBarCarousel function
 456     if (!(/Mobi/.test(navigator.userAgent))) {//tests if it isn't mobile, progress bar stop on mouse over slide
 457       $crsl.hover(function(){
 458             clearInterval(barInterval);
 459           },
 460           function(){
 461             barInterval = setInterval(progressBarCarousel, interval);
 462           }
 463       );
 464     }
 465
 466
 467
 468
 469     jQuery(".ui-loading").css("display","none");
 470     jQuery(".ui-loader").css("display","none");
 471   });
 472 </script>