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
po tym, bo jestem ciekawy. Domyślam się, że ma to związek z twoimi procentowymi szerokościami na opakowaniu i elementach –
Mam nadzieję, że jest to coś prostego jak szerokość. – MasterD
@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