Hoverbox Galeria

03 Jan 1:09 pm


Original: http://sonspring.com/journal/hoverbox-image-gallery by Craig Erskine

Niedawno skończyłem czytać CSS Mastery, i myślę, że w końcu dostał dobre zrozumienie pozycjonowanie jak bezwzględna i względna (nie) działa w przeglądarce Internet Explorer. I zostały majstrować ten bit kodu od wczorajszego popołudnia, pomagając znajomym Designer swojego klienta miejscu. Jednak zdecydowaliśmy się pójść nieco inną drogą do ich galerii. Więc, przekazać ją do Ciebie z nadzieją, że okaże się to pomocne. Zasadniczo, to jest super lekki (8kB) przewróceniu galerię zdjęć, która używa niczego poza CSS …

Hoverbox: Przykład Zobacz | Pobierz tutaj (280 KB)

Wykorzystuje łącze zakotwiczenia dla efektu, bo to jest jedyna rzecz, która Internet Explorer umożliwia: hover pseudo-class pracować. Podczas gdy mój przykład strona ma tylko # związane, może to łatwo zauważyć do pełnej wersji odpowiednich obrazów, lub na stronie internetowej, jeśli zdecydujesz się go użyć dla portfela projektowego. Na razie wykorzystuje zdjęcia zrobione przez rodzinę i przyjaciół.

Postanowiłem nazwać Hoverbox, bo po pokazaniu go Dustin, on powiedział, że to jak mini zestawu. Podczas gdy mój przykład jest nawet w pobliżu tak fajne, jak te, to ma taką samą zasadę w umyśle pojawiały się zdjęcia bez wpływu na zawartość stron na układ. Jako, że jest to wywołane przez myszy a: hover, głupie imię urodził. Podoba mi się również fakt, Hoverbox działa z wyłączoną obsługę JavaScript.

Został on przetestowany w bieżącej kompilacji wszystkich najnowszych przeglądarek głównych i pracuje w Camino, Firefox, IE6, Opera i Safari. Tak, jestem przy założeniu, że działa w większości opartych na Gecko silników. Samo zjawisko działa nawet w IE5.5, ale ja się tym nie przejmowałem go wspierać, ponieważ serveral lat to wystarczająco dużo czasu, aby użytkownicy być zaktualizowane do wersji sześć Z wszystkich, że z drogi, oto jak to działa …

Magia dzieje się na a: hover, gdy podgląd w link idzie z konieczności display: none; do wyświetlenia:. Block; z pozycjonowania bezwzględnego i wartości ujemnych na górę iw lewo. W dobrych przeglądarkach, jest umieszczony zgodnie z zawierającego li, który jest ustawiony na wyświetlanie: względna, ale w Internet Explorer 6 + 7, warunkowe miejsce komentarzy pozycjonowania na zawierających href.

Ze względu na różnice w granicy / padding na li, przesunięcie w pikselach jest ignorowana dla IE6. Ten koryguje mniejszych dimenions na powiązania, równa całkowitej szerokości img oraz jej granic i wyściółka. Próbowałem tylko używając -50% zarówno dla górnej i lewej, ale Opera wydawała się dusić na wartościach procentowych.

Aby zapisać się na czas ładowania, Używam tylko jeden obraz zarówno miniatury i przewróceniu podglądu, ale możesz równie dobrze mieć oddzielne pliki dla każdego przykład, jeśli sobie tego życzą. To zależy, jeśli ziarnistość przymusowych ograniczeń wymiarów Ci przeszkadza, czy nie. Powodem załadować każdy obraz dwa razy, a nie tylko zwiększenie rozmiaru pojedynczego obrazu na roll-over jest ze względu na niespójne zmiany powoduje to w układzie strony. Tak więc, choć nie jest nieznaczna redunancy, bije konieczności pre-cache obrazy z JavaScript.

Uwaga: kod Hoverbox jest darmowy. Zrobić z nim, co chcesz w swoich projektach. Ja tylko proszę, nie rozpowszechniać kod poprzez repozytoria udostępniania szablonów, bo czasami się aktualizacje, aby zapewnić wiele zgodność przeglądarki. Jeśli chcesz rozpowszechniać, po prostu link do tej strony tak, że ludzie zawsze są najbardziej aktualnych wersji.

Update: Dzięki Craig Erskine, moje demo Hoverbox teraz działa bez żadnych obcych tagów rozpiętości. Sprawdź stronę Craiga przykład – tutaj.

Comments are closed