Team:Imperial College/Templates/Slideshow

From 2013.igem.org

(Difference between revisions)

Revision as of 00:05, 26 August 2013

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.

How to use

You need this code once on your page, even if you want several slideshows:

{{:Team:Imperial_College/Templates/Slideshow}}

Now for each 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

The actual slideshow won't work here because of the way wiki works, but it should work on the including page.

{{{pic1}}}

{{{pic2}}}

{{{pic3}}}

@@ Line 128: / Line 128: @@
      wrap:'circular'
    });
-   $('.jcarousel-prev').click(function(){ $('.jcarousel').eq( $(this).index() ).jcarousel('scroll', '-=1'); });
+   $('.jcarousel-prev').click(function(){ $('.jcarousel').eq( $('.jcarousel').index(this) ).jcarousel('scroll', '-=1'); });
-   $('.jcarousel-next').click(function(){ $('.jcarousel').eq( $(this).index() ).jcarousel('scroll', '+=1'); });
+   $('.jcarousel-next').click(function(){ $('.jcarousel').eq( $('.jcarousel').index(this) ).jcarousel('scroll', '+=1'); });
 });
 </script>
 </html>