5
Ho dei problemi qui. Ho bisogno di una griglia di immagini reattive che possiamo ingrandire ogni immagine e tutte le altre immagini dovrebbero riorganizzare automaticamente sugli spazi vuoti.Griglia reattiva con zoom sugli articoli
Sono venuto per un wich soluzione funziona partialy:
$(document).ready(function() {
$("#wrapper div").click(function() {
if ($(this).siblings().hasClass('expanded')) {
$(this).siblings().removeClass('expanded');
}
$(this).addClass('expanded');
});
});.wrapper {
width:100%;
margin:0 auto;
}
.wrapper div {
width:31%;
margin:1%;
float:left;
-webkit-transition: width 1s;
transition: width 1s;
}
.expanded {
width:64% !important;
}
img {
width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="wrapper" id="wrapper">
<div>
<img src="http://i.imgur.com/m9kLJMi.jpg">
</div>
<div>
<img src="http://i.imgur.com/1fR1mQQ.jpg">
</div>
<div>
<img src="http://i.imgur.com/CFf5bbM.jpg">
</div>
<div>
<img src="http://i.imgur.com/3U2gd7I.jpg">
</div>
<div>
<img src="http://i.imgur.com/N4pFnCE.jpg">
</div>
<div>
<img src="http://i.imgur.com/q81AaCs.jpg">
</div>
<div>
<img src="http://i.imgur.com/wjjhTtW.jpg">
</div>
<div>
<img src="http://i.imgur.com/9fifhrM.jpg">
</div>
<div>
<img src="http://i.imgur.com/gz5Qdv6.jpg">
</div>
</div>Ma alcuni elementi rompere la rete, solo l'1, 4 e 7 lavoro correttamente. JSFiddle example
Sono venuto a un'altra soluzione che è il gridly plugin. Ma non sono in grado di renderlo reattivo.
Qualcuno ha un indizio che posso seguire.
Grazie
seguendo questo perché sono curioso. La mia ipotesi è che abbia a che fare con le larghezze percentuali sul wrapper e sulle div. –
Spero che sia qualcosa di semplice come le larghezze. – MasterD
@MasterD anche se non ho una risposta per te, posso dire che non è qualcosa di semplice come le larghezze. Il problema che stai incontrando è come il markup HTML vuole naturalmente ri-fluire. La soluzione _può essere lungo le linee di [Massoneria] (http://masonry.desandro.com/). Fondamentalmente, è necessario JavaScript per richiamare gli elementi negli spazi vuoti lasciati quando si fa clic su una casella diversa da 1, 4 e 7. – hungerstar