Comportement d'un scroll horizontal

Question

18 Aug 2013 à 08:57

Bonjour à tous.

Je suis entrain de faire un site pour héberger des photos.

Voici le code de la page :



<!DOCTYPE html>
<html>
  <head>
    <title>Ineptie Temporelle</title>

    <!-- Meta -->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <!--<meta name="viewport" content="user-scalable=no, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, width=device-width" />-->

    <!-- Css -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!-- Favicon -->
    <link rel="icon" href="/images/favicon.ico"/>

    <!-- Javascript -->
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery.customEvents.js"></script>
    <script type="text/javascript" src="/js/jquery.panelSnap.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/angular.min.js"></script>
  </head>
  <body class="main">
    <!-- Menu -->
    <div id="navbar" class="navbar navbar-inverse navbar-fixed-top" style="color:white;">
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">
            <li><a href="/"><label class="title">Ineptie Temporelle</label></a></li>
          </ul>
          <ul class="nav pull-right">
            <li><a href="themes.php">Th&egrave;mes</a></li>
            <li><a href="albums.php">Albums</a></li>
            <li><a href="projects.php">Projets</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="main" class="mainAlbum">
      <div id="container">
        <div id="firstSpace" style="float: left; width:200px; height:518px"></div>
        <section><div class="picture" style="width:774px; height:518px; background-image:url('/pictures/Gael/Gael_1.jpg')"></div></section>
        <section><div class="picture" style="width:774px; height:518px; background-image:url('/pictures/Gael/Gael_2.jpg')"></div></section>
        <section><div class="picture" style="width:774px; height:518px; background-image:url('/pictures/Gael/Gael_3.jpg')"></div></section>
        <section><div class="picture" style="width:774px; height:518px; background-image:url('/pictures/Gael/Gael_4.jpg')"></div></section>
        <section><div class="picture" style="width:347px; height:518px; background-image:url('/pictures/Gael/Gael_5.jpg')"></div></section>
        <section><div class="picture" style="width:774px; height:518px; background-image:url('/pictures/Gael/Gael_6.jpg')"></div></section>
        <section><div class="picture" style="width:774px; height:518px; background-image:url('/pictures/Gael/Gael_7.jpg')"></div></section>
        <section><div class="picture" style="width:774px; height:518px; background-image:url('/pictures/Gael/Gael_8.jpg')"></div></section>
        <section><div class="picture" style="width:347px; height:518px; background-image:url('/pictures/Gael/Gael_9.jpg')"></div></section>
        <section><div class="picture" style="width:347px; height:518px; background-image:url('/pictures/Gael/Gael_10.jpg')"></div></section>
        <div id="lastSpace" style="float: left; width:200px; height:518px"></div>
      </div>
    </div>
  </body>
</html>
<script type="text/javascript">
  function resizeDivs() {
    var winW = $(window).width();

    var divFirstW = Math.round((winW - 774) / 2);
    $('#firstSpace').width(divFirstW);

    var divLastW = Math.round((winW - 347) / 2);
    $('#lastSpace').width(divLastW);

    var divMainW = 6459 + divFirstW + divLastW;
    $('#container').width(divMainW);
  }
  
  $(window).load(resizeDivs());
  $(window).resize(function() {
    clearTimeout(this.id);
    this.id = setTimeout(resizeDivs, 50);
  });

  var options = {
    $menu: false,
    menuSelector: 'a',
    panelSelector: 'div',
    namespace: '.panelSnap',
    onSnapStart: function(){},
    onSnapFinish: function(){},
    directionThreshold: 50,
    slideSpeed: 200
  };

  $('#container').panelSnap();
</script>

Et voici le Css :


