Team:Imperial College/Templates/Slideshow

From 2013.igem.org

(Difference between revisions)
m (→Copy & Paste)
 
(4 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==
-
You need this code '''once''' on your page, even if you want several slideshows:
+
* '''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.
-
<pre>{{:Team:Imperial_College/Templates/Slideshow}}</pre>
+
If you wanted a '''wider slideshow''': Change the width property in the style of jcarousel-container (and adjust jcarousel-slide if needed).
-
Now for each slideshow, insert the following code and modify as required:
+
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).
-
<pre>
+
==Copy & Paste==
 +
 
 +
This makes (less the borders, removed them in the copy&paste bit):
<html>
<html>
-
<div class="jcarousel-container" style="">
+
<div class="jcarousel-container">
-
   <div class="jcarousel" style="">
+
   <div class="jcarousel">
-
     <div class="jcarousel-slides" style="">
+
     <div class="jcarousel-slides">
-
       <div class="jcarousel-slide" style="">
+
       <div class="jcarousel-slide">
         {{{pic1}}}
         {{{pic1}}}
       </div>     
       </div>     
-
       <div class="jcarousel-slide" style="">
+
       <div class="jcarousel-slide">
         {{{pic2}}}
         {{{pic2}}}
       </div>
       </div>
-
       <div class="jcarousel-slide" style="">
+
       <div class="jcarousel-slide">
         {{{pic3}}}
         {{{pic3}}}
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
-
   <div class="jcarousel-prev" style="">
+
   <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" style="">
+
     <img src="https://static.igem.org/mediawiki/2013/b/b2/Arrow_left.png" alt="prev" width="48">
   </div>
   </div>
-
   <div class="jcarousel-next" style="">
+
   <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" style="">
+
     <img src="https://static.igem.org/mediawiki/2013/4/4a/Arrow_right.png" alt="next" width="48">
   </div>
   </div>
</div>
</div>
</div>
</div>
-
</html>
 
-
</pre>
 
-
==Reference==
+
<style type="text/css">
-
* '''jcarousel-container''': This is an invisible box which includes the whole slideshow (red border in the example)
+
.jcarousel-container { position: relative;
-
* '''jcarousel''': This is the actual slideshow-container (blue border in the example).
+
    padding: 20px 48px;
-
* '''jcarousel-slides''': This is a massively wide box containing the slides. It's best not to modify this.
+
    width: 600px;
-
* '''jcarousel-slide''': Copy+paste these ones to add more slides.
+
    border:1px solid blue;
-
* '''jcarousel-prev''' & '''-next''': Containers for the "Next" and "Prev" buttons.
+
}
 +
.jcarousel { position: relative; overflow: hidden;
 +
    height: 100px;
 +
    border:1px solid red;
 +
}
 +
.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>
-
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>.
+
<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">
-
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).
+
$(function(){
-
 
+
  $('.jcarousel').jcarousel({
-
==Example==
+
    wrap:'circular'
-
The actual slideshow won't work here because of the way wiki works, but it should work on the including page.
+
  });
 +
});
 +
</script>
 +
</html>
 +
<pre>
<html>
<html>
-
<div class="jcarousel-container" style="border:1px solid red;">
+
<div class="jcarousel-container">
-
   <div class="jcarousel" style="border:1px solid blue;">
+
   <div class="jcarousel">
-
     <div class="jcarousel-slides" style="border:1px solid black;">
+
     <div class="jcarousel-slides">
-
       <div class="jcarousel-slide" style="background-color:#a33">
+
       <div class="jcarousel-slide">
         {{{pic1}}}
         {{{pic1}}}
       </div>     
       </div>     
-
       <div class="jcarousel-slide" style="background-color:#3a3">
+
       <div class="jcarousel-slide">
         {{{pic2}}}
         {{{pic2}}}
       </div>
       </div>
-
       <div class="jcarousel-slide" style="background-color:#33a">
+
       <div class="jcarousel-slide">
         {{{pic3}}}
         {{{pic3}}}
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
-
   <div class="jcarousel-prev" style="">
+
   <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" style="">
+
     <img src="https://static.igem.org/mediawiki/2013/b/b2/Arrow_left.png" alt="prev" width="48">
   </div>
   </div>
-
   <div class="jcarousel-next" style="">
+
   <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" style="">
+
     <img src="https://static.igem.org/mediawiki/2013/4/4a/Arrow_right.png" alt="next" width="48">
   </div>
   </div>
</div>
</div>
</div>
</div>
-
</html>
+
 
-
</noinclude>
+
-
<html>
+
<style type="text/css">
<style type="text/css">
-
.jcarousel-container {
+
.jcarousel-container { position: relative;
-
    position: relative;
+
     padding: 20px 48px;
     padding: 20px 48px;
     width: 600px;
     width: 600px;
}
}
-
 
+
.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;
}
}
-
 
+
.jcarousel-slides { width: 20000em; position: absolute; list-style: none; margin: 0; padding: 0; }
-
.jcarousel-slides {
+
.jcarousel-slide{ float: left;
-
    width: 20000em;
+
-
    position: absolute;
+
-
    list-style: none;
+
-
    margin: 0;
+
-
    padding: 0;
+
-
}
+
-
 
+
-
.jcarousel-slide{
+
-
    float: left;
+
     width: 600px;
     width: 600px;
     height: 100px;
     height: 100px;
}
}
-
 
+
.jcarousel-prev, .jcarousel-next { position: absolute; cursor: pointer;
-
.jcarousel-prev, .jcarousel-next {
+
-
    cursor: pointer;
+
     height: 48px;
     height: 48px;
-
    position: absolute;
 
     width: 48px;
     width: 48px;
-
}
 
-
.jcarousel-prev {
 
-
    /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
 
-
    left: 0px;
 
-
    top: 43px;
 
-
}
 
-
.jcarousel-next {
 
-
    /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
 
-
    right: 0px;
 
     top: 43px;
     top: 43px;
}
}
 +
.jcarousel-prev { left: 0px; }
 +
.jcarousel-next { right: 0px; }
</style>
</style>
Line 128: Line 127:
     wrap:'circular'
     wrap:'circular'
   });
   });
-
  $('.jcarousel-prev').click(function(){ $('.jcarousel').eq( $('.jcarousel').index(this) ).jcarousel('scroll', '-=1'); });
 
-
  $('.jcarousel-next').click(function(){ $('.jcarousel').eq( $('.jcarousel').index(this) ).jcarousel('scroll', '+=1'); });
 
-
 
});
});
</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"