Everyone loves lightbox javascript effects, since the original Lightbox script there has been countless clones generated for all the popular Javascript libraries. This collection rounds up the top ten Lightbox scripts for jQuery in particular, so remember to keep it bookmarked for your next design project!

jQuery Lightbox Plugin

Supported Media: Images

View Demo

Download

Fancybox

Supported Media: Images, Inline HTML, iFrame

View Demo

Download

Shadowbox

Supported Media: Images, Inline HTML, iFrame, AJAX, Flash, Video

View Demo

Download

ThickBox

Supported Media: Images, Inline HTML, iFrame, AJAX

View Demo

Download

Slightly Thickerbox

Supported Media: Images, AJAX, Video

View Demo

Download

Fancy Zoom

Supported Media: Images, Inline HTML, Flash

View Demo

Download

Facebox

Supported Media: Images, Inline HTML, AJAX

View Demo

Download

nyroModal

Supported Media: Images, Inline HTML, iFrame, AJAX, Video

View Demo

Download

Interface Imagebox Demo

Supported Media: Images

View Demo

Download

piroBox

Supported Media: Images

View Demo

Download

Greybox Redux

Supported Media: Images, iFrame

View Demo

Download

prettyPhoto

Supported Media: Images

View Demo

Download

You can stop others from hotlinking your site’s files by placing a file called .htaccess in your site root (main) directory. The period before the name means the file is hidden, so you may want to edit your file as htaccess.txt, upload it to your server, then rename the txt file to .htaccess in your directory. Contact your web host on how to access your directories and configure your .htaccess file.

Before writing code in your .htaccess file, there is a online site which provide you create your Hotlink protection of images file.

Htaccess Tools

Use this generator to create a .htaccess file for hotlink protection of your images and pictures. Hotlink protection can save you lots of bandwidth by preventing other sites from displaying your images.
Example: Your site url is www.wparena.com. To stop hotlinking of your images from other sites and display a replacement image called hotlink.gif from our server, place this code in your .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?wparena.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png)$ http://altlab.com/hotlink.gif [L]

The first line of the above code begins the rewrite. The second line matches any requests from your own wparena.com url. The [NC] code means “No Case”, meaning match the url regardless of being in upper or lower case letters. The third line means allow empty referrals. The last line matches any files ending with the extension jpeg, jpg, gif, bmp, or png. This is then replaced by the hotlink.gif image from the altlab.com server. You could easily use your own hotlink image by placing an image file in your site’s directory and pointing to that file.

To stop hotlinking from specific outside domains only, such as myspace.com, blogspot.com and livejournal.com, but allow any other web site to hotlink images:

RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(.+.)?myspace.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+.)?blogspot.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+.)?livejournal.com/ [NC]
RewriteRule .*.(jpe?g|gif|bmp|png)$ http://altlab.com/hotlink.gif [L]

You can add as many different domains as needed. Each RewriteCond line should end with the [NC,OR] code. NC means to ignore upper and lower case. OR means “Or Next”, as in, match this domain or the next line that follows. The last domain listed omits the OR code since you want to stop matching domains after the last RewriteCond line.

You can display a 403 Forbidden error code instead of an image. Replace the last line of the previous examples with this line:

RewriteRule .*.(jpe?g|gif|bmp|png)$ – [F]

Warning: Do not use .htaccess to redirect image hotlinks to another HTML page or server that isn’t your own (such as this html page). Hotlinked images can only be replaced by other images, not with an HTML page.

As with any htaccess rewrites, you may block some legitimate traffic (such as users behind proxies or firewalls) using these techniques.

但凡看到有关图片秀的工具，都会多看两眼，虽然这样的工具真的很多。打算尝试一下SimpleViewer的方法，给自己的BLOG填上些图片什么的。

Original article from mashable.com.

Whether you’re an artist, designer, or photographer, your web portfolio is your calling card and your showroom. While the work should speak for itself, presentation is important. Modern style and clean functionality can be a great selling point.

If you’re looking for an alternative to hand-coding or DreamWeaving your ultimate gallery, check out these five great tools that should make maintenance a bit easier, and give you a stylistic leg-up on the competition.

1. SimpleViewer

---

Simpleviewer is simply gorgeous, and can generate a stunning visualization of your portfolio that is sure to impress. It uses XML to pull in images from a web directory (or Flickr, if configured) and display them as a Flash presentation. You can incorporate captions and links for each image.

The viewer comes in a few impressive flavors, including the TiltViewer (my personal favorite), and thePostcardViewer, both shown below.

Pros: You can’t beat the design. The presentation is clean, artistic, professional, and unique. While there is a pro version, the free download is highly customizable and full-featured. The viewers are scalable to full pages, or embeddable as part of your existing website or blog.

Cons: It’s not so simple. There is no software or user interface for SimpleViewer. It is powered by one Flash file and one XML file, so you’ll have to know how to manipulate the code, and have access to dedicated web hosting where your files will live. The support area presupposes you know most of this, but is a good resource on how to set up and implement your viewer.

2. PhotoSnack

---

