--- a/integ/css/iri.css Wed Apr 03 18:56:34 2013 +0200
+++ b/integ/css/iri.css Wed Apr 03 19:02:12 2013 +0200
@@ -4,8 +4,11 @@
.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;}
+
+.sidebar ul a{display: block;}
+.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 +17,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 +33,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 18:56:34 2013 +0200
+++ b/integ/iri-creation-cinecard.html Wed Apr 03 19:02:12 2013 +0200
@@ -62,7 +62,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>
@@ -72,58 +82,41 @@
<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">
- <li><img src="img/angelo.jpg" alt=""></li>
+ <ul class="stars less clearfix" id="stars-more">
+ <!--
+ <li><a href=""><img src="img/angelo.jpg" alt=""></a></li>
+ -->
+ </ul>
+ <a class="more" href="#stars-more"><span></span></a>
+
+ <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="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">
+
<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>
+
</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,7 +137,8 @@
<div class="edit-cinecard" id="cinecard"></div>
</div>
-
+ <!-- /renkan -->
+
</section>
<!-- /central -->
</div>
@@ -173,7 +167,18 @@
<!-- custom scrollbars plugin -->
<script src="js/jquery.mCustomScrollbar.js"></script>
-<script src="js/script.js"></script>
+<script type="text/javascript" src="js/script.js"></script>
+
+<script type="text/javascript">
+ function getURLParameter(name) {
+ return decodeURI(
+ (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
+ );
+ }
+ var getMovie = getURLParameter('movie');
+ var idMovie = (getMovie != 'null') ? getMovie : 135082;
+</script>
+
<script src="js/iri.js"></script>
<!-- RENKAN -->
--- a/integ/js/iri.js Wed Apr 03 18:56:34 2013 +0200
+++ b/integ/js/iri.js Wed Apr 03 19:02:12 2013 +0200
@@ -1,7 +1,5 @@
$(function(){
-
-
$(window).bind('resize', function(){
setSidebarContentHeight();
});
@@ -20,13 +18,60 @@
$('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
+
+//-- movie
+var urlMovie = 'http://api.allocine.fr/rest/v3/movie?partner=B00015838755&code='+ idMovie;
+$.getJSON(urlMovie, function(data) {
+ var movie = data.movie;
+
+ //-- title
+ var titleMovie = movie.title;
+ $('.renkan .wrap-top h2').text(titleMovie);
+
+ //-- stars
+ var castMember = movie.castMember;
+
+ $.each(castMember, function(k, v){
+ var name = v.person.name;
+ var codeActor = v.person.code;
+ var urlPicture;
+ if(v.picture !== undefined) {
+ urlPicture = v.picture.href;
+ }else{
+ urlPicture = 'http://fr.web.img3.acsta.net/c_160_213/b_1_d6d6d6/commons/emptymedia/empty_star.jpg';
+ }
+ var urlFichePersonne = 'http://www.allocine.fr/personne/fichepersonne_gen_cpersonne='+codeActor+'.html';
+ var itemStar =
+ '<li><a target="_blank" href="'+ urlFichePersonne +'" title="'+ name +'">'+
+ '<img src="'+ urlPicture +'" alt="'+ name +'" />'+
+ '</a></li>';
+ $('#stars-more').append(itemStar);
+ });
+
+
+
+});
+
+//-- picture
+var urlPicture = 'http://api.allocine.fr/rest/v3/picturelist?partner=B00015838755&subject=movie:135082';
+$.getJSON(urlPicture, function(data) {
+ var media = data.feed.media;
+ $.each(media, function(k, v){
+ var urlThumb = v.thumbnail.href;
+ console.log(urlThumb)
+ });
+});
+
});
\ No newline at end of file