Team:Imperial College/Templates/Slideshow

From 2013.igem.org

Revision as of 01:22, 26 August 2013 by Btb11 (Talk | contribs)

This is a copy & paste template, so not strictly a template in the wiki sense. Copy and paste the section below, which will include the slideshow on your page.

Reference

  • jcarousel-container: This is an invisible box which includes the whole slideshow (red border in the example)
  • jcarousel: This is the actual slideshow-container (blue border in the example).
  • jcarousel-slides: This is a massively wide box containing the slides. It's best not to modify this.
  • jcarousel-slide: Copy+paste these ones to add more slides.
  • jcarousel-prev & -next: Containers for the "Next" and "Prev" buttons.

If you wanted a wider slideshow: Change the width property in the style of jcarousel-container (and adjust jcarousel-slide if needed).

If you wanted a taller slideshow: Change the height property in the style of jcarousel and jcarousel-slide. Then change the 'top' property of the jcarousel-prev and -next styles. As a rule of thumb, the number for 'top' should be half the height you gave to jcarousel, minus 4 (which is due to 20px padding from jcarousel-container and 48px total icon height).

Copy & Paste

This makes:

{{{pic1}}}
{{{pic2}}}
{{{pic3}}}
prev
next 

<html>
<div class="jcarousel-container">
  <div class="jcarousel">
    <div class="jcarousel-slides">
      <div class="jcarousel-slide">
        {{{pic1}}}
      </div>     
      <div class="jcarousel-slide">
        {{{pic2}}}
      </div>
      <div class="jcarousel-slide">
        {{{pic3}}}
      </div>
    </div>
  </div>
  <div class="jcarousel-prev" onclick="$('.jcarousel').jcarousel('scroll', '-=1');">
    <img src="https://static.igem.org/mediawiki/2013/b/b2/Arrow_left.png" alt="prev" width="48">
  </div>
  <div class="jcarousel-next" onclick="$('.jcarousel').jcarousel('scroll', '+=1');">
    <img src="https://static.igem.org/mediawiki/2013/4/4a/Arrow_right.png" alt="next" width="48">
  </div>
</div>
</div>

<style type="text/css">
.jcarousel-container { position: relative;
    padding: 20px 48px;
    width: 600px;
}
.jcarousel { position: relative; overflow: hidden;
    height: 100px;
}
.jcarousel-slides { width: 20000em; position: absolute; list-style: none; margin: 0; padding: 0; }
.jcarousel-slide{ float: left;
    width: 600px;
    height: 100px;
}
.jcarousel-prev, .jcarousel-next { position: absolute; cursor: pointer;
    height: 48px;
    width: 48px;
    top: 43px;
}
.jcarousel-prev { left: 0px; }
.jcarousel-next { right: 0px; }
</style>

<script type="text/javascript" src="https://2013.igem.org/wiki/index.php?title=User:Btb11/jcarousel.js&action=raw&ctype=text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('.jcarousel').jcarousel({
    wrap:'circular'
  });
});
</script>
</html>
Retrieved from "http://2013.igem.org/Team:Imperial_College/Templates/Slideshow"