Team:Imperial College/Templates/Slideshow

From 2013.igem.org

(Difference between revisions)
(v1)
Line 3: Line 3:
==How to use==
==How to use==
 +
You need this code '''once''' on your page, even if you want several slideshows:
 +
<pre>{{:Team:Imperial_College/Templates/Slideshow}}</pre>
 +
 +
Now for each slideshow, insert the following code and modify as required:
 +
 +
<pre>
 +
<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>
 +
</pre>
 +
 +
==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. <tt>style="width:800px"</tt>.
 +
 +
If you wanted a '''taller slideshow''': Add the 'height' property to the style in jcarousel and in each jcarousel-slide. E.g. <tt>style="height:400px"</tt>. Then add the 'top' property to the 'style' in jcarousel-prev and -next. E.g. <tt>style="top:196px"</tt>. 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==
 +
<html>
 +
<div class="jcarousel-container" style="border:1px solid red;">
 +
  <div class="jcarousel" style="border:1px solid blue;">
 +
    <div class="jcarousel-slides" style="border:1px solid black;">
 +
      <div class="jcarousel-slide" style="background-color:#a33">
 +
        {{{pic1}}}
 +
      </div>   
 +
      <div class="jcarousel-slide" style="background-color:#3a3">
 +
        {{{pic2}}}
 +
      </div>
 +
      <div class="jcarousel-slide" style="background-color:#33a">
 +
        {{{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>
</noinclude>
</noinclude>
<html>
<html>
Line 9: Line 77:
.jcarousel-container {
.jcarousel-container {
     position: relative;
     position: relative;
-
     padding: 20px 40px;
+
     padding: 20px 48px;
     width: 600px;
     width: 600px;
}
}
Line 31: Line 99:
     float: left;
     float: left;
     width: 600px;
     width: 600px;
 +
    height: 100px;
}
}
Line 46: Line 115:
.jcarousel-next {
.jcarousel-next {
     /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
     /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
-
     right: 5px;
+
     right: 0px;
     top: 43px;
     top: 43px;
}
}
Line 57: Line 126:
     wrap:'circular'
     wrap:'circular'
   });
   });
 +
  $('.jcarousel-prev').click(function(){ $('.jcarousel').jcarousel('scroll', '-=1'); });
 +
  $('.jcarousel-next').click(function(){ $('.jcarousel').jcarousel('scroll', '+=1'); });
 +
});
});
</script>
</script>
</html>
</html>

Revision as of 23:22, 25 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

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

Retrieved from "http://2013.igem.org/Team:Imperial_College/Templates/Slideshow"