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>