Webmaster Blog

Members blog at WebmaisterPro. Covering topics related to online marketing, SEO, web development as well as software reviews.

Choosing the Right LightBox Web Design Approach for You

 Using a LightBox approach to handle images and other media will provide smoother animation and sleek aesthetics to your site. The 3D animation and the user's ability to view images without distractions is just a couple of reasons many designers prefer using this approach to handling media on their site. Some coders prefer to create customized versions of LightBox, such as CSS-only versions. In the near future all websites will be using CSS exclusively and JavaScript will be a thing of the past. Currently there are some downsides to using CSS-only LightBox approaches.

Upside to Using a LightBox Plug-in

LightBoxA LightBox Plug-in on your page will professionally display images, mp3, mp4, f4v, .mov files, Flash, YouTube videos, Vimeo, and Viddler videos. You can embed videos anywhere on the site easily with the LightBox Plug-in. The videos embedded will take up less space on the landing page no matter what the dimensions of the video are. LightBox also gives a sales page a professional appearance with its stunning effects. The plugin also allows you to embed media by using anchor texts and images, group media files, load other HTML pages from your site and even embed PDF files. Some LightBox plugins are free. The free plugins have many useful features and meet the needs of some novice web designers. For professional web designers who will use the product frequently a more advanced plugin is preferred. For many web designers it is actually more beneficial to not use a plugin at all and simply put in the LightBox code themselves so that they can customize it to their specific needs. Numerous web designers are opting to use CSS LightBox to handle the media on their site.

Downside to Using CSS-Only LightBox to Handle Media

One of the main issues faced by web designers who want to use CSS-only LightBox is that animation only fires once and will only fire again when the webpage is refreshed. You can still use CSS primarily with your LightBox but you will want to alleviate the issue of animation only firing once by incorporating JavaScript. You can use JavaScript to rebuild the node so that the page does not need to be refreshed by the user to see the animation again. Simply add a new class to your CSS as well as to the JavaScript facade. Another issue with using CSS-only LightBox for your images is that Internet Explorer does not always support CSS-only LightBox. Generally IE8 and below will not recognize the ":target pseudo-class." To get around this issue the web designer can use polyfill such as IE7.js or Selectivizr. Using LightBox to handle media such as images, animation, video, and files gained popularity quickly when it was first introduced to the web design community. LightBox has only become more popular since its debut and many imitations have been produced as well as many tweaks made to the original program by coders. The ability to customize LightBox to the designers liking is one of the reasons why it remains so popular in the web design community. Deciding which LightBox approach to use (plug in, original LightBox, or customized version) is a matter of personal preference and affordability.

This post is written by John Lewis and he works at PriceCollate as a writer.

Rate this blog entry:
VOIP is a cutting edge technology pivotal for ever...
Responsive Web Design Interactive Infographic


No comments yet
Already Registered? Login Here
Thursday, 11 August 2022
If you'd like to register, please fill in the username and name fields.

Captcha Image