PhotoSnack is a web-based solution that generates slideshows from photos you upload to your account. The free version offers clean, embeddable flash presentations. If you’re looking for a bit more customization, you don’t have to buy the farm to get a pro account. Additional features can be purchased a la cart through the website’s “points” system.

Pros: The web interface is easy to navigate and use. Your photos live on PhotoSnack’s website, so there’s no need for web hosting or link pointing. Updating, changing, and reorganizing slideshows is a snap, and customizable embed codes ensure your presentation will fit snugly on your site.

Cons: While there are a few custom options, the presentation is fairly basic for free accounts, and the embeds contain links back to the main site. It is also worth noting that Flash is still not viewable on most mobile platforms and may leave a gaping hole for some users with outdated browser plugins.

3. ScriptOcean Accordion Menu

---

If you’re looking to avoid Flash altogether, ScriptOcean has some handy JavaScript solutions that really look sharp. Among them is this accordion menu that unfolds — with optional captions and links — as you roll your mouse over it (click through to the website to see it in action).

ScriptOcean provides downloadable software with a user interface that makes compiling and customizing your menu quite simple. Add your images from a local directory, set the dimensions, colors, and animation properties, and the software generates a JavaScript file and some embed code. Upload everything to your website and embed as needed.

Pros: The user interface makes this otherwise daunting code project very intuitive. Customization is also very granular. You can control everything from the colors between the slides to the speed at which they snap together.

Cons: You must host the images and scripts yourself, and you should understand where to put them in your web directory so that the JavaScript file can reference them. The software interface makes this a bit easier to configure, but it may not be for beginners.

4. Carbonmade

---

Carbonmade is an online portfolio community of sorts. It offers a really great-looking presentation that is sure to please the discerning eye of a graphic designer. It’s Flash-free, with a strict anti-clutter policy. A great drag-and-drop interface lets you organize, present, and share your work with ease.

Pros: Simplicity is the name of the game here. There is nothing to distract a viewer from your art. In addition to photos, you can also upload video and flash projects. Built-in metrics let you know who is viewing, and connecting with other artists is easy through the online community.

Cons: Carbonmade provides no viable way (that we can see) for embedding your portfolio on your own website. This may be a drawback for some professional users, who would rather people view their work on their own domain, rather than a third-party site.

UPDATE: Carbonmade does allow you to map your portfolio to a custom domain when you upgrade to a paid account for $12 per month.

5. Flickr Slideshows

---

When all else fails, there’s always your Flickr account. If all of your artwork is already there, why not group the best of it into a set and embed the slideshow into your portfolio website? For a free service, the Flickr slideshow is surprisingly elegant and functional.

Unfortunately, there’s no way to generate embed code from Flickr itself, but there are a few handy tools that can do it for you.

FlickrSLiDR is a really simple web-based solution. Simply drop in the URL of the set, user, or group you want to create the slideshow from, set your parameters, and click “create” to get some code you can pop right into your website or blog.

Flickrshow is another easy and customizable way to embed Flickr slides. Simply reference Flickrshow’s JavaScript code as per the installation instructions, and tweak the parameters as needed.

Pros: It’s free, easy, and the social aspect of Flickr itself provides many advantages for hosting your content there.

Cons: A branded slideshow may not be ideal for a professional website or portfolio.

Original article from mashable.com.

MediaLoot is presenting a free set of user interface elements that can help designing/prototyping faster.

It has 3 distinct styles: glossy, satin/light gradient, and one-color which the satin/light gradient set is available in 7 different colors.

The set comes in both .PNG & .PSD formats and includes items like:

• control buttons
• info boxes
• breadcrumbs
• forms
• scrollbars
• & more..

Preview Image

You can go to the site medialoot.com to download the icons.

Some of the best things in life are free. When it comes to icons and icon sets, there are many talented designers and artists that choose to provide beautiful and useful icon sets for commercial and/or personal usage.

In this collection, you’ll see 40 beautiful, free icon sets that you can use in a variety of ways (websites and/or your desktop). In total, you’ll find close to 3000 invidual icons showcased in this article.

Note: It’s important to read the fine-print before using any icon sets; some may have restrictions for commercial use (or require that you give credit to the designer).

Yoritsuki icons

35 icons – Download (PNG and ICO)

Hand Drawn Doodle Icon Set

14 icons – Download (PNG and JPG)

rounder_png

43 icons – Download (PNG)

eico 1 year

17 icons – Download (PNG, ICO, and ICNS)

Wifun Icons

6 icons – Download (PNG and ICO)

3D Cartoon Icons Pack

111 icons – Download (PNG, ICO, and ICNS)

3D Cartoon Icons Pack III

205 icons – Download (PNG, ICO, and ICNS)

De Freu

41 icons – Download (PNG)

Practika

11 icons – Download (PNG)

Dellipack 2

15 icons – Download (PNG)

Finance and Applications

29 icons –Download 1 (PNG and ICO) | Download 2 (EPS vectors)

Heart

22 icons –Download (PNG)

The Leaves Fall

11 icons -Download (PNG and PSD)

Icon Set

