Team:Imperial College/Templates/Slideshow

From 2013.igem.org

(Difference between revisions)
m (→Copy & Paste)
 
(9 intermediate revisions not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
-
This is a template for a slideshow. It's still under construction, but when finished there will be instructions on how to use it here.
+
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.
-
==How to use==
+
==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.
-
</noinclude>
+
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 (less the borders, removed them in the copy&paste bit):
<html>
<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">
<style type="text/css">
-
.jcarousel-container {
+
.jcarousel-container { position: relative;
-
    position: relative;
+
     padding: 20px 48px;
-
     padding: 20px 40px;
+
     width: 600px;
     width: 600px;
 +
    border:1px solid blue;
}
}
-
 
+
.jcarousel { position: relative; overflow: hidden;
-
.jcarousel {
+
-
    position: relative;
+
-
    overflow: hidden;
+
-
    /* You need at least a height, adjust this to your needs */
+
     height: 100px;
     height: 100px;
 +
    border:1px solid red;
}
}
-
 
+
.jcarousel-slides { width: 20000em; position: absolute; list-style: none; margin: 0; padding: 0; }
-
.jcarousel-slides {
+
.jcarousel-slide{ float: left;
-
    width: 20000em;
+
    width: 600px;
-
    position: absolute;
+
    height: 100px;
-
    list-style: none;
+
-
    margin: 0;
+
-
    padding: 0;
+
}
}
 +
.jcarousel-prev, .jcarousel-next { position: absolute; cursor: pointer;
 +
    height: 48px;
 +
    width: 48px;
 +
    top: 43px;
 +
}
 +
.jcarousel-prev { left: 0px; }
 +
.jcarousel-next { right: 0px; }
 +
</style>
-
.jcarousel-slide{
+
<script type="text/javascript" src="https://2013.igem.org/wiki/index.php?title=User:Btb11/jcarousel.js&action=raw&ctype=text/javascript"></script>
-
     float: left;
+
<script type="text/javascript">
 +
$(function(){
 +
  $('.jcarousel').jcarousel({
 +
    wrap:'circular'
 +
  });
 +
});
 +
</script>
 +
</html>
 +
 
 +
<pre>
 +
<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;
     width: 600px;
}
}
-
 
+
.jcarousel { position: relative; overflow: hidden;
-
.jcarousel-prev, .jcarousel-next {
+
     height: 100px;
-
    cursor: pointer;
+
-
    height: 32px;
+
-
     position: absolute;
+
-
    width: 32px;
+
}
}
-
.jcarousel-prev {
+
.jcarousel-slides { width: 20000em; position: absolute; list-style: none; margin: 0; padding: 0; }
-
    /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
+
.jcarousel-slide{ float: left;
-
    left: 5px;
+
    width: 600px;
-
     top: 43px;
+
     height: 100px;
}
}
-
.jcarousel-next {
+
.jcarousel-prev, .jcarousel-next { position: absolute; cursor: pointer;
-
     /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
+
     height: 48px;
-
     right: 5px;
+
     width: 48px;
     top: 43px;
     top: 43px;
}
}
 +
.jcarousel-prev { left: 0px; }
 +
.jcarousel-next { right: 0px; }
</style>
</style>
Line 60: Line 130:
</script>
</script>
</html>
</html>
 +
</pre>
 +
</noinclude>

Latest revision as of 01:23, 26 August 2013

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 (less the borders, removed them in the copy&paste bit):

{{{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"