[résolu]masonry réagit pas totalement, réagit mal...

Par nocraft0, il y a 12 ans

Javascript

Bonjours je viens vers vous après 2jours de teste sans succès,...
enfaite j'ai suivi le tuto galerie avec masonry, mais j'ai quelques anomalies

après un click sur une categorie ,les bloc neant pas cette categorie prenne en style un hidden...
jusque la ca fonctionne les éléments se hidden, mais masonry ne réorganise pas les blocs restant , il les laisse a la position de départ.

et seulement quand je redimensionne mon browser manuellement(avec la souri), les blocs restant se réorganise...

vraiment étrange....

je place un lien JSFIDDLE pour voir ca en live
et le code jquery
jsfiddle

jQuery(function($){
    var portfolio = $('#portfolio');
    portfolio.masonry({
        isAnimated: true,
        itemSelector:'.bloc:not(.hidden)',
        isFitWidth:true,
        columnWidth:160
    });
    $('h1 a').click(function(e){
        var cls = $(this).attr('href').replace('#','');
        if(cls == null){
            portfolio.find('.hidden').fadeIn(); 
            portfolio.find('.bloc').removeClass('hidden'); 
        }
        portfolio.find('.hidden').fadeIn(); 
        portfolio.find('.bloc').removeClass('hidden'); 
        portfolio.find('.bloc:not(.'+cls+')').addClass('hidden').stop().fadeOut();
        portfolio.find('.'+cls).show(500);
        portfolio.find('.bloc:not(.'+cls+')').hide(500);
        portfolio.masonry(); 

        location.hash = cls;
        e.preventDefault(); 
    });

    var bloc = portfolio.find('.bloc:first'); 
    var cssi = {width:bloc.width(),height:bloc.height()};
    var cssf = null; 
    portfolio.find('a.thumb').click(function(e){
        var elem = $(this); 
        var cls = elem.attr('href').replace('#','');
        var fold = portfolio.find('.unfold').removeClass('unfold').css(cssi); 
        var unfold = elem.parent().addClass('unfold').css(cssf); 
        if(cssf == null){
            cssf = {
                width : unfold.width(),
                height: unfold.height()
            };
        }
        unfold.css(cssi).animate(cssf);
        portfolio.masonry(); 
        e.preventDefault(); 
    })
    if(location.hash != ''){
        $('a[href="'+location.hash+'"]').trigger('click');
    }
})

je vous remercie d'avance pour toute suggestions, a plus tard

1 réponse

nocraft0, il y a 12 ans

Bon ben voila j'ai enfin reussi ,... :D
voici en mode spaguetti la galerie, ca pourra toujours servir ...

