Witam.
Brakuje mi pomysłu jak dynamicznie skalować obrazki aby osiągnąć efekt takiej oto galerii:
Obrazki mogą być różnych formatów, różnych rozmiarów i zawsze muszą być wyświetlane po kolei.
Dodatkowo cała galeria musi być responsywna.
Ma ktoś jakiś pomysł? Aplikację piszę w ASP.NET MVC4.
- Rejestracja:ponad 12 lat
- Ostatnio:około 8 lat
- Postów:51
0
C# 
- Rejestracja:ponad 18 lat
- Ostatnio:4 dni
- Lokalizacja:Rzeszów
0
javascript.
szukaj za "responsive gallery" w końcu znajdziesz, ja trafiłem na to: http://www.ryanepp.com/demos/balanced_gallery/horizontal
wady ma takie, że:
- nie ma preloadowania, galeria układa się dopiero po załadowaniu obrazków (zamiast preloadowania może być odbieranie z serwera wymiarów obrazków (serwer musi mieć je w bazie, ew. czytać na bieżąco i podawać z obrazkiem))
- na maksymalnej rozdzielczości na Operze coś się rozjechało - raczej wina skryptu niż Opery, bo widać, że autor gdzieś coś gubi (bo nie zawsze obrazki są wyrównane idealnie do prawej) i to samo powtórzyłoby się na ff w idealnie takim samym wymiarze okna.
więc szukaj innego.
tumblr bodajże i google images wyświetlają zdjęcia w takiej formie, może u nich coś da się podpatrzeć.
- Rejestracja:prawie 11 lat
- Ostatnio:prawie 10 lat
- Postów:16
1
Nadaj wartości procentowe dla zaprezentowanej siatki div-ów, a do środka powrzucaj obrazki w tagu img
Ukryj overflow dla div, a obrazki dopasuj do div-a
Możesz nadać każdemu "rodzajowi" wielkości własną klasę, a jeszcze lepiej pogrupować je wg linii w pewne schematy. Łatwiej nimi zarządzisz, przy różnych rozdzielczościach.
<div class="images-1-2-1">
<div>
<img titile="obrazek1" alt="obrazek1" src="./obrazek1">
</div>
<div>
<img titile="obrazekduzy" alt="obrazekduzy" src="./obrazekduzy">
</div>
<div>
<img titile="obrazek3" alt="obrazek3" src="./obrazek3">
</div>
</div>
- Rejestracja:ponad 12 lat
- Ostatnio:około 8 lat
- Postów:51
0
@dzek69 Chciałem jak najbardziej ograniczyć JavaScript (jedynie do ładowania kolejnych partii obrazków). Jak podglądałem Tumblr'a, Google Images, i Eyeem to jedyna komunikacja z serverem polega na wysłaniu żądania o kolejne wiersze.
~edit
Chodzi mi o skalowanie obrazków po stronie serwera (bo przesyłanie wielkich obrazków i skalowanie ich po stronie przeglądarki raczej zdecydowanie nie będzie wydajne). Mam gotowy algorytm do skalowania galerii na telefonach ale nie wiem jak to przenieść na stronę i w dodatku responsywną.
@pitu7dg Tylko problem jest tego typu, że obrazki mogą być w skrajnie różnych formatach (480x800, 950x2000 itd.) i nieokreśloną ilość 'rodzajów' wielkości. Jeśli oddam skalowanie %-om to mam pewność, że na brzegach nie będzie pustych miejsc? Bo wydaje mi się, że tak właśnie się stanie.
edytowany 1x, ostatnio: Sharbat
- Rejestracja:ponad 18 lat
- Ostatnio:4 dni
- Lokalizacja:Rzeszów
1
@Sharbat: Takiej galerii nie stworzysz idealnej bez kadrowania (wszystkie tego typu galerie kadrują obrazy). Kadrowanie przez css i overflow (czy tam background-size). tak samo jak nie zrobisz responsywnej galerii bez przeskalowywania obrazków po stronie przeglądarki (wiadomo, że możesz je pomniejszyć i potem skalować, zamiast skalować obrazy 4k) - możesz to ograniczyć, ale raczej nie wyeliminować ;)
Jeżeli tak czy siak korzystasz z javascriptu - to nie ograniczaj się szczególnie, jeżeli nie masz szczególnych powodów. To przeglądarka jest od renderowania - więc nie zrzucaj renderowania na serwer. Szczególnie responsywne strony.
- Rejestracja:ponad 12 lat
- Ostatnio:około 8 lat
- Postów:51
0
Okej, czyli rozumiem, że muszę:
- Ustawić rozmiar głównego DIV'a galerii na rozmiar %-owy.
- Pobrać aktualny rozmiar tego DIV'a przez JS'a.
- Określić maksymalną wysokość jednego wiersza.
- Składać jeden wiersz dodając kolejne obrazki i skalować je do zadanej wysokości.
- Jeśli dodany (ostatni w wierszu) obrazek wychodzi poza długość wiersza to skaluje wszystkie obrazki proporcjonalnie żeby wypełniły cały wiersz (skalowanie w dół jeśli chciałbym dokoptować ten ostatni obrazek do aktualnego wiersza lub w górę jeśli ostatni obrazek ma znaleźć się w wierszu kolejnym).
A jak rozwiązać to, żeby nie ładowały mi się najpierw w jednej linii? Ukryć całość (display: none), załadować, przeskalować i odkryć (display: block)? Czy jest jakiś optymalniejszy sposób?
~edit
Mogę ewentualnie ładować całą listę SRC'ków i ich rozmiary do tablicy w JS'ie i przeskalowane dodawać (append) do treści strony (?)
edytowany 2x, ostatnio: Sharbat
dzek69
Jeżeli możesz dokonywać obliczeń na elementach przed wstawieniem ich do dokumentu to tak rób
- Rejestracja:ponad 12 lat
- Ostatnio:około 8 lat
- Postów:51
0
Mam jeszcze jedno pytanie z ładowaniem galerii.
Po 1. jak wykryć kiedy scroll dojeżdża do końca ekranu.
Po 2. jak dodawać nowe elementu które zwróci mi Ajax.
Główne wątpliwości mam z powodu Ajax'a i ASP.NET'a ponieważ obrazki są wyświetlane za pomocą kontrolera w taki sposób:
<img src="/App/Images/ShowSingleImage/193" class="single_image" real-height="1023" real-width="828" id="single-img_193" style="width: 202.261px; height: 249.895px;">
Pierwszy człon linka ("/App") to 'Virtual Directory' stworzone przez Visual Studio żeby można było łączyć się z projektem po sieci wewnętrznej i nie będzie tego na serwerze produkcyjnym.
Kolejno załadowane obrazki dodaje w taki sposób:
var img = document.createElement("img");
img.setAttribute("src", "/App/Images/ShowSingleImage/"+response.data.id);
$("#user-gallery").append(img);
Jak zmodyfikować 'src' żebym mógł pominąć "/App"?
- Rejestracja:ponad 18 lat
- Ostatnio:4 dni
- Lokalizacja:Rzeszów
1
- jquery waypoints (raczej nie chcesz do samego końca ekranu, tylko do 2-3 elementów od końca)
Jak zmodyfikować 'src' żebym mógł pominąć "/App"?
po prostu zapisz sobie gdzieś zmienną, zawierającą "ścieżkę do korzenia", a potem doklejaj ją na początku.