Tworzę na własne potrzeby niezbyt skomplikowaną stronę w Bootstrapie. Jestem totalnym amatorem w tej kwestii, więc korzystam z gotowego szablonu i metodą prób i błędów staram się jakoś to spersonalizować. Natrafiłem na następujący problem - chcę zrobić tak, aby po kliknięciu w button “ZOBACZ” otwierała mi się mini galeria, w której będę miał ze dwa-trzy obrazki. Chciałbym, żeby nie przenosiło mnie to nigdzie, żeby działało jak na allegro choćby (http://allegro.pl/konsola-ps4-500gb-uzywana-i5936494447.html <- wrzucam link dla zobrazowania). Jest to możliwe do zrobienia w miarę bez bólu zębów dla laika? Pozdrawiam
Daj mu domyślnie display none, po kliknięciu dodaj czarnego diva jako tło ( z z-index większym niż tym od strony), i pokaż zawartość tej galerii (z największym z-index)
Hm a da się tam zrobić żeby z miniaturki mi się to powiększało do większego obrazka i wtedy odpalała się galeria? Bo chciałbym obok siebie umieścić kilka mniejszych obrazków, które będą odpalały osobne galerie.
Przecież slider to nie galeria i służy do czegoś zupełnie innego.
Na tyle ile poznałem bootstrapa nie przypominam sobie by efekt który chcesz uzyskać był możliwy do wykonania. Ale ogólnie da się tak zrobić, ale będziesz potrzebował napisać małą funkcję w JS lub jQuery oraz użyć thickboxa. Jedyne co będziesz musiał zrobić w JS to wyświetlić okienko z miniaturkami gdzie będziesz miał podgląd obrazków z linkiem do pliku w pełnych wymiarach i klasą na linku “thickbox”. Tym oto sposobem po kliknięciu będziesz miał wyświetlany obrazek w pełnym rozmiarze.
Gdybyś zrezygnował z przycisku zobacz i wstawił zamiast niego normalnie listę obrazków w tedy wystarczy tylko dodać na stronie thickboxa oraz odpowiednią klasę do linka.
Zobacz sobie tutaj jak to jest zrobione w przykładach, albo single image albo gallery images cię interesują, różnica tylko tego w jaki sposób ma być wyświetlane zdjęcie i jakie mają być dostępne opcje, np. czy chcesz by można było przełączać się na następny/poprzedni obrazek czy nie. http://codylindley.com/thickbox/
Okej, siadam i wszystko sprawdzam. Dziękuję za wyczerpującą odpowiedź
EDIT:
Poniżej wrzucam kawałek kodu odpowiedzialnego za tę sekcję, oraz to jak to wygląda. Chciałbym na tych kolorowych kafelkach umieścić screeny, które następnie po kliknięciu zobacz odpalałyby galerię. Minimum szczęścia, to żeby po kliknięciu zobacz obrazek się powiększał. Możliwe?
Ogólnie najłatwiej będzie Ci to ogarnąć gdy zrobisz sobie to w następujący sposób:
utworzysz div-a galerie
dodasz do niego miniaturki z linkiem do oryginału
dodasz na stronie thickboxa
ustawisz odpowiednie klasy dla thicboxa, np dla linka dodasz class=“thickbox”
W tym momencie musisz mieć działającą galerię w taki sposób że wyświetla się ona na stronie (miniaturki) a po kliknięciu w miniaturkę otwiera się jakby nowe okno z podglądem dużego obrazka, możesz je zamknąć i otworzyć inne.
Gdy już to będziesz miał, dla diva z całą galerią ustawiasz początkowo css-y na display: none i teraz dodajesz funkcję która będzie wywoływana po kliknięciu w przycisk “Zobacz” która zmieni …
Właściwie to możesz też do tego użyć thickboxa, przykład masz nazwany jako Inline Content. Przycisk przerabiasz tak by był linkiem z klasą thickbox, a w href stawiasz to w jaki sposób ma być wyświetlane okienko.
Ale uwaga, thickbox nie jest responsywny domyślnie, będziesz musiał go sobie dostosować pod różne rozdzielczości by dobrze to wszystko wyglądało. Masz 2 możliwości, albo zrobić to przez modyfikację CSS, albo co lepsze ręcznie otworzyć okienko thickboxa przy pomocy JS z dynamicznie wyliczonymi wartościami dla width i height. Możliwości jest więcej, zależy jakie efekt chcesz uzyskać i co cię usatysfakcjonuje.
EDIT:
Nie jestem pewny, ale teraz mi się przypomniało że chyba można otworzyć tylko jedno okno tb, więc będziesz musiał miniaturki wyświetlić sobie sam przy pomocy JS-a, zrobisz to tak jak zacząłem pisać i funkcja która jest wywoływana po kliknięciu w przycisk musi jedynie wyświetlić diva z galerią, czyli zmienić display na block.
Jeśli zrobisz to że miniaturki wyświetlą się pod przyciskiem to masz wszystko inne z głowy, jeśli diva z galeria ostylujesz w formie okienka musisz dodać jeszcze przycisk zamykający go oraz napisać jeszcze jedną funkcję która będzie wywoływana po jego kliknięciu i schowa tego diva z galerią.
Pozdrawiam