la demo
et le code

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script src="/js/masonry.pkgd.min.js"></script>
<style>
body {
    font-family: sans-serif;
}
#container {
    border: 1px solid;
    padding: 5px;
    width:100%;
}
.bloc{
    float:left;
    height: 137px;
}
.item {
    width: 205px;
    height: 137px;
    float: left;
    background: #CCC;
    text-align:center;
}
.thumb{
    width: 205px;
    height: 137px;
}
.unfold {
    width: 615px;
    height: 274px;
}
.info .contmeta {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 60px;
    font-size: 12px;
}
.info {
    display:none;
    z-index: 3;
    width: 615px;
    height: 274px;
}
.inactive {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}
.active {
    display:block;
    opacity: 1;
    border-bottom-color: #19aea5;
    -webkit-box-shadow: 0px 0px 5px #cecece;
    -moz-box-shadow: 0px 0px 5px #cecece;
    box-shadow: 0px 0px 5px #cecece;
}
.hidden{
display:none;
}
.info .contmeta {
    display:none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 60px;
    font-size: 12px;
}
.info .titre {
    padding-bottom:43px;
    position: absolute;
    bottom: 0;
    left: 20px;
}
.info .suite {
    margin-top:-200px;
    position: absolute;
    top: 0;
    right: 20px;
}
.info .desc {
    position: absolute;
    padding-left:10px;
    bottom: 0;
    height:44px;
    width:605px;
    background-color: #bab6b6;
    border-top: 1px dashed #e7e7e7;
}
</style>
</head>
<body>
    <div class="menucat">
        <h1><small>
            <a class="all" href="#">All</a>
            <a class="2D" href="#2d">2D</a>
            <a class="3D" href="#3d">3D</a>
            <a class="Anim" href="#anim">Anim</a>
        </small></h1>
    </div>
    <div id="container">
        <project class="bloc 3d">
            <a class="thumb" href="#project1">
                <div id="project1" class="item"><img src="http://placehold.it/205x137" alt="" width="205" height="137"/></div>
            </a>
            <div class="info">
                <img src="http://placehold.it/615x274" alt="" width="615" height="274"/>
                <div class="contmeta">
                    <div class="suite">voir la suite</div>
                    <div class="titre">le paysage de la vie nocturne</div>
                    <span class="meta">
                        <span class="desc">comment contenu de la deescriptino comment contenu de la deescriptin</span>
                    </span>
                </div>
            </div>
        </project>  
        <project class="bloc 2d">
            <a class="thumb" href="#project2">
                <div id="project2" class="item"><img src="http://placehold.it/205x137" alt="" width="205" height="137"/></div>
            </a>
            <div class="info">
                <img src="http://placehold.it/615x274" alt="" width="615" height="274"/>
                <div class="contmeta">
                    <div class="suite">voir la suite</div>
                    <div class="titre">le paysage de la vie nocturne</div>
                    <span class="meta">
                        <span class="desc">comment contenu de la deescriptino comment contenu de la deescriptin</span>
                    </span>
                </div>
            </div>
        </project> 
        <project class="bloc 3d">
            <a class="thumb" href="#project3">
                <div id="project3" class="item"><img src="http://placehold.it/205x137" alt="" width="205" height="137"/></div>
            </a>
            <div class="info">
                <img src="http://placehold.it/615x274" alt="" width="615" height="274"/>
                <div class="contmeta">
                    <div class="suite">voir la suite</div>
                    <div class="titre">le paysage de la vie nocturne</div>
                    <span class="meta">
                        <span class="desc">comment contenu de la deescriptino comment contenu de la deescriptin</span>
                    </span>
                </div>
            </div>
        </project> 
        <project class="bloc anim">
            <a class="thumb" href="#project4">
                <div id="project4" class="item"><img src="http://placehold.it/205x137" alt="" width="205" height="137"/></div>
            </a>
            <div class="info">
                <img src="http://placehold.it/615x274" alt="" width="615" height="274"/>
                <div class="contmeta">
                    <div class="suite">voir la suite</div>
                    <div class="titre">le paysage de la vie nocturne</div>
                    <span class="meta">
                        <span class="desc">comment contenu de la deescriptino comment contenu de la deescriptin</span>
                    </span>
                </div>
            </div>
        </project> 
        <project class="bloc 2d">
            <a class="thumb" href="#project5">
                <div id="project5" class="item"><img src="http://placehold.it/205x137" alt="" width="205" height="137"/></div>
            </a>
            <div class="info">
                <img src="http://placehold.it/615x274" alt="" width="615" height="274"/>
                <div class="contmeta">
                    <div class="suite">voir la suite</div>
                    <div class="titre">le paysage de la vie nocturne</div>
                    <span class="meta">
                        <span class="desc">comment contenu de la deescriptino comment contenu de la deescriptin</span>
                    </span>
                </div>
            </div>
        </project>  
    </div>
