Galerie d'images en mosaïque avec Masonry

thornydre
Javascript

Bonjour,

Après avoir suivis le tutoriel pour réaliser une galerie en mosaïque avec le plugin Masonry, j'ai essayé de l'intégré dans un de mes sites. Or j'ai quelques problèmes que voici :

  • les images ne s'organisent qu'une seule fois, quand je redimensionne la fenêtre de mon navigateur
  • quand je clique sur une image, celle-ci s'anime bien, mais si je reclique sur la même plus tard, elle ne s'anime plus et passe directement à la taille au dessus

Vous pouvez constater par vous même ici : [url=http://lebaligan.com/galery.php]Galerie[/url]

Et voici les différents codes HTML/CSS/Javascript :

[code]<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
<title>Le Baligan - Restauration rapide > Siouville</title>

    <meta charset="UTF-8" />
    <meta name="auteur" content="Boutrot Lucas" />
    <meta name="date" content="Juin 2013" />
    <meta name="sujet" content="Le Baligan" />

    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="style2.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

    <div id="dragon" class="dragdrop">
    </div>

    <div id="title">
        <img src="./Images/Theme/title.png" alt="Titre index">
    </div>

    <div id="container">
        <div id="menu">

            <ul>
                <li><a class="index" href="index.html">Accueil</a></li>
                <li><a class="dates" href="dates_a.html">Dates</a></li>
                <li><a class="galery" href="galery.html">Galerie</a></li>
                <li><a class="menu" href="menu.html">Menu</a></li>
                <li><a class="contacts" href="contacts.html">Contacts</a></li>
                <li><a class="location" href="location.html">Où ?</a></li>
            </ul>
         
        </div>

        <div id="contain">
            <h2>
                Galerie
            </h2>

            <div class="galeryButton">
                Galerie 1
                <span class="galeryArrow">
                    <img src="./Images/Theme/arrow.png" alt="flèche">
                </span>
            </div>

            <div id="galeryDisplay">
                <?php for($i=0;$i < 10;$i++): ?>
                <div class="bloc">
                    <a class="thumb" href="#project<?php echo $i; ?>"><img src="http://placehold.it/180x100" alt="bloc" width="180" height="100"></a>
                    <div class="info">
                        <img src="http://placehold.it/300x200" alt="info" width="300" height="200">
                    </div>
                </div>
                <?php endfor; ?>
            </div>
        </div>

        <div id="contain_bottom">
            Copyright © Lucas Boutrot All rights reserved. Theme designed by Lucas Boutrot. 2013
        </div>
    </div>

    <script type="text/javascript" src="jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="masonry.pkgd.min.js"></script>
    <script type="text/javascript" src="dragdrop.js"></script>
    <script type="text/javascript" src="galery.js"></script>

</body>

</html>[/code]

[code]/ BODY /
body{
margin: 0;
padding: 0;
background: #524231;
font-family: Century Gothic;
font-size: 14px;
color: #111111;
}

/* DRAGON ***/

dragon{ 
position: absolute;
width: 156px;
height: 185px;
padding: 0;
margin: 15px 0 0 60px;
cursor: move;
background: url(./Images/dragon.png);
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;

}

/* TITLE ***/

title{ 
text-align: center;
padding: 30px 0px 30px 0px;

}

/* CONTAINER ***/

container{ 
width: 720px;
margin: 0 auto;

}

/* CONTAIN ***/

contain{ 
background: url(./Images/Theme/container.png) repeat-y;

}

contain h2{ 
width: 125px;
height: 29px;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 15px;
margin: 0 auto;
padding: 25px 0 10px 0;
background: url(./Images/Theme/back_h2.png) no-repeat center;

}

contain h1{ 
font-size: 18px;
font-weight: bold;
line-height: 22px;
margin: 0 0 0 27px;
padding: 0 0 20px 8px;
background: url(./Images/Theme/back_h1.png) no-repeat;
width: 111px;
height: 26px;

}

contain p{ 
font-size: 14px;
text-align: justify;
margin: 0;
padding: 0 45px 20px 45px;

}

/* INDEX ***/

contain.index p{ 
text-indent: 30px;

}

/* MENU ***/

menu{ 
height : 100px;
text-align: center;
background: url(./Images/Theme/container_top.png) no-repeat bottom left;

}

menu ul{ 
height: 75px;
width: 690px;
margin: 0;
padding: 0 0 0 15px;
list-style-type: none;

}

menu ul li{ 
float: left;

}

menu ul li a{ 
height: 75px;
width: 115px;
font-size: 20px;
font-weight: bold;
color: #2C83DC;
text-decoration: none;
display: block;
line-height: 75px;
background: no-repeat left;
background-image: url(./Images/Theme/menu_button.png);

}

menu ul li a:hover{ 
background-position: bottom left;
color: #6FC7FF;

}

menu ul li a:active{ 
background-position: top left;

}

/* GALERY ***/
.galeryButton{
margin: 0 auto;
padding: 4px 0 0 15px;
height: 26px;
width: 585px;
font-size: 16px;
background: url(./Images/Theme/separator.png) no-repeat bottom left;
cursor: pointer;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}

.galeryButton:hover{
background-color: #5D8524;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}

.galeryArrow{
width: 11px;
height: 6px;
margin: 0;
padding: 0 0 20px 10px;
border: 0;
}

galeryDisplay{ 
margin: 0 60px 0 60px;
padding: 15px 15px 15px 15px;
width: 570px;
font-size: 16px;
background: url(./Images/Theme/separator.png) no-repeat bottom left;
display: none;

}

.bloc{
float: left;
padding: 5px;
}

.bloc .info{
display: none;
}

.bloc.unfold{
width: 300px;
height: 200px;
}

.bloc.unfold .info{
display: block;
}

.bloc.unfold .thumb{
display: none;
}

/* CONTAIN BOTTOM ***/

contain_bottom{ 
height: 90px;
width: 720px;
font-size: 11px;
color: #222222;
padding: 6px 15px;
background: url(./Images/Theme/container_bottom.png) no-repeat top left;

}

.item{
color: white;
}

.publicite{
color: blue;
}[/code]

[code]var galeryButtons = document.getElementsByClassName('galeryButton');
var galeryDisplays = document.getElementById('galeryDisplay');
var i;

function addEvent(element, eve, func){
if(element.attachEvent){
element.attachEvent('on' + eve, func);
}
else{
element.addEventListener(eve, func, false);
}
}

function removeEvent(element, eve, func){
if(element.detachEvent){
element.detachEvent('on' + eve, func);
}
else{
element.removeEventListener(eve, func, false);
}
}

function disp(currentDisp){
if(currentDisp.currentStyle){
if(currentDisp.currentStyle.display == "inline-block"){
currentDisp.style.display = "none";
}
else if(currentDisp.currentStyle.display == "none"){
currentDisp.style.display = "inline-block";
}
}

else{
    if(getComputedStyle(currentDisp, null).display == "inline-block"){
        currentDisp.style.display = "none";
    }
    else if(getComputedStyle(currentDisp, null).display == "none"){
        currentDisp.style.display = "inline-block";
    }
}

}

function listenerForI(i){
addEvent(galeryButtons[i], 'click', function(e){
if(e.which == 1){
disp(galeryDisplays);
}
});
}

for(i = 0;i < galeryButtons.length;i++){
listenerForI(i);
}

jQuery(function($){
var galeryDisplay = $('#galeryDisplay');

galeryDisplay.masonry({
    isAnimated: true,
    itemSelector: '.bloc'
});

var width = galeryDisplay.find('.bloc:first').width();
var height = galeryDisplay.find('.bloc:first').height();
var cssi = {width:width, height:height};

galeryDisplay.find('a.thumb').click(function(e){
    var elem = $(this);
    var cls = $(this).attr('href').replace('#', '');

    galeryDisplay.find('.unfold').removeClass('unfold').css(cssi);
    var unfold = elem.parent().addClass('unfold');
    galeryDisplay.masonry('reload');
    var widthf = unfold.width();
    var heightf = unfold.height()
    unfold.css(cssi).animate({width:widthf, height:heightf})
    location.hash = cls;
    e.preventDefault();
})

if(location.hash != ''){
    $('a[href"' + location.hash + '"]').trigger('click');
}

})[/code]

Voilà j'espère que vous pourrez m'aider.

Merci

Thornydre

Aucune réponse