User:Btb11

From 2013.igem.org

(Difference between revisions)
(finally, included script working)
Line 1: Line 1:
Hi, I'm Bene. The Imperial iGEM team 2013 has asked me for some advice with web development, so here I am!
Hi, I'm Bene. The Imperial iGEM team 2013 has asked me for some advice with web development, so here I am!
-
 
-
 
<html>
<html>
-
<div id="jcarousel">
+
<div class="jcarousel-container">
-
   <div>
+
   <div class="jcarousel">
-
     <p>Test 1</p>
+
     <div class="jcarousel-slides">
-
    <p>Test 2</p>
+
      <div class="jcarousel-slide">
-
    <p>Test 3</p>
+
        <div class="jcarousel-pic">bs iframe width="975" height="548" src="//www.youtube.com/embed/RfiQYRn7fBg?rel=0" frameborder="0" allowfullscreen></iframe></div>
-
     <p>Test 4</p>
+
        <div class="jcarousel-caption">Put text here</div>
 +
      </div>      
 +
      <div class="jcarousel-slide">
 +
        <div class="jcarousel-pic"><img src="https://static.igem.org/mediawiki/2013/4/44/Mountains4.png" style="width: 400px;"></div>
 +
        <div class="jcarousel-caption">Europe's Newest Mountain, Mount Wasted</div>
 +
      </div>
 +
      <div class="jcarousel-slide">
 +
        <div class="jcarousel-pic">bs iframe width="975" height="548" src="//www.youtube.com/embed/RfiQYRn7fBg?rel=0" frameborder="0" allowfullscreen></iframe></div>
 +
        <div class="jcarousel-caption">Put text here</div>
 +
      </div>
 +
    </div>
   </div>
   </div>
 +
  <div class="jcarousel-prev" onclick="$('.jcarousel').jcarousel('scroll', '-=1');"><</div>
 +
  <div class="jcarousel-next" onclick="$('.jcarousel').jcarousel('scroll', '+=1');">></div>
</div>
</div>
 +
 +
<style type="text/css">
 +
.jcarousel-container {
 +
    position: relative;
 +
    border:1px solid black;
 +
    padding: 20px 40px;
 +
    width: 600px;
 +
}
 +
 +
.jcarousel {
 +
    position: relative;
 +
    overflow: hidden;
 +
    border:1px solid red;
 +
    /* You need at least a height, adjust this to your needs */
 +
    height: 100px;
 +
}
 +
 +
.jcarousel-slides {
 +
    width: 20000em;
 +
    position: absolute;
 +
    list-style: none;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 +
.jcarousel-slide{
 +
    float: left;
 +
}
 +
.jcarousel-pic{
 +
}
 +
.jcarousel-caption{
 +
}
 +
 +
.jcarousel-prev, .jcarousel-next {
 +
    cursor: pointer;
 +
    height: 32px;
 +
    position: absolute;
 +
    width: 32px;
 +
}
 +
.jcarousel-prev {
 +
    /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
 +
    left: 5px;
 +
    top: 43px;
 +
}
 +
.jcarousel-next {
 +
    /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
 +
    right: 5px;
 +
    top: 43px;
 +
}
 +
</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" src="https://2013.igem.org/wiki/index.php?title=User:Btb11/jcarousel.js&action=raw&ctype=text/javascript"></script>
<script type="text/javascript">
<script type="text/javascript">
-
  //alert($('#jcarousel').text());
+
$(function(){
 +
  $('.jcarousel').jcarousel({
 +
    wrap:'circular'
 +
  });
 +
});
</script>
</script>
</html>
</html>

Revision as of 19:18, 24 August 2013

Hi, I'm Bene. The Imperial iGEM team 2013 has asked me for some advice with web development, so here I am!

bs iframe width="975" height="548" src="//www.youtube.com/embed/RfiQYRn7fBg?rel=0" frameborder="0" allowfullscreen>
Put text here
Europe's Newest Mountain, Mount Wasted
bs iframe width="975" height="548" src="//www.youtube.com/embed/RfiQYRn7fBg?rel=0" frameborder="0" allowfullscreen>
Put text here
<
>

Retrieved from "http://2013.igem.org/User:Btb11"