Download raw (5.2 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="./slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.color-2.1.2.min.js"></script>
</head>
<body>
<div id="surface">
<div id="page">
<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">
filtrer
</div>
<div class="menu_filtres_item">
→ médiums
</div>
<div class="menu_filtres_item">
→ niveaux
</div>
<div class="menu_filtres_item">
→ mots-clés
</div>
<div class="menu_filtres_item_search"></div>
</div>
</div>
<br class="clear" />
</div>
<br class="clear" />
<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>
</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(){
$('.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_infos('.slider1 .slick-list','#slider1_i');
place_infos('.slider2 .slick-list','#slider2_i');
place_infos('.slider3 .slick-list','#slider3_i');
$('#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').hide();
$('#slider2_i').hide();
$('#slider3_i').hide();
}
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);
sld_infos.css({height:sld_tgt.css('height')});
$(sld_infos).hover(
function() {
hide_all_infos();
sld_infos.show();
}, function() {
}
);
$(sld_tgt).hover(
function() {
sld_infos.show();
}, function() {
sld_infos.hide();
}
);}
});
</script>
</body>
</html>