Download raw (16.1 KB)
<html> <head> <meta charset="utf-8"> <title>Genrimages</title> <link href="styles.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="./slick/slick/slick.css"> <link rel="stylesheet" type="text/css" href="./slick/slick/slick-theme.css"> <!---<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>--> <script src="jquery-3.1.1.min.js" type="text/javascript"></script> <script src="./slick/slick/slick.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.color-2.1.2.min.js"></script> <script src="masonry.pkgd.min.js"></script> </head> <body> <div id="surface"> <div id="page"> <div id="menu_long"> <div id="menu"> <div id="menu_haut"> <div id="logo"><img src="images/logo-glacial-italic.png" alt="Genrimages logo" title="Genrimages logo"/></div> <div id="menu_infos"> <div class="menu_infos_item">à propos</div> <div class="menu_infos_item">connexion</div> <div class="menu_filtres_item_search" style="width:500px;text-align:right;"> <input type="text" id="search" name="search" value="rechercher" class="search_box" /> </div> </div> </div> <br class="clear" /> <div id="menu_bas"> <div id="menu_blurb">représentations sexuées et stéréotypes dans l'image</div> <div id="menu_filtres"> <div class="menu_filtres_item_filtrer" id="click_filtrer"> filtrer </div> <div class="menu_filtres_item"> → <span class="item_sel_" id="click_medium">médiums</span> </div> <div class="menu_filtres_item"> → <span class="item_sel_" id="click_niveaux">niveaux</span> </div> <div class="menu_filtres_item"> → <span class="item_sel_" id="click_mots_cles">mots-clés</span> </div> <div class="menu_filtres_item_search"> <span id="menu_garder_selection" style="display:none;"><span class="garder_selection_bouton">Appliquer la sélection.</span></span> </div></div> </div> <div id="menu_filtres_select" style="display:none;"> <div class="menu_filtres_item_select" id="click_medium_items" style="padding-left:65px;width:125px;display:none;"> <li><span class="item_sel_">films</span></li><li><span class="item_sel">publicités</span></li> <li>séries</li> </div> <div class="menu_filtres_item_select" id="click_niveaux_items" style="padding-left:20px;width:140px;display:none;"> <li>primaire</li> <li><span class="item_sel">lycée</span></li><li>université</li> </div> <div class="menu_filtres_item_select" id="click_mots_cles_items" style="width:400px;display:none;"> Audiovisuel <span class="item_sel">Beauté</span> Corps Couple Cybersexisme Discriminations <span class="item_sel">Ecole</span> Genre Harcèlement Histoire Homophobie Mixité Orientation Parentalité Sexualité Sciences Sexisme Sexualité <span class="item_sel">Sport</span> </div> </div> <br class="clear" /> </div> <br class="clear" /> </div> <div id="main"> <div id="content"> <div style="" id="fiche_content"> <div class="slider1 slide_env"> <div class="slide"><img src="images/bandeau-clio-01.png"></div> <div class="slide"><img src="images/bandeau-clio-02.png"></div> <div class="slide"><img src="images/bandeau-clio-03.png"></div> <div class="slide"><img src="images/bandeau-clio-01.png"></div> <div class="slide"><img src="images/bandeau-clio-02.png"></div> <div class="slide"><img src="images/bandeau-clio-03.png"></div> </div> <div class="slider2 slide_env"> <div class="slide"><img src="images/bandeau-sarah-01.png"></div> <div class="slide"><img src="images/bandeau-sarah-02.png"></div> <div class="slide"><img src="images/bandeau-sarah-03.png"></div> <div class="slide"><img src="images/bandeau-sarah-04.png"></div> <div class="slide"><img src="images/bandeau-sarah-05.png"></div> <div class="slide"><img src="images/bandeau-sarah-06.png"></div> </div> <div class="slider3 slide_env"> <div class="slide"><img src="images/bandeau-fluvore-01.png"></div> <div class="slide"><img src="images/bandeau-fluvore-02.png"></div> <div class="slide"><img src="images/bandeau-fluvore-03.png"></div> </div> </div> <div id="fiches_recherche" style="display:none;"><br class="clear" /></div> <div id="fiches_recherche_b"></div> </div> </div> </div> </div> <div id="slider1_i" class="slide_infos"> <div class="slide_infos_title">Clio</div> <div class="slide_infos_meta">Informations</div> <div class="slide_infos_meta">Informations 2</div> </div> <div id="slider2_i" class="slide_infos"> <div class="slide_infos_title">Sarah</div> <div class="slide_infos_meta">Informations</div> <div class="slide_infos_meta">Informations 2</div> </div> <div id="slider3_i" class="slide_infos"> <div class="slide_infos_title">Dessin animé</div> <div class="slide_infos_meta">Informations</div> <div class="slide_infos_meta">Informations 2</div> </div> <script> $(document).ready(function(){ db=[]; db_sel=[]; sel_objs=[]; db_mediums=[]; db_niveaux=[]; db_mots_cles=[]; db_mediums_sel=[]; db_niveaux_sel=[]; db_mots_cles_sel=[]; $('#click_filtrer').click(function(){ $("#menu_filtres_select").show(); $("#click_medium_items").show(); $("#click_niveaux_items").show(); $("#click_mots_cles_items").show(); //$("#menu_garder_selection").show(); place_all_infos(); }); $('#click_medium').click(function(){ $("#menu_filtres_select").show(); $("#click_medium_items").show(); //$("#menu_garder_selection").show(); place_all_infos(); }); $('#click_niveaux').click(function(){ $("#menu_filtres_select").show(); $("#click_niveaux_items").show(); //$("#menu_garder_selection").show(); place_all_infos(); }); $('#click_mots_cles').click(function(){ $("#menu_filtres_select").show(); $("#click_mots_cles_items").show(); //$("#menu_garder_selection").show(); place_all_infos(); }); $('.slider1').slick({ dots: false, infinite: false, //cssEase: 'linear', speed: 300, //slidesToShow: 3, variableWidth: true }); $('.slider2').slick({ dots: false, infinite: false, //cssEase: 'linear', speed: 300, //slidesToShow: 3, variableWidth: true }); $('.slider3').slick({ dots: false, infinite: false, //cssEase: 'linear', speed: 300, //slidesToShow: 3, variableWidth: true }); place_all_infos(); $('#fiche_content').hover( function() { }, function() { hide_all_infos(); } ); $('.slider1').hover( function() { }, function() { hide_all_infos(); } ); $('.slider2').hover( function() { }, function() { hide_all_infos(); } ); $('.slider3').hover( function() { }, function() { hide_all_infos(); } ); function hide_all_infos(){ $('#slider1_i').css( "visibility", "hidden" ); $('#slider2_i').css( "visibility", "hidden" ); $('#slider3_i').css( "visibility", "hidden" ); } function hide_all_preview(){ $('.vignette_preview').css( "visibility", "hidden" ); } function place_all_infos(){ place_infos('.slider1 .slick-list','#slider1_i'); place_infos('.slider2 .slick-list','#slider2_i'); place_infos('.slider3 .slick-list','#slider3_i'); } function place_infos(tgt,sld){ var top=0; var left=0; var sld_tgt=$(tgt); var sld_infos=$(sld); var pos=sld_tgt.offset(); //sld_infos.show(); console.log(sld_tgt); console.log(pos); sld_infos.offset(pos); console.log("Offset "+sld_infos.offset().top); sld_infos.css({height:sld_tgt.css('height')}); $(sld_infos).hover( function() { hide_all_infos(); sld_infos.css( "visibility", "visible" ); }, function() { } ); $(sld_tgt).hover( function() { sld_infos.css( "visibility", "visible" ); }, function() { sld_infos.css( "visibility", "hidden" ); } );} $( ".item_sel" ).click(function() { $('#fiche_content').css('visibility','hidden'); $('.slide_infos').hide(); $('#fiches_recherche').show(); set_recherche(); }); function set_recherche(){ //$.getJSON("./home_js-local.json", function( data) { //$.getJSON("http://localhost/genrimages/mock-up/list_annotations_images.php", function( data) { $.getJSON("./recherche.json", function( data) { console.log(data); for(var i=0;i<data.fiches.length;i++){ var cur_node=data.fiches[i]; //console.log(cur_node.mediums); var ar_mediums=cur_node.mediums; var ar_niveaux=cur_node.niveaux; var ar_mots_cles=cur_node.mots_cles; index_taxonomy(ar_niveaux,db_niveaux); index_taxonomy(ar_mediums,db_mediums); index_taxonomy(ar_mots_cles,db_mots_cles); var fiche=new Fiche(cur_node.f_name,cur_node.title.trim(),ar_mediums,ar_niveaux,ar_mots_cles,cur_node.url,cur_node.r_type); //console.log(vid.name); db.push(fiche); console.log(fiche.title); fiche.display(); if(i==(data.fiches.length -1)){ initMenu(); console.log("init menu"); } }}); } function index_taxonomy(ar_sel, db_taxonomy){ /* console.log(db_taxonomy); */ if(ar_sel.length>0){ for(var i=0;i<ar_sel.length;i++){ if(ar_sel[i].length>1){ var index=db_taxonomy.indexOf(ar_sel[i]); if (index > -1) { /* console.log(ar_sel[i]+" already in array");*/ }else{ db_taxonomy.push(ar_sel[i]); /* console.log(ar_sel[i]); */ } }} return true; }else{ return false; } } function list_taxonomy(db_taxonomy,idlay){ for(var i=0;i<db_taxonomy.length;i++){ /* console.log(db_taxonomy[i]); */ var str_tag='<span class="taxonomy_term">'+db_taxonomy[i]+'</span> '; $(idlay).append(str_tag); } } function initMenu(){ $('#fiches_recherche').masonry({ // options itemSelector: '.fiche_vignette', columnWidth: 220, gutter:10 }); $('div[data-vignette]').each(function() { var ab='#a_'+$(this).attr('data-vignette'); //var ab="#a"; console.log(ab); console.log($(ab).html()); var bb='#b_'+$(this).attr('data-vignette'); //$(ab).hide(); $(ab).hover( function() { //alert("des"); $(bb).offset($(ab).offset()); console.log($(bb).offset()); hide_all_preview(); $(bb).css('visibility','visible'); }, function() { //$(bb).css('visibility','hidden'); }); $(bb).hover( function() { //alert("des"); //$(bb).offset($(ab).offset()); //console.log($(bb).offset()); $(bb).css('visibility','visible'); }, function() { $(bb).css('visibility','hidden'); }); }); /* list_taxonomy(db_mediums,filters_mediums); list_taxonomy(db_niveaux,filters_niveaux); list_taxonomy(db_mots_cles,filters_mots_cles); $( "#filters_mediums > span" ).click(function() { update_selection($(this).text(),$(this),db_mediums_sel); }); $( "#filters_niveaux > span" ).click(function() { update_selection($(this).text(),$(this),db_niveaux_sel); }); $( "#filters_mots_cles > span" ).click(function() { update_selection($(this).text(),$(this),db_mots_cles_sel); }); */ } function update_selection(local_sel,that,features_type_sel){ var index=features_type_sel.indexOf(local_sel); var identjq=that; if (index > -1) { features_type_sel.splice(index, 1); that.css("color","#333"); //console.log(identjq); }else{ features_type_sel.push(local_sel); that.css("color","#2c83c6"); } retract(); } function retract(){ if((db_niveaux_sel.length>0)|(db_mediums_sel.length>0)|(db_mots_cles_sel.length>0)){ for(var i=0;i<db.length;i++){ if(has_features(db[i].niveaux,db_niveaux_sel)&&(has_features(db[i].mots_cles,db_mots_cles_sel))&&(has_features(db[i].mediums,db_mediums_sel))){ console.log(db[i].title+' has all keywords'); db[i].select(); }else{ console.log(db[i].title+' has not all keywords'); db[i].deselect(); } }}else{ for(var i=0;i<db.length;i++){ db[i].deselect(); console.log("Deselecting"); } } } function has_features(feats_obj,feats_sel){ var flag=true; if(feats_sel.length>0){ for(var i=0;i<feats_sel.length;i++){ if(inArray(feats_sel[i],feats_obj)){ //console.log(feats_sel[i] +" is present"); }else{ //console.log(feats_sel[i] +" is not present"); flag=false; } }}else{ flag=true; } return flag; } function inArray(el,ar){ var flag=false; for(var i=0;i<ar.length;i++){ if(el==ar[i]){ flag=true; break; } } return flag; } var Fiche=function(id,title,mediums,niveaux,mots_cles,vignette,r_type){ this.id=id; this.title=title; this.mediums=mediums; this.mots_cles=mots_cles; this.niveaux=niveaux; this.vignette=vignette; this.r_type=r_type; }; Fiche.prototype.display=function(){ // http://genrimagfi.cluster002.ovh.net/annotations/ // var str_html='<div class="fiche_vignette" id="a_'+this.id+'" style="background:transparent"><img src="http://localhost/genrimages/annotation/Publicites/thumbs/test/'+this.vignette+'" class="small_v" /></div>'; var str_html='<div class="fiche_vignette" id="a_'+this.title+'" data-vignette="'+this.title+'" style="background:transparent"><img src="http://genrimagfi.cluster002.ovh.net/annotations/Publicites/thumbs/test/'+this.vignette+'" class="small_v" /></div><div id="b_'+this.title+'" style="position:absolute;display:none;">test</div>'; var new_id=Math.floor((Math.random() * 100) + 1); if(this.r_type=="fiche"){ var str_html='<div class="fiche_vignette" id="a_'+new_id+'" data-vignette="'+new_id+'" style=""><img src="http://genrimagfi.cluster002.ovh.net/annotations/Publicites/thumbs/test/'+this.vignette+'" class="small_v" /><div class="fiche_vignette_title">'+this.title+'</div></div><!----->'; if(this.id=='1482348205'){ var str_html_b='<div id="b_'+new_id+'" style="position:absolute;visibility:hidden;" class="vignette_preview"><div class="vignette_preview_panel_left"><div class="vignette_preview_title">'+this.title+'</div></div><div class="vignette_preview_panel_right"><img src="http://localhost/genrimages/annotation/Publicites/thumbs/'+this.vignette+'" class="vignette_preview_vignette" /></div></div>';} }else{ var str_html='<div class="fiche_vignette fiche_vignette_ressource" id="a_'+new_id+'" data-vignette="'+new_id+'" style=""><div class="fiche_vignette_ressource_env"><div class="vignette_preview_biblio">bibliographie</div><div class="fiche_vignette_ressource_title">'+this.title+'</div></div></div><!----->'; //var str_html_b='<div id="b_'+new_id+'" style="position:absolute;visibility:hidden;" class="vignette_preview fiche_vignette_ressource"><div class="vignette_preview_biblio">bibliographie</div><div class="vignette_preview_title">'+this.title+'</div></div>'; } $('#fiches_recherche').prepend(str_html); $('#fiches_recherche_b').prepend(str_html_b); }; Fiche.prototype.select=function(){ $('#a_'+this.id).addClass("vignette_sel"); /* console.log(this.title+" is selected"); */ sel_objs.push(this.title); } Fiche.prototype.deselect=function(){ $('#a_'+this.id).removeClass("vignette_sel"); //$('#a_'+this.id).fadeOut('fast'); var index=sel_objs.indexOf(this.title); if (index > -1) { sel_objs.splice(index, 1); //console.log(identjq); /* console.log(this.title+" is de-selected"); */ } $('#a_'+this.id).appendTo("#fiches"); //$('#a_'+this.id).fadeIn('slow'); } }); </script> </body> </html>