"
Team:Imperial College/Templates/Slideshow
From 2013.igem.org
m |
|||
| Line 125: | Line 125: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(function(){ | $(function(){ | ||
| - | $('.jcarousel').jcarousel({ | + | /*$('.jcarousel').jcarousel({ |
wrap:'circular' | wrap:'circular' | ||
| - | }); | + | });*/ |
$('.jcarousel-prev').click(function(){ | $('.jcarousel-prev').click(function(){ | ||
$('.jcarousel').jcarousel('scroll', '-=1'); | $('.jcarousel').jcarousel('scroll', '-=1'); | ||
Revision as of 00:15, 26 August 2013
This is a template for a slideshow.
Note: This ready-made slideshow only works once on each page, contact User:Btb11 if you need more than one slideshow on a page.
How to use
Copy and paste this:
{{:Team:Imperial_College/Templates/Slideshow}}
Now for the slideshow, insert the following code and modify as required:
<html>
<div class="jcarousel-container" style="">
<div class="jcarousel" style="">
<div class="jcarousel-slides" style="">
<div class="jcarousel-slide" style="">
{{{pic1}}}
</div>
<div class="jcarousel-slide" style="">
{{{pic2}}}
</div>
<div class="jcarousel-slide" style="">
{{{pic3}}}
</div>
</div>
</div>
<div class="jcarousel-prev" style="">
<img src="https://static.igem.org/mediawiki/2013/b/b2/Arrow_left.png" alt="prev" width="48" style="">
</div>
<div class="jcarousel-next" style="">
<img src="https://static.igem.org/mediawiki/2013/4/4a/Arrow_right.png" alt="next" width="48" style="">
</div>
</div>
</div>
</html>
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: Add the 'width' property to the style in jcarousel-container and in each jcarousel-slide. E.g. style="width:800px".
If you wanted a taller slideshow: Add the 'height' property to the style in jcarousel and in each jcarousel-slide. E.g. style="height:400px". Then add the 'top' property to the 'style' in jcarousel-prev and -next. E.g. style="top:196px". 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 top and 48px total icon height).
Example
