2015-09-23 37 views
5

Mam tu kłopot. Potrzebuję siatki czułego obrazu, którą możemy powiększyć na każdym obrazie, a wszystkie pozostałe obrazy powinny automatycznie zmienić się w puste miejsca.Responsywna siatka z powiększaniem przedmiotów

Doszedłem do wich rozwiązanie działa ciowo:

$(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>

Ale niektóre rzeczy rozbić siatkę, tylko 1, 4 i 7 pracę prawidłowo. JSFiddle example

Doszedłem do innego rozwiązania, które jest gridly plugin. Ale nie jestem w stanie go dostosować.

Czy ktoś ma wskazówkę, którą mogę śledzić.

Dzięki

+0

po tym, bo jestem ciekawy. Domyślam się, że ma to związek z twoimi procentowymi szerokościami na opakowaniu i elementach –

+0

Mam nadzieję, że jest to coś prostego jak szerokość. – MasterD

+2

@MasterD, chociaż nie mam dla ciebie odpowiedzi, mogę powiedzieć, że nie jest to coś tak prostego jak szerokość. Problem, który napotykasz, to sposób, w jaki znaczniki HTML w naturalny sposób chcą przepływać. Rozwiązanie _may_ może być zgodne z [Masonry] (http://masonry.desandro.com/). Zasadniczo, musisz JavaScript, aby uzyskać elementy do ponownego przepływu w puste przestrzenie po kliknięciu dowolnego pola oprócz 1, 4 i 7. – hungerstar

Odpowiedz

1

Praca z procentów i względnych położeń jest bałagan na tym przykładzie. zobacz przykład izotop

http://isotope.metafizzy.co/methods.html#layout

Kliknij na przykład po prawej stronie. Używa pozycji absolutnej (i niektórych obliczeń)

+0

Dzięki za cynk Diego. Jestem właścicielem piwa. – MasterD

+0

ha ha dzięki: D –