27 icons – Download (PNG and ICO)

DeskMundo Live Icons

8 icons – Download (PNG)

FRESH Add-on

59 icons – Download (PNG, TIFF, ICN, ICO)

Milky

131 icons – Download (PNG)

Bright!

148 icons – Download

Sweetie

182 icons – Download (PNG and PSD)

Social Web Buttons

20 icons – Download (PNG)

Social Bookmark Iconset

12 icons – Download (PNG)

ecqlipse 2

123 icons – Download (PNG)

HydroPRO

23 icons – Download (PNG)

Circular Icons

100+ icons – Download (PNG)

Shopping Cart Icon

1 icon – Download (PNG)

Paper Clip

1 icon – Download (PNG)

iConPack

18 icons – Download (PNG)

V!Va Icons

9 icons – Download (PNG)

Scrap Icons

18 icons – Download (PNG)

Blueset icons

8 icons – Download (PNG)

UMI Icons

10 icons – Download (PNG)

Black Neon Agua

270+ icons – Download (various formats)

openPhone Icon Pack

12 icons – Download (PNG and ICO)

Free RSS Feed Icons

6 icons – Download (PNG)

Feedicons2

33 icons – Download (PNG)

credit cards pixel icon

5 icons – Download (PNG)

Function Icon Set

128 icons – Download (PNG)

Mini Pixel Icons

320 icons – Download (GIF)

Silk Icons

700 icons – Download (PNG)

Web Application Icons Set

20 icons – Download (PNG)

Original article from sixrevisions.com.

This article is going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site. You’ll see it’s so easy to handle the image effects with only writing lines of CSS words, no javascripts, no coding. just it is!

Related properties include:

• -webkit-box-shadow
• -moz-box-shadow
• box-shadow

• -webkit-transform
• -moz-transform
• transform

• -webkit-transition

Read the original article here.

Note with the hovering examples that the animation will reverse itself when the mouse moves out of the div. Any time the property changes value, the animation will simply start again with the current position as the from value and the new value as the destination. The transition properties of the source state are used to figure out how to animate to the new target state.

The key points to understand about transitions are:
(1) They are implicit animations. Scripts and stylesheets can be written as normal, and the animations will simply happen implicitly as the properties change values.
(2) They degrade gracefully. Browsers that do not support transitions simply won’t animate, but otherwise all code and style rules can remain the same.

Here are more detailed descriptions of the properties. All of these properties can take multiple comma-separated values.

transition-property
Values: none | all |
Initial Value: all
Description: Specifies what property triggers an animation. A value of none means there is no transition. A value of all means that every animatable property triggers an animation. Otherwise an animation will only trigger when the exact specified property changes value.

transition-duration
Values:
Inital Value: 0
Description: Specifies how long the transition should take. The default is 0.

transition-timing-function
Values: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
Initial Value: ease
Description: The transition-timing-function property describes how the animation will proceed over time. Keywords can be used for common functions or the control points for a cubic bezier function can be given for complete control of the transition function. To specify a cubic bezier function, you give an X and Y values for 2 of the control points of the curve. Point P0 is implicitly set to (0,0) and P3 is implicitly set to (1,1). These 4 points are used to compute a cubic bezier curve.

The timing function keywords have the following definitions:
linear – The linear function just returns as its output the input that it received.
defaultease – The default function, ease, is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in – The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out – The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out – The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier – Specifies a cubic-bezier curve whose P0 and P3 points are (0,0) and (1,1) respectively. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2).

Here’s another demo created by myself after reading this article. really exciting exercise!!

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can’t do that yet) we are merely hiding the “extra” and displaying only a part of the image we want. These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.

Click here to read the original article.

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

Check out the demo to see what we’ll be building. Remember, because we’ll be using a couple of CSS3 properties, users with IE won’t see the complete effect, but fully supporting browsers such as Firefox and Safari will be treated to the whole experience. We’ll use basic CSS to style up the photos into a Polaroid style images, then inject some additional styling with shadows and rotation, then use the z-index property to alter the stacking order of all the objects.

Click here to read more details.

It’s the Christmas season once again, folks. Santas and Christmas trees are back. Christmas-inspired concepts are slowly making its way back as well. examples of these are Christmas posters and Christmas cards that we see around us.As our pre-christmas treat, we have compiled 35+ Free Photoshop Brushes for the Christmas Season. These brushes, once used, will surely create an amazing touch to your designs. Establish unique and creative images with these brushes. Some of you may be itching to experiment with these brushes now. These were made by designers and photoshop lovers around the globe. Feel free to download these items right into your PC and use them to create your own Christmas-inspired designs.

Have a HA-HA-HAPPY browsing! click here to read more details.

I’m not sure if you’ve ever had a look at the prices on some non-stock photography sites (pictures of Gummy bears for $769.00 anyone?), but they reach far beyond the budget of the typical designer/developer. However, many places online allow you to obtain high-quality stock photos for free, giving the average starving artist a chance to create wonderful works of art/design without having to use next month’s rent on stock photos.

In this article, we review the 15 best places to free stock photos online for designers.
read details here