Gaetancousin (Talk | contribs) |
Gaetancousin (Talk | contribs) |
||
Line 27: | Line 27: | ||
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css"> | <link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css"> | ||
<!-- flip --> | <!-- flip --> | ||
+ | <script src="https://cdn.rawgit.com/nnattawat/flip/v1.1.1/dist/jquery.flip.min.js"></script> | ||
<!-- jQuery 1.7+ --> | <!-- jQuery 1.7+ --> | ||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> | <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> | ||
Line 39: | Line 40: | ||
</body> | </body> | ||
<style> | <style> | ||
+ | |||
#owl-demo .item{ | #owl-demo .item{ | ||
margin: 3px; | margin: 3px; | ||
Line 46: | Line 48: | ||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
+ | cursor: pointer; | ||
} | } | ||
+ | #owl-demo .item .hid{ | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | } | ||
</style> | </style> | ||
<script> | <script> | ||
Line 53: | Line 60: | ||
$("#owl-demo").owlCarousel({ | $("#owl-demo").owlCarousel({ | ||
− | + | autoPlay: 3000, //Set AutoPlay to 3 seconds | |
items : 4, | items : 4, | ||
Line 60: | Line 67: | ||
}); | }); | ||
− | + | $('.vu').on('click', function(event){ | |
+ | var $this = $(this); | ||
+ | if($this.hasClass('clicked')){ | ||
+ | $this.removeAttr('style').removeClass('clicked'); | ||
+ | } else{ | ||
+ | $this.hide(1000).addClass('clicked'); | ||
+ | $('.hid').show(1000) | ||
+ | } | ||
+ | }); | ||
}); | }); | ||
</script> | </script> | ||
Line 66: | Line 81: | ||
<div id="owl-demo"> | <div id="owl-demo"> | ||
− | + | <div class="item">[[File:T--Paris Saclay--100216 Alice1.png|250px|link=|class=vu]][[File:T--Paris Saclay--100216 Alice2.png|250px|link=|class=hid]]</div> | |
− | + | <div class="item"><img src="demos/assets/owl2.jpg" class="vu" alt="Owl Image"><img src="demos/assets/owl8.jpg" class="hid" alt="Owl Image"></div> | |
− | + | <div class="item"><img src="demos/assets/owl3.jpg" class="vu" alt="Owl Image"><img src="demos/assets/owl8.jpg" class="hid" alt="Owl Image"></div> | |
− | + | <div class="item"><img src="demos/assets/owl4.jpg" class="vu" alt="Owl Image"><img src="demos/assets/owl8.jpg" class="hid" alt="Owl Image"></div> | |
− | + | <div class="item"><img src="demos/assets/owl5.jpg" class="vu" alt="Owl Image"><img src="demos/assets/owl8.jpg" class="hid" alt="Owl Image"></div> | |
− | + | <div class="item"><img src="demos/assets/owl6.jpg" class="vu" alt="Owl Image"><img src="demos/assets/owl8.jpg" class="hid" alt="Owl Image"></div> | |
− | + | <div class="item"><img src="demos/assets/owl7.jpg" class="vu" alt="Owl Image"><img src="demos/assets/owl8.jpg" class="hid" alt="Owl Image"></div> | |
− | + | ||
− | + | ||
</div> | </div> |
Revision as of 10:47, 4 October 2016