<script>
$(function()
{
    var hash;
    function EventHash()
    {
        $('.item').removeClass('unfold');
        hash = window.location.hash;
        $(hash).parent().addClass('hidden');
        var project = $(hash).parent().parent();
        project.addClass('active unfold');
        project.find('.info').addClass('unfold active').stop().animate({opacity: 1}, 300);
        if(hash != ''){
            $('#container').find(".bloc:not('.unfold')").addClass('inactive');
        }
        //project.find('.contmeta').addClass('active').stop().slideDown(200);
        $('#container').masonry();
    }
    $('#container').masonry(
    {
        itemSelector: '.bloc',
        columnWidth: 205
    });
    if (hash != 'undefined')
    {
        EventHash();
    }
    window.onhashchange = function()
    {
        EventHash();
    };

    /////////////////////////////////////////////
    // click all , affiche tous Comment depart
    //\ ______________________________________________________________
    $('.all').click(function(){
        $('#container').find('.bloc').removeClass('active').stop().animate({opacity: 1}, 300);
        $('#container').find('.bloc').removeClass('hidden').stop().animate({opacity: 1}, 300); 

        $('#container').find('.info.unfold').removeClass('unfold active').stop().animate({opacity: 1}, 300);    
        $('#container').find('.bloc.unfold').removeClass('unfold').stop().animate({opacity: 1}, 300); 
        $('#container').find('a.thumb.hidden').removeClass('hidden').stop().animate({opacity: 1}, 300); 

        $('#container').masonry(); 
    });

    /////////////////////////////////////////////
    // click sur les liens de categorie
    //\ ______________________________________________________________
    $('h1 a').click(function(){
        var cls = $(this).attr('href').replace('#','');
        console.log(cls);
        $('#container').find('.bloc').removeClass('active inactive hidden').stop().animate({opacity: 1}, 300);
        $('#container').find(".bloc:not('."+cls+"')").addClass('hidden').animate({opacity: 0}, 300);;
        $('#container').find('.bloc .'+cls).show(500);
        $('#container').find(".bloc:not('."+cls+"')").hide(500);
        $('#container').find('.bloc').removeClass('unfold').stop().animate({opacity: 1}, 300);
        $('#container').find('.bloc.unfold').removeClass('unfold').stop().animate({opacity: 1}, 300); 
        $('#container').find('.info.unfold').removeClass('active unfold').stop().animate({opacity: 0}, 300); 
        $('#container').find('a.thumb.hidden').removeClass('hidden').stop().animate({opacity: 1}, 300); 
        $('#container').masonry(); 
    });
    /////////////////////////////////////////////
    // click petit project 
    //\ ______________________________________________________________  
    $('#container').find('a.thumb').click(function(){
        var elem = $(this);         
        var unfold = $('#container').find('.unfold').removeClass('unfold active').stop().animate({opacity: 0.25}, 300);;
        elem.children('thumb').removeClass('hidden');
        $('#container').find(".thumb.hidden").removeClass('hidden');
        $('#container').masonry(); 
    });
    /////////////////////////////////////////////
    //hover petit project , rend tous les autres elements inactive
    //\ ______________________________________________________________
    $('project a')
      .mouseover(function() {
        var article = $(this);
        article.parent().removeClass('inactive').addClass('active');
        article.parent().stop().animate({opacity: 1}, 300);
        var unfold = $('#container').find("project").hasClass('unfold active');
        if (!unfold ) {
                $('#container').find(".bloc:not('.active')").addClass('inactive').stop().animate({opacity: 0.25}, 300);
        }
        $('#container').masonry();
      })
      .mouseout(function() {
        var article = $(this);  
        var unfold = $('#container').find("project").hasClass('unfold');
        if (!unfold ) {
                $('#container').find(".bloc:not('.active.unfold')").removeClass('inactive').stop().animate({opacity: 1}, 300);
        }else{
                $('#container').find(".bloc.active:not('.unfold')").removeClass('inactive').stop().animate({opacity: 0.25}, 300);
        }

        article.parent().removeClass('active');
        $('#container').masonry(); 

    }); 

    /////////////////////////////////////////////
    //hover grand project , affiche les spans ( detail, description )
    //\ ______________________________________________________________
    $('project .info')
      .mouseover(function() {
        var article = $(this);
        article.parent().addClass('active');
        $('#container').find(".bloc:not('.active')").addClass('inactive');
        $(this).children('.contmeta').stop().slideDown(200);
        $('#container').masonry(); 
      })
      .mouseout(function() {
        var article = $(this);  
        $(this).children('.contmeta').removeClass('active');
        $(this).children('.contmeta').stop().slideUp(200);
        $('#container').masonry(); 
    }); 

});
</script>
</body>
</html>

plusplus les amis.