![]() ![]() You may be wondering what's the difference between iframe and video-iframe lightbox types? The latter has its height permanently locked to 56.25% tall (16:9 ratio) making it good to use for embedded video types like Internet Archive, Veoh, Vidyard, Wistia, and many others. Video iFrames require a data-lightbox-type="video-iframe" attribute.įor example, our iFrame example above has the following markup:.Inline requires a data-lightbox-type="inline" attribute.AJAX requires a data-lightbox-type="ajax" attribute.iFrames require a data-lightbox-type="iframe" attribute.Tip: We add the aria-haspopup="dialog" attribute to our link, to improve webpage accessibility.Ī couple of content types require some additional attributes on your 'trigger' link or button, to tell TopBox how you want the target content handled: However this can be changed to another selector name, attribute, or element type, if you prefer. To make a link (like an image) open in TopBox with a title, the HTML markup is as simple as this:īy default, any link with a class of lightbox will trigger a TopBox. So feel free to take only what you need and merge the TopBox code into your existing website code. You might not need the extra jQuery call. The chances are that your webpage already includes CSS and / or jQuery. Then add the jQuery Javascript call, topbox.js and your function to the end of your webpage, ideally before the closing tag, like this: Upload the TopBox files (within the /src/ directory) to your web server.Īdd a call to topbox.css stylesheet within the section of your webpage like this: TopBox is maintained on Github as an opensource project.ĭownload the source code files from Github. A durable and flexible lightbox effect you can depend upon. TopBox is used in thousands of websites ranging from small blogs right-up to fortune 100 companies. The page background can be blurred, when the lightbox opens.Various accessibility improvements, including features like keyboard focus and ARIA labels.Greater control over the attributes used for lightbox triggering and captioning.Easier translation of lightbox user interface tooltips into different languages.Added HTML5 Audio, Dailymotion, SVG, TED, Brighteon, PDF, iFrame video and WebP support.Deleted older hacks and prefixes for obsolete web browsers (like Internet Explorer).Vimeo and YouTube video embeds support SSL protocol and autoplay.Sharper, retina-display optimised navigation buttons with UTF-8 / CSS.Some of the things that are different in TopBox, compared with the original Nivo Lightbox: TopBox is MIT licensed, so you are free to download and use it wherever and however you want. Because Nivo Lightbox is seemingly no longer actively updated, I have released my variant of Nivo Lightbox opensource, under the name of 'TopBox'. Along the way, I found and fixed several bugs in the original Nivo Lightbox and made improvements of my own. I also added Nivo Lightbox to a number of plugins, themes and client websites as things progressed. I created a stack addon for the RapidWeaver publishing platform (named TopBox) around 2012, which made use of Nivo Lightbox. See exactly what your users will see.TopBox is derived from Nivo Lightbox. Preview your form layout prior to publishing. No third-party services or accounts required. Seamless integration with Rapidweaver and your existing Rapidweaver based site. An example can be seen here.Įdit-mode UI and Published content both look great on Retina based displays. Items built specifically for use on Catalog/Online Store style pages where images will position based on the layout ( grid or list ) chosen by user. ![]() Items built specifically for use on FAQ style pages where clicking the title will reveal the content. An example can be seen here.įilter makes it super simple for your users to drill-down to the exact item they are searching for using combo filters. An example can be seen here.Ĭreate stunning photo galleries using Filter to display the photos in a fancy lightbox. This layout is similar to what Pinterest does. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. ![]() ![]() Item sizes can be set with percentages for responsive layouts. Rearrange the order of item elements based on their data. Items that match that filter will be shown. Hide and show item elements with the filter option. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |