Galeria siatki mozaikowej z obrazami o dynamicznych rozmiarach [zamknięte]


80

Właśnie otrzymałem następujący projekt projektu, galerii siatki obrazów, z dynamicznymi obrazami szerokości i wysokości (obrazy przesłane przez użytkownika). (Zrzut ekranu na końcu postu)

Wypróbowałem jQuery Masonry , Tympanus Automatic Image Montage i CSS-Tricks Seemless Responsive Photo Grid , ale każdy ma swoje ograniczenia.

  • Jquery Masonry pozwala na dynamiczne określanie szerokości i wysokości, jednak generowane są luki
  • Te dwa ostatnie skrypty generują bardzo ładne siatki, ale z tym problemem, że szerokość lub wysokość muszą być statyczne

EDYCJA: natknąłem się na Isotope , który jest prawie idealny i prawdopodobnie skończę z nim korzystać, chyba że jest coś, co dokładnie odpowiada moim potrzebom. Dlatego moje pytanie wciąż pozostaje takie samo ...

Czy istnieje skrypt javascript (najlepiej jQuery), który może wygenerować całkowicie dynamiczną mozaikę (w odniesieniu do rozmiaru obrazu), jak ta na zrzucie ekranu poniżej?

Dzięki za wszelką pomoc


Galeria


Dzięki, wygląda na to, że tego potrzebuję. Czy możesz dodać to jako odpowiedź, abym mógł odpowiednio udzielić ci kredytu i oznaczyć pytanie jako odpowiedź?
Dogoku

@Dogoku Czy możesz podzielić się tym, jak utworzyć dynamikę jednoczesnej wysokości i szerokości w Isotope?
Mark Vital,

Ostrzeżenie: łącze do automatycznego montażu obrazu w tympanonie to kompletny śmieć.
kształt statku

Możesz użyć unitegallery użytkownika . Jest responsywny i ma różne dostępne opcje, takie jak link, ikona, lightbox itp.
RN Kushwaha

Chcę tego samego wyniku, co na powyższym obrazku. Obrazy mają różne rozmiary, ale na końcu nie chcą żadnych przerw. Siatka w stylu metra Freewall nie działa, ponieważ wszystkie są obrazami. proszę pomóż!
Monisha

Odpowiedzi:


64

Proponuję Freewall. Jest to obsługująca wiele przeglądarek i responsywna wtyczka jQuery, która pomaga tworzyć wiele typów układów siatki: elastyczne układy, układy obrazów, układy zagnieżdżonych siatek, układy w stylu metra, układy typu pinterest ... z ładnymi efektami animacji CSS3 i zdarzeniami oddzwaniania. Freewall to kompleksowe rozwiązanie do tworzenia dynamicznych układów siatki dla komputerów stacjonarnych, telefonów komórkowych i tabletów.

Strona główna i dokument: również znaleziono here.


12
Studiowanie tego: może być pomocne crispymtn.com/stories/ ...
mayankcpdixit

@mayankcpdixit jest to niezwykle pomocne, dzięki
zavr

1
tnx @zavr Zrobiłem coś własnego. github.com/mayankcpdixit/grid-no-white
mayankcpdixit

@mayankcpdixit, super, dobra robota. Stworzyłem też własną wtyczkę jQuery.
zavr

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.