Jak uzyskać taki kształt na stronie www, i jak umieścić tam zdjęcia do wyświetlenia?

Witajcie,
próbuje stworzyć kształt, w którym po naciśnięciu na nim otworzą się zdjęcia do przeglądania. Jak to ugryźć i dokonać tego przy użyciu HTML,CSS i JS? Zdjęcia do przeglądania oczywiście pojawią się w oknie na stronie z możliwością przejścia na kolejne zdjęcia.

https://fancyapps.com/fancybox/3/
https://lokeshdhakar.com/projects/lightbox2/

Jako dla początkującego te strony wyglądają bardzo tajemniczo ;) Rozjaśnij proszę o co tam chodzi i jak one wspomogą stworzenie tego kształtu i całej reszty. Z góry dziękuje.

Znasz się trochę na tym co chcesz w ogóle zrobić? Programujesz, czy szukasz gotowego rozwiązania?
Owal osiągniesz ustawiając na obiekcie miniaturki border-radius: 50%;

Kolega wyżej zamieścił Ci linki do projektów umożliwiających stworzenie w prosty sposób pop-up'ów do źródła zdjęć z wyższą rozdzielczością. Poczytaj dokumentację. Jeśli nie chce Ci się tego robić, odpuść sobie całkowicie ten temat :)

Pozdrawiam.

Witaj, chcę to sam zrobić od początku do końca. Myślę, że dla początkującego nie będzie to aż takie trudne z czyjąś pomocą. A i będzie też dobrą praktyką do nauki.
Co chce zrobić:

1. stworzyć ten kształt złożony z linii (na który wskazuje strzałka)
2. umieścić w tym kształcie obiekt, który będzie zawierał w sobie zdjęcia
3. będą one otwierały się w większym oknie po naciśnięciu w tym kształcie
4. okno to będzie można przesuwać w lewo/prawo na kolejne zdjęcia.

Pisze z telefonu, ale kiedyś jest film na yt gdzie pewna Pani autorka ikon css repo na githubie pokazuje dokładnie w jaki sposób tworzy skomplikowane kształty za pomocą css. Stosowała tam nie tylko before after ale jeszcze cos więcej może box shadows. Poszukaj sobie, to powinno Ci pomoc.

Proszę bardzo @Kubs

na którym dokładnie wyjaśnia w jaki sposób rysuje w css.

Bibliotka icon, którą tworzyła w przerwach miedzy pracą.

Na stronie biblioteki można sprawdzić który kawałek css odpowiada za daną część ikony. sprawdź ikonę chmury

Tak sobie teraz oglądam fragment, no ta Pani jest bardzo mądra, indywidualistka ;)

Serdeczne dzięki. A jak myślisz, w jaki sposób mogę rozwiązać temat ustawienia rozmiaru powierzchni w tym kształcie gdzie będą zdjęcia? Ma być o rozmiarach takich jak ten kształt złożony z tej jednej linii. Powierzchnia ta jest niejako w tym kształcie.
Wykreskowane na zdjęciu.

Jeśli temat jest aktualny, to spójrz tu:
https://4programmers.net/Forum/1570865
a zwłaszcza na ten link:
https://3n.com.pl/puzzle/index.htm

Być może to jest to, czego szukasz.

Niesamowite, chylę czoła. Czy prowadzi Pan jakieś zajęcia nauki programowania stron? Chętnie się zapisze :) Tymczasem wracając do tematu, chcę tylko osiągnąć efekt możliwości otworzenia zdjęcia w okienku gdzie będzie można je przeglądać (jak na rysunku). Natomiast na początku zdjęcie to będzie niejako 'w środku' tego kształtu złożonego z linii (wykreskowane na poziomo na rysunku).

Generalnie - to nie zajmuję się "stronami". To tak przy okazji.

Zrób swój projekt tak, jakby nie miał tego dziwnego kształtu (na razie po prostu zapomnij o kształcie).
Jak będzie działać, to potem nałożysz kształt, tak jak są zrobione te puzzle.
Do tego nie są potrzebne żadne biblioteki. Koncepcyjnie to jest proste:

1. Robisz przejrzystego div-a
2. Do niego przypinasz <canvas>, nadajesz mu wymiary takie jak ma div.
3. Tworzysz znacznik img i do niego ładujesz zdjęcie.
4. Zdjęcie wyświetlasz na canvasie.
5. Rysujesz na canvasie "ścieżkę odcinania" (faktycznie ta ścieżka nigdzie się nie pojawia. Ona jest w pamięci i funkcją stroke() mogłaby być narysowana, ale nie ma takiej potrzeby).
6. Pobierasz dane z canvasu i w pętli przebiegasz wszystkie piksele w canvasie. W pętli tej sprawdzasz, czy punkt leży wewnątrz ścieżki, czy na zewnątrz (jest na to odpowiednia funkcja). Jeśli punkt leży na zewnątrz ścieżki, to ustawiasz przeźroczystość w kanale alpha.

