--- a/integ/css/iri.css Wed Apr 03 16:19:25 2013 +0200
+++ b/integ/css/iri.css Wed Apr 03 16:52:19 2013 +0200
@@ -4,8 +4,10 @@
.sidebar h2{font-size: 20px; margin-bottom: 24px;}
.user{ height: 30px; line-height: 30px;}
.user img{width: 30px; height: 30px; margin: 0 24px 24px 0; float: left;}
-.user p{float: left;}
+.user p{float: left; font-size: 13px;}
h3.instruction{color: #c7c7c7; clear: both; padding-bottom: 14px; margin: 0; border-bottom: 1px solid #3b3b3b;}
+
+.stickers.less{height: 90px; overflow: hidden;}
.stickers li{margin: 0 10px 10px 0;float:left;width: 81px; height: 80px;background-color: #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background-repeat: no-repeat; background-position: center 13px;}
.stickers li span{width: 100%;color: #212121; font-size: 12px;font-weight: bold; line-height: 12px; display: inline-block; text-align: center;padding-top: 48px;}
li.culte{background-image: url(../img/culte-scene-icon.png);}
@@ -14,12 +16,14 @@
.stickers li:nth-child(3n+3) { margin-right: 0;}
.sidebar h3{font-size: 13px; font-weight: bold; margin-bottom: 12px;}
+
.more{margin-bottom: 16px;width: 100%; height: 12px; background-color: #191919; display: inline-block;}
.more:hover{background-color: #3b3b3b;}
.more span{ margin: 4px auto 0 auto;width: 13px; height: 4px; background: url(../img/arrow-more.png) 0 0 no-repeat; display: block;}
.more.less span{background-position: bottom left;}
.more-hide{display: none;}
+.stars.less, .images.less{height: 90px; overflow: hidden;}
.stars li:nth-child(4n+4) { margin-right: 0;}
.stars li{margin: 0 8px 10px 0;width: 58px; height: 78px;border: 1px solid #767676; float: left;}
.stars img{width: 58px; height: 78px;}
@@ -28,6 +32,7 @@
.images li{margin: 0 8px 10px 0;width: 80px; height: 80px;border: 1px solid #767676; float: left;}
.images img{width: 80px; height: 80px;}
+.videos.less{height: 76px; overflow: hidden;}
.videos li:nth-child(3n+3) { margin-right: 0;}
.videos li{margin: 0 8px 10px 0;width: 80px; height: 64px;border: 1px solid #767676; float: left;}
.videos img{width: 80px; height: 64px;}
--- a/integ/iri-creation-cinecard.html Wed Apr 03 16:19:25 2013 +0200
+++ b/integ/iri-creation-cinecard.html Wed Apr 03 16:52:19 2013 +0200
@@ -60,7 +60,17 @@
</div>
<h3 class="instruction">Glisser un contenu dans la carte</h3>
<h3>Stickers</h3>
- <ul class="stickers">
+ <ul class="stickers less" id="stickers-more">
+ <li class="culte">
+ <span>SCENES CULTE</span>
+ </li>
+ <li class="star">
+ <span>MON<br />AVIS</span>
+ </li>
+ <li class="like">
+ <span>TU VAS<br />AIMER</span>
+ </li>
+
<li class="culte">
<span>SCENES CULTE</span>
</li>
@@ -70,58 +80,48 @@
<li class="like">
<span>TU VAS<br />AIMER</span>
</li>
- <span id="stickers-more" class="more-hide">
- <li class="culte">
- <span>SCENES CULTE</span>
- </li>
- <li class="star">
- <span>MON<br />AVIS</span>
- </li>
- <li class="like">
- <span>TU VAS<br />AIMER</span>
- </li>
- </span>
+
</ul>
<a class="more" href="#stickers-more"><span></span></a>
<h3>Stars</h3>
- <ul class="stars clearfix">
+ <ul class="stars less clearfix" id="stars-more">
+ <li><img src="img/angelo.jpg" alt=""></li>
+ <li><img src="img/angelo.jpg" alt=""></li>
+ <li><img src="img/angelo.jpg" alt=""></li>
+ <li><img src="img/angelo.jpg" alt=""></li>
+
<li><img src="img/angelo.jpg" alt=""></li>
<li><img src="img/angelo.jpg" alt=""></li>
<li><img src="img/angelo.jpg" alt=""></li>
<li><img src="img/angelo.jpg" alt=""></li>
- <span id="stars-more" class="more-hide">
- <li><img src="img/angelo.jpg" alt=""></li>
- <li><img src="img/angelo.jpg" alt=""></li>
- <li><img src="img/angelo.jpg" alt=""></li>
- <li><img src="img/angelo.jpg" alt=""></li>
- </span>
+
</ul>
<a class="more" href="#stars-more"><span></span></a>
- <h3>Stars</h3>
- <ul class="images clearfix">
+ <h3>Images</h3>
+ <ul class="images less clearfix" id="images-more">
<li><img src="img/angelo.jpg" alt=""></li>
<li><img src="img/angelo.jpg" alt=""></li>
<li><img src="img/angelo.jpg" alt=""></li>
- <span id="images-more" class="more-hide">
- <li><img src="img/angelo.jpg" alt=""></li>
- <li><img src="img/angelo.jpg" alt=""></li>
- <li><img src="img/angelo.jpg" alt=""></li>
- </span>
+
+ <li><img src="img/angelo.jpg" alt=""></li>
+ <li><img src="img/angelo.jpg" alt=""></li>
+ <li><img src="img/angelo.jpg" alt=""></li>
+
</ul>
<a class="more" href="#images-more"><span></span></a>
<h3>Vidéos</h3>
- <ul class="videos clearfix">
+ <ul class="videos less clearfix" id="videos-more">
<li><img src="img/angelo.jpg" alt=""></li>
<li><img src="img/angelo.jpg" alt=""></li>
<li><img src="img/angelo.jpg" alt=""></li>
- <span id="videos-more" class="more-hide">
- <li><img src="img/angelo.jpg" alt=""></li>
- <li><img src="img/angelo.jpg" alt=""></li>
- <li><img src="img/angelo.jpg" alt=""></li>
- </span>
+
+ <li><img src="img/angelo.jpg" alt=""></li>
+ <li><img src="img/angelo.jpg" alt=""></li>
+ <li><img src="img/angelo.jpg" alt=""></li>
+
</ul>
<a class="more" href="#videos-more"><span></span></a>
@@ -144,17 +144,7 @@
<li><a class="out" href="#"></a></li>
</ul>
</div>
-
-
-
-
-
-
-
-
-
-
-
+ <!-- /renkan -->
</section>
<!-- /central -->
@@ -185,6 +175,11 @@
<script src="js/jquery.mCustomScrollbar.js"></script>
<script src="js/script.js"></script>
+
+<script>
+ var idMovie = 135082;
+</script>
+
<script src="js/iri.js"></script>
</body>
--- a/integ/js/iri.js Wed Apr 03 16:19:25 2013 +0200
+++ b/integ/js/iri.js Wed Apr 03 16:52:19 2013 +0200
@@ -1,7 +1,5 @@
$(function(){
-
-
$(window).bind('resize', function(){
setSidebarContentHeight();
});
@@ -20,13 +18,26 @@
$('a.more').bind('click', function(e){
e.preventDefault();
var target = $(this).attr('href');
- if($(this).hasClass('less')){
- $(target).hide();
- $(this).removeClass('less')
+ if($(target).hasClass('less')){
+ $(target).removeClass('less');
+ $(this).addClass('less');
}else{
- $(target).show();
- $(this).addClass('less')
+ $(target).addClass('less');
+ $(this).removeClass('less');
}
});// a.more
+
+
+//-- API allocine
+var urlMovie = 'http://api.allocine.fr/rest/v3/movie?partner=B00015838755&code='+ idMovie;
+$.getJSON(urlMovie, function(data) {
+ var movie = data.movie;
+ var castMember = movie.castMember;
+ console.log(castMember)
+})
+
+
+
+
});
\ No newline at end of file