Галерэя Hoverbox
Апошняе абнаўленне: код Hoverbox можна вольна выкарыстоўваць, так што з ім вы можаце рабіць у вашых праектах усё, што жадаеце. Я толькі жадаю папрпсіць вас не распаўсюджваць код з дапамогай шаблонаў сумеснага сховішча, таму што я час ад часу абнаўляю яго, каб забяспечыць сумяшчальнасць некалькіх браўзара. Калі вы жадаеце распаўсюдзіць слова, проста дайце спасылку на гэту старонку, каб людзі заўсёды атрымлівалі самую апошнюю версію.
Акрамя таго, дзякуючы Крэйгу Эрскіну, Hoverbox цяпер працуе без бессэнсоўных[ span ярлыкоў. Калі ласка, прачытайце каментары, каб убачыць усе магчымыя шляхі, з дапамогай якіх вы можаце наладзіць гэты код. Праглядзіце старонку Крэйга – тут.
Нядаўна я скончыў чытаць CSS Mastery і думаю, што я, нарэшце, атрымаў добрае ўяўленне пра тое, як абсалютнае і адноснае пазіцыянаванне (не ў) працуе ў Internet Explorer. Я працаваў з гэтымі кодамі з учорашняга дня, дапамагаў майму сябру дызайнеру з сайтам яго кліента. Тым не менш, мы вырашылі пайсці некалькі іншым шляхам да галерэі. Такім чынам, я перадаю яго вам з надзеяй, што ен апынецца карысным. Галоўным чынам, гэта суперлёгкія (8kb) перакульванні фотагалерэі, якая выкарыстоўвае толькі CSS …
Hoverbox: Адкрыць прыклады | Запампаваць тут (280 KB)
Ён выкарыстоўвае спасылкі толькі для эфекту, таму што гэта адзінае, што Internet Explorer дазваляе псеўда-класу hover рабіць. Хоць мой прыклад старонкі мае толькі # , злучаны з ёй, ен лёгка можа быць ператворана да поўнай версіі адпаведнага малюнка ці вэб-сайта, калі вы вырашыце выкарыстоўваць яго для дызайну партфоліё. Цяпер ён выкарыстоўвае фатаграфіі, зробленыя чальцамі сям’і і сябрамі.
Я вырашыў назваць яго Hoverbox, таму што пасля таго, як я паказаў яго Дасціну, ён сказаў, што ен было падобна да Lightbox. Хоць мой прыклад далёка не такі стромкі, у яго ёсць той жа прынцып у выглядзе малюнкаў, не закранаючых макету старонкі. Выкліканая мышшу a:hover, дурная назва нарадзілася. Мне таксама падабаецца той факт, што Hoverbox працуе нават з адключаным JavaScript.
Яна была пратэставана ў бягучыя зборцы ўсіх апошніх буйных браўзараў і працуе ў Camino, Firefox, IE6, Опера і Safari. Такім чынам, я мяркую, ён працуе ў заснаваных на Gecko рухавіках. Сам эфект нават працуе ў IE5.5, але я не стаў падтрымліваць яго, таму што некалькі гадоў досыць часу для карыстачоў, каб абнавіць яго да версіі 6. Пры ўсім тым, вось як гэта працуе …
Магія адбываецца нa:hover, калі.preview у спасылцы ідзе ад зdisplay: none; наdisplay: block; з абсалютным пазіцыянаваннем і адмоўныя значэнні для верхняй і левай. У добрых браўзарах ён размешчаны ў залежнасці ад утрымоўваных li, які ўсталёўваецца на display: relative, але ў Internet Explorer 6 + 7, умоўныя каментары, месца размяшчэння на ўтрыманне a href.
З-за адрозненняў у прымежных / абіўках наlі, зрушэнне ў пікселях перавызначаецца для IE6. Гэта выпраўляе невялікія памеры спасылкі, роўнай агульнай шырыніimg плюс яе мяжам і водступу. Я імкнуўся зрабіць гэта толькі з дапамогай -50% для верхняй і левай частцы, але опера ледзь не задыхнулася ад адсоткавага значэння.
Каб зэканоміць на часе загрузкі, я выкарыстоўваю толькі адзін малюнак як для эскізаў, так і для перакульвання папярэдняга прагляду, але можна гэтак жа лёгка мець асобныя файлы для кожнага асобніка, калі вы жадаеце. Усё залежыць ад таго, замінае вам ці не зярністасць прымусовага абмежавання на памеры. Таму я павялічыў нагрузку для кожнага малюнка ў два разы, замест таго, каб павялічыць памер аднаго малюнка, што прыводзіць да зрухаў у макеце старонкі. Такім чынам, хоць і ёсць малаважныя redunancy, б’е з папярэдняга кэшавання малюнкаў з JavaScript.