Zwróć uwagę, że działania na canvasie muszą się wykonać po załadowaniu zdjęcia, więc musisz napisać funkcję, która zostanie wywołana w odpowiedzi na "onload".

Tym planem więc pójdę. Właśnie brakuje mi takich wskazówek w nauce projektowania stron. Mimo, że nie rozumiem dużo z tych wymienionych punktów to jest już jakiś tok działań, a to już bardzo dużo.

Ciekawy jestem również tych puzzli. Jak to wygląda od strony kodu? Jak się tego nauczyć?

Czy zna Pan jakieś pozycje książkowe lub inne źródła nauki warte zainteresowania?

Przede wszystkim z tym "panowaniem" to daj proszę spokój. Może jestem stary :-), ale duchem czuję się młody :-).

Chociaż jestem na forum niezbyt długo, to w kliku wątkach wyraziłem już swoje zdanie na temat programowania.
Niektórzy się z tym zgadzali, inni nie :-). W każdym razie - nie jest moim celem przekonywanie innych do moich racji. Pytasz, to odpisuję co na ten temat sądzę.
Parę dni temu @marta589 przytoczyła taki link: https://blog.codinghorror.com/why-cant-programmers-program
No i niestety - muszę się z tym zgodzić.

Dla mnie - prawdziwe programowanie to jest sztuka, a nie rzemiosło.
Więc jeśli pytasz - jak się tego nauczyć, to zadałbym pytanie - czy można nauczyć się pisać powieści? W sumie - tego nie wiesz, póki nie spróbujesz :-).
Ale - żeby tę powieść napisać musisz znać jakiś język. Oczywiście, możesz nauczyć się angielskiego, czy francuskiego i w nim zacząć tę powieść pisać, ale najlepiej gdybyśmy zaczynali od pisania powieści w języku ojczystym:-).

Z programowaniem jest problem, bo nie rodzimy się z "wbudowanym' językiem.
Ale zawsze jest tak, że jeden język (programowania) staje się tym Twoim językiem podstawowym (ojczystym). I potem, kiedy uczysz się innych języków, to wewnętrznie tłumaczysz to (po prostu rozumiesz i czujesz) w tym języku podstawowym.

Więc który język powinien być tym podstawowym? Zdania są różne. Generalnie kiedyś (lata 80-te) standardem w nauczaniu (przynajmniej w Polsce) był Pascal.
Potem pojawiły się systemy Windows i Linux i one są napisane w C. Więc Pascal zaczął być wypierany właśnie przez C.

Język C jest trudny i wymagający (zarządzanie pamięcią, kontrolowanie wycieków pamięci), ale jak go poznasz, to masz dostęp do pełnej dokumentacji systemu (czy to Windowsa, czy Linuxa).

Wszystko co widzisz w przeglądarce w jakiś sposób związane jest z systemem. To najpierw w systemie pojawi się jakaś nowość (np. synteza dźwięku), żeby potem pojawiły się odpowiednie możliwości w przeglądarkach.

Weźmy np. te puzzle. Koncepcja tzw. kontekstu urządzenia (device context) w systemie Windows istnieje od jego początku. Tu jest to opisane w dokumentacji systemu:
https://docs.microsoft.com/en-us/windows/desktop/gdi/device-contexts
I są tu takie funkcje jak np. GetWindowDC():
https://docs.microsoft.com/en-us/windows/desktop/api/Winuser/nf-winuser-getwindowdc
Jest też wyjaśniona cała koncepcja "ścieżek":
https://docs.microsoft.com/en-us/windows/desktop/api/wingdi/nf-wingdi-beginpath
I jest też wyjaśniona budowa plików graficznych rastrowych (bitmap):
https://docs.microsoft.com/pl-pl/windows/desktop/gdi/bitmaps

Więc jeśli to wszystko masz opanowane, wiesz jak to w systemie działa i swobodnie się w tym poruszasz i teraz twórcy przeglądarek wymyślają "canvas" z jego kontekstem i operacjami na ścieżkach i na bitmapach, to odnosisz to do swojego "języka ojczystego" i działasz.
Jeśli tych podstaw grafiki nie masz - to nie rozumiesz jak to działa. Oczywiście możesz poczytać o canvasie i to ogarnąć, ale pytasz jak to jest u mnie, to odpowiadam.
Ja znam system Windows od podszewki. I jego funkcje graficzne i sieciowe i związane z interfejsem. Po prostu znam WINAPI. Dla mnie programowanie w JS - to jest jakby dodatkowa warstwa nałożona na system. Myślę chwilę jak to jest w systemie i szukam odpowiednich funkcji w JS, które to realizują. Nigdy nie "uczyłem" się JS.

Trzeba tu jednak dodać, że system napisany jest w C (z małymi wyjątkami - nieobiektowo).
Więc na ten język "ojczysty" (czyli C) musisz nałożyć jeszcze koncepcje obiektowości.
Jak to zrobić. Tu znowu uważam, że zaczynanie przygody od JS nie jest dobrym pomysłem. Co prawda JS ma składnię podobną do klasycznego języka obiektowego, ale koncepcja "this" jest tu zupełnie inna niż w klasycznym C++.
Oczywiście możesz wpisać w Internet hasło "this i JS", albo poczytać o tym w książkach. Ale z pewnością będą tam odniesienia do C++ i porównania JS do C++. No i czego się z tego dowiesz, jak te porównania będą niezrozumiałe?

