Team:Bordeaux
From 2012.igem.org
(Difference between revisions)
ChristopheD (Talk | contribs) |
ChristopheD (Talk | contribs) |
||
Line 17: | Line 17: | ||
border: none; | border: none; | ||
} | } | ||
+ | |||
+ | p { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:80%; font-family:inherit; vertical-align:baseline;} | ||
+ | |||
+ | caption{ text-align:left; font-weight:normal; } | ||
+ | |||
Line 177: | Line 182: | ||
} | } | ||
- | + | #container { | |
- | + | width:580px; | |
- | + | padding:10px; | |
- | + | margin:0 auto; | |
- | + | position:relative; | |
- | + | z-index:0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | #example { | ||
+ | width:600px; | ||
+ | height:350px; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | #ribbon { | ||
+ | position:absolute; | ||
+ | top:-3px; | ||
+ | left:-15px; | ||
+ | z-index:500; | ||
+ | } | ||
+ | |||
+ | #frame { | ||
+ | position:absolute; | ||
+ | z-index:0; | ||
+ | width:739px; | ||
+ | height:341px; | ||
+ | top:-3px; | ||
+ | left:-80px; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Slideshow | ||
+ | */ | ||
+ | |||
+ | #slides { | ||
+ | position:absolute; | ||
+ | top:15px; | ||
+ | left:4px; | ||
+ | z-index:100; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Slides container | ||
+ | Important: | ||
+ | Set the width of your slides container | ||
+ | Set to display none, prevents content flash | ||
+ | */ | ||
+ | |||
+ | .slides_container { | ||
+ | width:570px; | ||
+ | overflow:hidden; | ||
+ | position:relative; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Each slide | ||
+ | Important: | ||
+ | Set the width of your slides | ||
+ | If height not specified height will be set by the slide content | ||
+ | Set to display block | ||
+ | */ | ||
+ | |||
+ | .slides_container div.slide { | ||
+ | width:570px; | ||
+ | height:270px; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | Next/prev buttons | ||
+ | */ | ||
+ | |||
+ | #slides .next,#slides .prev { | ||
+ | position:absolute; | ||
+ | top:107px; | ||
+ | left:-39px; | ||
+ | width:24px; | ||
+ | height:43px; | ||
+ | display:block; | ||
+ | z-index:101; | ||
+ | } | ||
+ | |||
+ | #slides .next { | ||
+ | left:585px; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Pagination | ||
+ | */ | ||
+ | |||
+ | .pagination { | ||
+ | margin:26px auto 0; | ||
+ | width:100px; | ||
+ | } | ||
+ | |||
+ | .pagination li { | ||
+ | float:left; | ||
+ | margin:0 1px; | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | .pagination li a { | ||
+ | display:block; | ||
+ | width:12px; | ||
+ | height:0; | ||
+ | padding-top:12px; | ||
+ | background-image:url(../img/pagination.png); | ||
+ | background-position:0 0; | ||
+ | float:left; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | .pagination li.current a { | ||
+ | background-position:0 -12px; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Caption | ||
+ | */ | ||
+ | |||
+ | .caption { | ||
+ | z-index:500; | ||
+ | position:absolute; | ||
+ | bottom:-35px; | ||
+ | left:0; | ||
+ | height:30px; | ||
+ | padding:5px 20px 0 20px; | ||
+ | background:#000; | ||
+ | background:rgba(0,0,0,.5); | ||
+ | width:540px; | ||
+ | font-size:1.3em; | ||
+ | line-height:1.33; | ||
+ | color:#fff; | ||
+ | border-top:1px solid #000; | ||
+ | text-shadow:none; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Footer | ||
+ | */ | ||
+ | |||
+ | #footer { | ||
+ | text-align:center; | ||
+ | width:580px; | ||
+ | margin-top:9px; | ||
+ | padding:4.5px 0 18px; | ||
+ | border-top:1px solid #dfdfdf; | ||
+ | } | ||
+ | |||
+ | #footer p { | ||
+ | margin:4.5px 0; | ||
+ | font-size:1.0em; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Anchors | ||
+ | */ | ||
+ | |||
+ | a:link,a:visited { | ||
+ | color:#599100; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | a:hover,a:active { | ||
+ | color:#599100; | ||
+ | text-decoration:underline; | ||
+ | } | ||
</style> | </style> | ||
Line 205: | Line 367: | ||
</div> | </div> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> | ||
+ | <script> | ||
+ | /* | ||
+ | * Slides, A Slideshow Plugin for jQuery | ||
+ | * Intructions: http://slidesjs.com | ||
+ | * By: Nathan Searles, http://nathansearles.com | ||
+ | * Version: 1.1.9 | ||
+ | * Updated: September 5th, 2011 | ||
+ | * | ||
+ | * Licensed under the Apache License, Version 2.0 (the "License"); | ||
+ | * you may not use this file except in compliance with the License. | ||
+ | * You may obtain a copy of the License at | ||
+ | * | ||
+ | * http://www.apache.org/licenses/LICENSE-2.0 | ||
+ | * | ||
+ | * Unless required by applicable law or agreed to in writing, software | ||
+ | * distributed under the License is distributed on an "AS IS" BASIS, | ||
+ | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
+ | * See the License for the specific language governing permissions and | ||
+ | * limitations under the License. | ||
+ | */ | ||
+ | (function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"https://static.igem.org/mediawiki/2012/4/42/Loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery) | ||
+ | </script> | ||
+ | <script> | ||
+ | $(function(){ | ||
+ | $('#slides').slides({ | ||
+ | preload: true, | ||
+ | preloadImage: 'https://static.igem.org/mediawiki/2012/4/42/Loading.gif', | ||
+ | play: 5000, | ||
+ | pause: 2500, | ||
+ | hoverPause: true, | ||
+ | animationStart: function(current){ | ||
+ | $('.caption').animate({ | ||
+ | bottom:-35 | ||
+ | },100); | ||
+ | if (window.console && console.log) { | ||
+ | // example return of current slide number | ||
+ | console.log('animationStart on slide: ', current); | ||
+ | }; | ||
+ | }, | ||
+ | animationComplete: function(current){ | ||
+ | $('.caption').animate({ | ||
+ | bottom:0 | ||
+ | },200); | ||
+ | if (window.console && console.log) { | ||
+ | // example return of current slide number | ||
+ | console.log('animationComplete on slide: ', current); | ||
+ | }; | ||
+ | }, | ||
+ | slidesLoaded: function() { | ||
+ | $('.caption').animate({ | ||
+ | bottom:0 | ||
+ | },200); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
<body> | <body> | ||
- | < | + | <div id="container"> |
- | < | + | <div id="example"> |
- | + | <img src="https://static.igem.org/mediawiki/2012/5/52/Biology-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon"> | |
- | <a href="https://static.igem.org/mediawiki/2012/1/1e/Plaquette.pdf"> | + | <div id="slides"> |
- | </ | + | <div class="slides_container"> |
- | </ | + | <div class="slide"> |
+ | <a href="https://static.igem.org/mediawiki/2012/1/1e/Plaquette.pdf" title="Plaquette_bdx" target="_blank"><img src="https://static.igem.org/mediawiki/2012/2/22/Slide-plaquette.png" width="570" height="270" alt="Plaquette_bordeaux"></a> | ||
+ | <div class="caption" style="bottom:0"> | ||
+ | <p>Dossier de partenariat FR !</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | <a href="#" title="#" target="_blank"><img src="https://static.igem.org/mediawiki/2012/a/ae/Slide-construction.png" width="570" height="270" alt="Slide 2"></a> | ||
+ | <div class="caption"> | ||
+ | <p>En cours de réalisation !</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <a href="#" class="prev"><img src="https://static.igem.org/mediawiki/2012/f/f1/Prev.png" width="24" height="43" alt="Arrow Prev"></a> | ||
+ | <a href="#" class="next"><img src="https://static.igem.org/mediawiki/2012/c/c4/Next.png" width="24" height="43" alt="Arrow Next"></a> | ||
+ | </div> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/8/8b/Example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> | ||
+ | </div> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 11:37, 23 June 2012