@font-face {
  font-family: 'title';
  src: url('Fonts/zapfino_linotype_one-webfont.eot');
  src: url('Fonts/zapfino_linotype_one-webfont.eot?#iefix') format('embedded-opentype'),
       url('Fonts/zapfino_linotype_one-webfont.woff') format('woff'),
       url('Fonts/zapfino_linotype_one-webfont.ttf') format('truetype'),
       url('Fonts/zapfino_linotype_one-webfont.svg#zapfino_linotype_oneregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

a
{
  border:0px;
  text-decoration:none;
  cursor:default;
  color:white;
}

a:active
{
  border:0px;
  text-decoration:none;
  cursor:default;
  color:white;
}

a:hover
{
  border:0px;
  text-decoration:none;
  cursor:default;
  color:white;
}

a:link
{
  border:0px;
  text-decoration:none;
  cursor:default;
  color:white;
}

a:visited
{
  border:0px;
  text-decoration:none;
  cursor:default;
  color:white;
}

body.main
{
  background-color:#999;
  cursor:default;
  color:white;
}

div.main
{
  position:absolute;
  width:500px;
  left:50%;
  top:0px;
  margin-top:70px;
  z-index:-999;
}

div.mainAlbum
{
  position:absolute;
  left:0px;
  top:0px;
  margin-top:70px;
  z-index:-999;
}

div.albums
{
  height:400px;
  width:130px;
  padding:0px;
  margin:0px;
  background-position:0px 0px;
  -moz-border-radius:20px 20px 20px 20px;
  -webkit-border-radius:20px 20px 20px 20px;
  border-radius:20px 20px 20px 20px;
}

div.albums:hover
{
  background-position:-130px 0px;
}

div.events
{
  height:400px;
  width:130px;
  padding:0px;
  margin:0px;
  background-image:url('/images/events.png');
  background-position:0px 0px;
  -moz-border-radius:20px 20px 20px 20px;
  -webkit-border-radius:20px 20px 20px 20px;
  border-radius:20px 20px 20px 20px;
}

div.events:hover
{
  background-position:-130px 0px;
}

div.landscapes
{
  height:400px;
  width:130px;
  padding:0px;
  margin:0px;
  background-image:url('/images/landscapes.png');
  background-position:0px 0px;
  -moz-border-radius:20px 20px 20px 20px;
  -webkit-border-radius:20px 20px 20px 20px;
  border-radius:20px 20px 20px 20px;
}

div.landscapes:hover
{
  background-position:-130px 0px;
}

div.picture
{
  height:518px;
  width:518px;
  padding:0px;
  float: left;
  background-position:0px 0px;
  -moz-border-radius:20px 20px 20px 20px;
  -webkit-border-radius:20px 20px 20px 20px;
  border-radius:20px 20px 20px 20px;
}

div.portraits
{
  height:400px;
  width:130px;
  padding:0px;
  margin:0px;
  background-image:url('/images/portraits.png');
  background-position:0px 0px;
  -moz-border-radius:20px 20px 20px 20px;
  -webkit-border-radius:20px 20px 20px 20px;
  border-radius:20px 20px 20px 20px;
}

div.portraits:hover
{
  background-position:-130px 0px;
}

div.projects
{
  height:400px;
  width:130px;
  padding:0px;
  margin:0px;
  background-image:url('/images/projects.png');
  background-position:0px 0px;
  -moz-border-radius:20px 20px 20px 20px;
  -webkit-border-radius:20px 20px 20px 20px;
  border-radius:20px 20px 20px 20px;
}

div.projects:hover
{
  background-position:-130px 0px;
}

img.rounded
{
  height:400px;
  width:130px;
  padding:0px;
  margin:0px;
  -moz-border-radius:20px 20px 20px 20px;
  -webkit-border-radius:20px 20px 20px 20px;
  border-radius:20px 20px 20px 20px;
}

label.category
{
  font-family: 'title';
  font-size: 40px;
  cursor:default;
}

label.title
{
  font-family: 'title';
  font-size: 60px;
  cursor:default;
}

Je cherche à faire une sorte de panelSnap, mais plutôt horizontal dans le comportement de telle sorte que l'image qui soit affichée à l'écran soit toujours au centre de la fenêtre. C'est là que le bas blesse : vertical, sans trop de soucis, mais pas horizontal. Avez vous une idée, un conseil ou le cas échéant un poulet ?
Modifié par Csluikidikilest (18 Aug 2013 - 08:59)

Sujet clos