Team:Imperial College/Templates/Slideshow

From 2013.igem.org

(Difference between revisions)

Revision as of 00:13, 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

{{{pic1}}}

{{{pic2}}}

{{{pic3}}}

@@ Line 1: / Line 1: @@
 <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 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==
-You need this code '''once''' on your page, even if you want several slideshows:
+Copy and paste this:
 <pre>{{:Team:Imperial_College/Templates/Slideshow}}</pre>
-Now for each slideshow, insert the following code and modify as required:
+Now for the slideshow, insert the following code and modify as required:
 <pre>
@@ Line 48: / Line 50: @@
 ==Example==
-The actual slideshow won't work here because of the way wiki works, but it should work on the including page.
 <html>
 <div class="jcarousel-container" style="border:1px solid red;">
@@ Line 128: / Line 128: @@
      wrap:'circular'
    });
-   $('.jcarousel-prev').click(function(){ $('.jcarousel').eq( $('.jcarousel').index(this) ).jcarousel('scroll', '-=1'); });
+   $('.jcarousel-prev').click(function(){
-   $('.jcarousel-next').click(function(){ $('.jcarousel').eq( $('.jcarousel').index(this) ).jcarousel('scroll', '+=1'); });
+    $('.jcarousel').jcarousel('scroll', '-=1');
+  });
+   $('.jcarousel-next').click(function(){
+    $('.jcarousel').jcarousel('scroll', '+=1');
+  });
 });
 </script>
 </html>