Bugs Masonry

ctristan
Javascript

Bonjour à toutes et à tous,

Il y a trois bugs :

  • Lorsque je clique sur la première image (#mekong), tous les autres éléments se positionne en absolute left 0.
    Je me retrouve avec une colonne de photos.
  • Tous les autres éléments fonctionnent, excepté lorsque que je clique une deuxième fois dessus.
    L'image s'agrandit derrière la mosaïque d'image ; les autres ne se repositionne pas...
  • L'effet d'agrandissement ne s'effectue pas sur les photos de ma première colonne (#mekong, #elle, #senior)

Merci pour votre aide.

CSS
[code]
<style type="text/css">

blogs { 
width:480px; margin:0; position:absolute !important;}

.imgBloc {
margin:5px 5px 0 0; height:97px; }
.imgBloc .info {
display:none; }
.imgBloc.unfold {
height:350px; width:480px; top:0; }
.imgBloc.unfold .info {
display:block; }
.imgBloc.unfold .thumb {
display:none; }
</style>
[/code]

HTML
[code]
<h1><a href="#">Blogs</a></h1>

<div id="blogs">
<div class="imgBloc">
<a href="#" id="mekong" class="thumb">
<img src="/sites/default/files/blog-enfantsdumekong.jpg" width="155" height="97" alt="" />
</a>
<div class="info">
<img src="/sites/default/files/blog-enfantsdumekong.jpg" width="470" height="294" alt="" />
<p>Ici les infos de mon projet</p>
</div>
</div>

<div class="imgBloc">
<a href="#" id="culture" class="thumb">
<img src="/sites/default/files/blog-cultureaunaturel2.jpg" width="155" height="97" alt="" />
</a>
<div class="info">
<img src="/sites/default/files/blog-cultureaunaturel2.jpg" width="470" height="294" alt="" />
<p>Ici les infos de mon projet</p>
</div>
</div>

<div class="imgBloc">
<a href="#" id="bangladesh" class="thumb">
<img src="/sites/default/files/blog-bangladesh.jpg" width="155" height="97" alt="" />
</a>
<div class="info">
<img src="/sites/default/files/blog-bangladesh.jpg" width="470" height="294" alt="" />
<p>Ici les infos de mon projet</p>
</div>
</div>

<div class="imgBloc">
<a href="#" id="elle" class="thumb">
<img src="/sites/default/files/blog-fondation-elle.jpg" width="155" height="97" alt="" />
</a>
<div class="info">
<img src="/sites/default/files/blog-fondation-elle.jpg" width="470" height="294" alt="" />
<p>Ici les infos de mon projet</p>
</div>
</div>

<div class="imgBloc">
<a href="#" id="innover" class="thumb">
<img src="/sites/default/files/blog-innovercontrelafaim.jpg" width="155" height="97" alt="" />
</a>
<div class="info">
<img src="/sites/default/files/blog-innovercontrelafaim.jpg" width="470" height="294" alt="" />
<p>Ici les infos de mon projet</p>
</div>
</div>

<div class="imgBloc">
<a href="#" id="nosykomba" class="thumb">
<img src="/sites/default/files/blog-nosykomba.jpg" width="155" height="97" alt="" />
</a>
<div class="info">
<img src="/sites/default/files/blog-nosykomba.jpg" width="470" height="294" alt="" />
<p>Ici les infos de mon projet</p>
</div>
</div>

<div class="imgBloc">
<a href="#" id="senior" class="thumb">
<img src="/sites/default/files//blog-seniorsolidaire.jpg" width="155" height="97" alt="" />
</a>
<div class="info">
<img src="/sites/default/files/blog-seniorsolidaire.jpg" width="470" height="294" alt="" />
<p>Ici les infos de mon projet</p>
</div>
</div>

<div class="imgBloc">
<a href="#" id="taoa" class="thumb">
<img src="/sites/default/files/blog-taoa.jpg" width="155" height="97" alt="" />
</a>
<div class="info">
<img src="/sites/default/files/blog-taoa.jpg" width="470" height="294" alt="" />
<p>Ici les infos de mon projet</p>
</div>
</div>

<div class="imgBloc">
<a href="#" id="transmiles" class="thumb">
<img src="/sites/default/files/blog-transmiles.jpg" width="155" height="97" alt="" />
</a>
<div class="info">
<img src="/sites/default/files/blog-transmiles.jpg" width="470" height="294" alt="" />
<p>Ici les infos de mon projet</p>
</div>
</div>
</div>
[/code]

JQUERY
[code]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/masonry.js"></script> <script type="text/javascript">

jQuery(function($) {
var blogs = $('#blogs');
blogs.masonry({
itemSelector:'.imgBloc',
isAnimated:true,
isFitWidth:true
});

$('h1 a').click(function(e){
    var cls = $(this).attr('href').replace('#','');
    blogs.find('.imgBlog').removeClass('hidden');
    blogs.find('.imgBlog:not(.'+cls+')').addClass('hidden');
    e.preventDefault();
});

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

blogs.find('a.thumb').click(function(e){
    var elem = $(this);
    var cls = $(this).attr('href').replace('#','');
    var fold = blogs.find('.unfold').removeClass('unfold').css({width:155,height:97});
    var unfold = elem.parent().addClass('unfold');
    blogs.masonry('reload');

    var widthf = unfold.width();
    var heightf = unfold.height();
    unfold.css(cssi).animate({
        width:widthf,
        height:heightf
    })
    location.hash != cls;
    e.preventDefault();
})

})
</script>
[/code]

Aucune réponse