Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JS] Galeria refreshowana
Forum PHP.pl > Forum > XML, AJAX
endr1u
Witam, robie pewna stronke internetowa i potrzebuje zrobic galerie zdjęć ktora bedzie sie dostosowywala do okreslonego okienka rysunek poniżej:



I jak widac mam okresloną wysokość i szerokosc ramek w ktorych powinno byc umieszczone zdjęcie. Zdjecia beda wstawiane różne poziome i pionowe. Czy ktos wie jak zrobic galerie ktora bedzie elegancko wyglądala ze wszystkimi zdjeciami pionowymi jak i poziomymi. Zeby kazde zdjecie nie tracąc na jakości wyswietlalo sie w okreslonym obszarze? Moglbym ustawic w img src szerokosc i wysokosc z tym, ze jak wstawie zdjecie pionowe czy poziome wtedy oczywiscie trace na jakosci i zdjecie wyglada beznadziejnie..

Dlaczego temat postawilem w dziale AJAX JS? - Chcialbym aby po najechaniu na miniaturke zdjecia automatycznie wczytywalo mi sie zdjecie wieksze po lewej stronie. Czy ktos ma na tyle kompetencji aby mi pomoc w tym chyba nie latwym problemie?

Za wszelką pomoc bede zobowiązany, pozdrawiam.
ShadowD
Nie łatwym, gdzież trochę pracy i znajomości i łatwym. winksmiley.jpg

Jest kilka sposobów, przybliżę z jakiego korzystam:
1. PHP - zmniejszam obrazek tak by nie był za szeroki/wysoki. Możesz robić to przy każdym wyświetleniu, ale lepszym pomysłem jest zapisać go w kilku rozmiarach.
2. HTML - tu wyśrodkowujemy obrazek w pionie i poziomie, nie jest to takie trudne jak się wydaje, ale trochę czasu trzeba spędzić by to samemu odkryć. (Mój pomysł na to działanie pod spodem)
3. JS - za pomocą gotowej biblioteki np. lytebox lub podobnych można osiągnąć efekt powiększania, tutaj korzystamy już z oryginału zdjęcia.

Działanie można zaobserwować na http://www.kajakisternik.pl/Galeria
Kod potrzebuje wspomagania w starszych wersjach IE. wystarczy pobrać rozmiar obrazka i obliczyć marginesy. Zaś w innych przeglądarkach sam statyczny html daje sobie spokojnie radę. winksmiley.jpg

Ps. Polecam firebuga do przeglądania kodu i zaznaczam, że mój sposób może nie być idealnym/poprawnym, pewnie znalazł by się lepszy sposób.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.