Wg mnie trzeba przejść choćby podstawy C++, żeby moc potem przynajmniej rozumieć te rozważania o "this".

Podsumowując ten fragment - wg mnie (powtarzam - to jest moje zdanie i nie chcę tu wywoływać językowej wojny, każdy może uważać inaczej) - potrzebny jest nam "język ojczysty" - w którym myślimy o programowaniu. I wg mnie językiem z wyboru powinien być C/C++.

Teraz jeszcze parę słów o "pisarstwie" :-). Znajomość języka programowania, a pisanie (tworzenie) programów, to jednak nie to samo. Żeby napisać program (poza techniczną wiedzą "jak") trzeba mieć jeszcze koncepcję "co" chcemy napisać. Trzeba mieć wizję tego co chcemy stworzyć.
U Ciebie widzę tę koncepcję. To znaczy nie znam jej w całości, ale postawiłeś sobie cel i chcesz go zrealizować. I to jest ok :-). Myślę, że to jest ważniejsze. Tzn. wolałbym programistę z koncepcją, który nie wie jak ją zrealizować, niż takiego, który wie, ale nie ma koncepcji i pisze na forum "podrzućcie jakiś pomysł na program" :-).

Co do podręczników - nie znam aktualnych. Teraz tylko czytam dokumentacje techniczne. Kiedy pojawił się system Windows kupiłem Petzolda "Programowanie Windows 95 (to był rok 95 :-) ). Teraz bym pewno nie kupił, bo wszystko jest w Internecie.

Witaj,

"Może jestem stary :-), ale duchem czuję się młody :-)" - to coś jak ja :)

Tymczasem, nie mogę odnieść się do wszystkiego o czym piszesz, z racji tego, że jestem żółtodziobem w tym temacie. U mnie na tą chwilę wygląda to tak, że głodny wiedzy jestem cholernie, że mam za sobą podstawy HTML,CSS i JS, a także Javy, że mam za sobą nieudane podejście napisania aplikacji mobilnej przewodnika turystycznego, i że teraz mam wizję swojej strony www i chcę ją zrobić ze zrozumieniem. Żadne kopie kodu nie wchodzą w grę. Kolejnym krokiem, który chcę wykonać jest napisać kod wg. twojej wcześniejszej propozycji. Potem przyjdą różnego rodzaju inne zagwostki, które mam nadziej rozwiązywać na bieżąco. Strona nie będzie aż tak wyszukana więc i napisanie jej również nie będzie takie trudne.
Czego mogę/powinienem uczyć się w między czasie?

Nie wiem, co jeszcze mógłbym dodać :-). Trening czyni mistrza. Ja bym się nie zastanawiał, co w międzyczasie, tylko parł do przodu z realizacją pomysłu, który sobie postawiłeś. Problemy same się pojawią :-) (taka już ich zakichana natura). A jak się pojawią, to będziesz je po prostu rozwiązywał.

To pozwól, że w razie kolejnego problemu programistycznego poproszę Cię o pomoc :) Pewnie już niedługo :)

Uaktualniłem ten temat o post z nowym rysunkiem tego co chcę osiągnąć.

Jeśli chcesz ograniczyć zdjęcie do brzegów tej figury, może być ciężko. Taką ogólną elipsę, jak @Visual Code pokazał, można zrobić (nawet, domniemywam, obróconą – właściwość CSS transform).

Dokładniejszą figurę można zrobić choćby przez HTML Canvas (jak wspomniał @Stefan_3N) – ot, tak robiąc na oko (dokładnie ciężko by było): https://jsfiddle.net/4209zhom/10/ (odkomentuj sobie "background-color", żeby zobaczyć wymiary elementu canvas). Jednak takie rysowanie (=składanie kształtów) raczej nie umożliwi wsadzenia tam do środka zdjęcia.

Może lepsza droga niż rysowanie własnoręcznie w Canvasie to byłaby funkcja Canvasu getImageData() – https://www.w3schools.com/tags/canvas_getimagedata.asp. Nie używałem jej, ale wygląda obiecująco. W jakimś edytorze graficznym mógłbyś narysować sobie ten kształt, co pokazałeś, i przenieść go do Canvasu. Być może potem można by było coś z tym zrobić w Canvasie (jako że kształt będzie jednym "obiektem").

Więcej możliwości nie przychodzi mi do głowy co do rysowania i zdjęcia.

Jeśli chodzi o naciśnięcie i otwarcie się tego slidera, doprecyzuj proszę. Co to znaczy "otworzy się"? Czy to znaczy, że ma się pojawić "wyskakujące okienko" (takie jak alert), czy też ten element HTML ma dynamicznie zmienić kształt na prostokątny?