30 Efficient jQuery Lightbox Plugins
jQuery is a powerful tool and using it has become a sine qua non condition of web designing. It practically transforms a web page from dullness to an entertaining and catchy piece of work. For images we have the lightbox plugin in its many variations. It displays images using modal dialogs and it became very popular because it is very easy to implement. You have to bookmark this article cause you don’t want to forget using one of these plugins in your future designs.
Lightbox 2 allows you to present images in a slick window, while darkening the rest of the page. It makes your site look professional, and adds very little to page load times. It does not require any browser plugins to work, and works on just about every web browser out there! When a browser doesn’t support javascript, the code fails gracefully.
Check the Lightbox 2 plugin for WordPress adapted by Rupert Morris.
A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4
Why you should be using ColorBox:
- Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
- Lightweight: less than 9KB of JavaScript.
- Appearance is controlled through CSS so users can restyle the box.
- Behavior settings can be over-written without altering the ColorBox javascript file.
- Can be extended with callbacks & event-hooks without altering the source files.
- Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
- Preloads background images and can preload upcoming images in a photo group.
- Written in jQuery plugin format and can be chained with other jQuery commands.
- Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
- Released under the MIT License.
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
Features
- Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
- Customizable through settings and CSS
- Groups related items and adds navigation.
- If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
- Support fancy transitions by using easing plugin
- Adds a nice drop shadow under the zoomed item
[click to continue…]
Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js)
By Dmitry Semenov Copyright Smashing Magazine
A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. For this reason, I created Magnific Popup, an open-source lightbox plugin focused on performance.
In this article, I’ll share the techniques I employed in creating this plugin, techniques that can make your lightbox much faster and easier to use, whatever the device being used.
1. Speed
We might not be able to speed up the loading time of an image with this lightbox plugin, but we can create the perception of a faster loading time.
Progressive Loading of Images
The majority of lightbox plugins will fully preload an image before displaying it. This is done to figure out the original size of the image and to center it with JavaScript. Because Magnific Popup centers the content with CSS, we can avoid preloading and instead display the image right away to take advantage of progressive image loading. It will render and show the image while the data is being received.
You can speed this up even more by progressively rendering the JPEG. It is rendered not from top to bottom, but from low quality to full quality, so the user can discern the image even faster. The type of rendering to use is strictly a matter of preference.
[click to continue…]
JsFiddle is an amazing tool that is accessible anywhere via a browser. It allows you to rapidly create demos, examples, bugs, and many other web-based applications and sites.
Attention all Front-End Developers: How can you make JavaScript less painful. Use JSFiddle. JS Fiddle is a great little tool originally written by the guys at MooTools to help them develop the framework. It’s been expanded and improved to include all the major JavaScript frameworks. It gives you four panes. One for JavaScript, one for HTML, one for CSS and one to preview your code as it would run in a browser. This gives us
Attention all Front-End Developers: How can you make JavaScript less painful. Use JSFiddle. JS Fiddle is a great little tool originally written by the guys at MooTools to help them develop the framework. It’s been expanded and improved to include all the major JavaScript frameworks. It gives you four panes. One for JavaScript, one for HTML, one for CSS and one to preview your code as it would run in a browser. This gives us a great way to test out and tweak code on the fly without having to switch back and forth between editor and browser, or upload code to a server to run. Today we will take a look at using JSFiddle with jQuery/JQuery-UI.
First, let load JSFiddle in the browser and familiarize our selves with the interface. Browse to http://www.jsfiddle.net.
[click to continue…]
30 Useful jQuery Mouseover Effect Examples
jQuery Mouseover is really very attractive for visitor to see your blog. There are more style of jquery mouseover effect such as jquery popup, jquery mouseover event, jquery on mouseover, jquery mouseover tooltip…etc. It is really useful tooltip jquery plugin can help you create high quality professional web design.
Some effect on jquery image effect when you take mouse over the button or images the active effects will happen, it similar using flash design. But now we only using query or css to make beautiful action effect and more compatible. With my previous post i also taking about useful example CSS3 style as well, it is really important for web designer.
[click to continue…]
Pinterest RSS Tricks
Pinterest is one of the hottest new social media communities on the market. It fuels creativity, collaboration, and organization–and brands love the visual possibilities it affords.
You’re probably already familiar with how you can hit a “Tweet” or “share” button for each item you post to Pinterest. What many people don’t know is that Pinterest generates an RSS feed of everything you post, and more specifically, each Pinboard you create. So whether your pinboards focus on gadgets or design, you can use Pinterest to easily save and share your latest finds by topic automatically, if you are using feeds to populate your social media holdings.
Creating a feed from Pinterest is simple:
User feed:
http://pinterest.com/username/feed.rss
Board feed:
http://pinterest.com/username/board/rss
The Code Side Of Color
By Ben Gremillion copyright Smashing Magazine
The trouble with a color’s name is that it never really is perceived as the exact same color to two different individuals — especially if they have a stake in a website’s emotional impact. Name a color, and you’re most likely to give a misleading impression. Even something like “blue” is uncertain. To be more precise, it could be “sky blue”, “ocean blue”, “jeans blue” or even “arc welder blue”.
Descriptions vary with personal taste and in context with other colors. We label them “indigo”, “jade”, “olive”, “tangerine”, “scarlet” or “cabaret”. What exactly is “electric lime”? Names and precise shades vary — unless you’re a computer.
Code Demands Precision
When computers name a color, they use a so-called hexadecimal code that most humans gloss over: 24-bit colors. That is, 16,777,216 unique combinations of exactly six characters made from ten numerals and six letters — preceded by a hash mark. Like any computer language, there’s a logical system at play. Designers who understand how hex colors work can treat them as tools rather than mysteries.
[click to continue…]
How To Create Your First iPhone App (2012 Edition)
By Jen Gordon copyright Smashing Magazine
Update: 01/10/2012: The original version of this article by Jen Gordon was published in August 2009. It was thoroughly revised and updated by the author in September 2012. — Editorial Team
Since the iTunes App Store launched in 2008, over 500,000 apps have been approved by Apple, and thousands more app ideas are scrawled on napkins across the world every day. But question remains, how can a person with limited technical skills create an iPhone app?
The good news is anyone can make an iPhone app, it’s just a matter of knowing the series of actions you need to take to make it happen. Be sure to bookmark this article because it will serve as a guide for learning the process for creating your first iPhone app, going step by step from idea to the App Store.
[click to continue…]
CSScomb: Sorting CSS Properties, The Better Way
By Slava Oliyanchuk copyright Smashing Magazine
CSScomb is a utility to sort CSS properties within each selector declaration in a predefined order. The CSScomb algorithm is intended to be as close as possible to the choices a Web developer would make when working on CSS code. In order to re-sort, it is would usually be necessary to cut and paste lines, taking into consideration comments, multiline values, hacks — everything you would encounter in any serious project. This task is fairly dull to do by hand: you can trust CSScomb to do it for you.
[click to continue…]
