Inseven designs | Calgary Web Design Company » Freebies Resources and Downloads

jQuery quickie: Colourful rating system with CSS3

inseven designs — Sat, 08 May 2010 00:48:39 +0000

By using the jQuery Color plugin, you can animate colours. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 feautures (rounded corners and drop shadow), you can create a Colourful rating system. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. Check the great work at marcofolio his idea, by making it more visually attractive.

create a Colourful rating system with jquery color plugin

20+ Social Bookmarking Iconset

inseven designs — Sun, 06 Dec 2009 00:21:23 +0000

6 Free New Social Icons – Digg, Twitter, Stumble, RSS, Delicious & Reddit

web icons

Fed up with the same standard set of social icons for your blog or site? This set of six social icons (Digg, Twitter, Delicious, RSS, Reddit & Stumbleupon) are free to use on your websites and blogs however you wish! The icons are provided many different formats.20+ Social Bookmarking Iconset

15 Development Creative Job Boards

inseven designs — Wed, 05 Aug 2009 00:30:57 +0000

I believe many developers themselves and freelancing, like myself is great way to earn extra income..or even better make it full time one with free conditions. This article is created to help you – find your potential clients or exactly opposite – to find who can do job for you. There are even job board directly related to help find programmer – designer and contrary. There are times when you can think, that you can do everything by yourself – but for me, I am better designer, and there is no way I will be very good PHP coder – I can get job done, but it takes a lot of precious time. Sometimes it’s better to hire somebody, so you can do what you do the best and not waste your time! Time is money remember!

1. Jobs Freelanceswitch

Place an advert on our job board for absolutely nothing! You’ll get talented freelance professionals contacting you to discuss your project immediately.

Categories:

All Jobs
Design
Development
Writing
Illustration
Flash
Misc

2. Krop

Krop is a Job Board and career resource website for creative professionals. Whether you’re looking for job, or hunting top-notch talent, Krop’s simple and powerful tools are geared towards connecting the worlds brightest minds with the best companies.

Pay to post: Jobs stay active for 60 days and are posted with credits. 1 Credit = 1 Job. $199 each, with additional discounts for bulk purchases. Credits never expire.

Categories:

Design
Development
Photography
Programming

A lot more sections for creative with excellent interface.

3. Odesk

Whether you are looking for new talent or already have a remote team, oDesk offers a complete solution for working online.

oDesk is the marketplace for online workteams, with the best business model for both buyers and providers. Unique approach guarantees to buyers that an hour billed is an hour worked, while guaranteeing to providers that an hour worked is an hour paid.

Categories:

Web Development
Software Development
Networking&Information Systems
Writing&Translation
Administrative Support
Design&Multimedia
Customer Service
Sales&Marketing
Business Services

4. Smashing Jobs

Why to use Smashing Jobs:

Your openings are featured in one of the top 20 blogs of the world
Your credits are valid for unlimited time
You can change your job postings whenever you like
Job postings are online immediately

Pay to post: $200 for full time, $100 for freelance, 30 days

Categories:

All jobs
Design
Programming
Other

5. Design Jobs On The Wall

When you post your job here, it will be instantly featured on Web Designer Wall and their network sites where designers will see it. Due to site strong following, Web Designer Wall appears on loads of online portals and design publications such as Web Designer magazine, Practical Web Design (.Net magazine), and Computer Arts Projects. Posting your job opening here means it will be seen by thousands of talented designers and developers who visit WebDesignerWall every day.

Pay to post: Freelance – $50/post, Full-Time = 75$/post for 30 days

Categories:

Design
Coding
Others

6. Elance

Elance is the leading site for online work where businesses connect with independent professionals to get work done.

Elance delivers an immediate, cost-effective and flexible way to hire, manage and pay independent professionals and contractors online. Companies tap into Elance’s skilled talent pool to distribute their work, while professionals use Elance to meet clients, stay independent and get paid for delivering great results.

Categories:

Web & Programming
Design & Multimedia
Writing & Translation
Admin. Support
Sales & Marketing
Finance & Mgt.
Legal
Engineering & Mfg.

7. SoloGig

Sologig.com is a niche website specializing in connecting contract-to-hire, contractors, freelancers, and consultants with quality employers looking for seasoned professionals. Registration is free, and unlike other project based websites, they never charge you project fees. There’s also no bidding on Sologig – you choose which projects you are interested in and negotiate pricing directly with the employer.

Categories:

Engineering & Aerospace
Creative & Design
Law & Paralegal
Clinical & Scientific
Sales & Marketing
Finance & Accounting
IT & Technica
Health Care
Energy
Construction
Other

8. Guru

Use Guru.com’s free service to search for and find Freelancers. Post your project. Get free quotes within hours. Outsource your contract work today.

Free service. No obligation to hire.
Pay Freelancers risk-free. With our SafePay Escrow service, your satisfaction is completely guaranteed.
Escrow guarantee
Get up to 2% money back and a chance to win $100 when you pay Freelancers via SafePay.
No tax form hassles. We issue 1099 tax forms for you for free.

Categories:

Websites & Ecommerce
Graphic Design & Multimedia
Illustration & Art
Marketing & Communications
Engineering & CAD
Networking & Telephone Systems
Legal, Fashion & Interior Designs
Programming & Databases
Writing
Editing & Translation
Admin Support
Sales & Telemarketing
Business Consulting
Photography & Videography
Finance & Accounting
Broadcasting

9. Authentic Jobs

Authentic Jobs is a targeted destination for web and creative professionals, and the companies seeking to hire them.

Categories:

Design
Development

10. CoroFlot

Coroflot’s job board is the largest and most active site on the internet specifically targeted at hiring designers and other creative professionals. Coroflot counts Fuseproject, Frog Design, Microsoft, Nokia, Landor, RIM, Nike, Intel, Blu Dot, and Sony among our clients, and they’ve all returned to use Coroflot again, for one reason: it works.

Sounds pretty impressive to at least try this one!

Categories:

3-D Modeling and CAD
Advertising
Architecture
Design
Education
Design
Management
Exhibit Design
Fashion Design
Graphic Design
Industrial Design
Interaction Design
Interior Design
Product Development
Research & Strategy
Sales & Marketing
Web Design

11. Fresh Web Jobs

One more job board for web professionals – currently 176 web jobs available.

Pay to post: $75 for 30 days listing.

Categories:

Programming
Design
Other

12. Get A Coder

Find Freelance Programmers, Web Designers and Freelance Writers for your next request. Outsource jobs to your home country or to countries where labor is cheap. Post a request for free and start receiving bids within minutes. Thousands of outsourced jobs prove that GetACoder is a cost-effective way to get the best talent in the world at an amazing low price. Grow your business and achieve a greater return on investment by using GetACoder.

Categories:

Web Design / Development
Database Development
Writing
Computer Platforms
Engineering
Testing / Quality Assurance
Project Management
Enterprise Resource Planning
Training
Programming
Graphics / Multimedia
Marketing / Promotion
Gaming
Security
Administrative Support
Requirements
Legal

13. Programmer Meet Designer

This is a site for programmers,web developers,designers,entrepreneurs and writers to find each other and work together to create websites that look and function great.

Categories: You can search through huge list of tags in this site.

14. 37 Signals Job Board

Industry leaders such as Apple, The New York Times, CNET, Facebook, Adobe, Trek, and American Express use this Job Board to reach today’s best and brightest web minds. Discover why this job board will find you better people than other job sites.

Pay to post: Jobs are $300 for 30 days, internships are $50 for 30 days.

Categories:

Design Jobs
Programming Jobs
Miscellaneous Jobs
Customer Service/Support Jobs
Business/Exec Jobs
iPhone Developer Jobs

15. Simply Hired

Excellent job search engine on the web. This site search thousands of job sites and companies, so you can easily find everything in one place! Also you can use several nifty tools to find local jobs, identify trends, research salaries, and secure that offer letter.

Categories: I will not list all of them here, since this site offers really wide variety, better check it out for yourself!

16. Behance Network

Sorry, I totally forgot about Behance Network website.

It is great place to submit and place your portfolio and get big exposure, find new clients in easy way. Very popular network and totally related to design creative!

And yes -good luck!

36 Color Gradient Sets For Photoshop and Resource Sites

inseven designs — Tue, 14 Jul 2009 19:20:50 +0000

Surprisingly I did not find many articles featuring color gradient sites, color generators and lastly beautiful collections of gradients. There are big variety of many color generators, color palettes and things like that, but not many really focus on Photoshop gradients. I don’t know that’s good thing or bad, but I really love gradients, many beautiful websites and logos are created just by using color variations in subtle, very creative way.

That is reason why in this blog post I will feature sites with good color gradient collections you can easily download and bookmark for later and really good color gradient collections separately. For that research I am using DeviantArt, though of course you can go there and browse by yourself, but to find such good resources it always takes time and research. I tried my best to do that and showcase beautiful gradients, which may seem simple, but just download them and you’ll look differently then as I did. I would also recommend not to go straight and download whole 1000, 2000 gradient collections because not quantity is important, but quality. Even better solution at least for me is bookmarking such resource pages and when I need to find something, I know where to look and then I download just what I need and no more or less.

LadyOak

Currently there are 67 gradient sets for Photoshop available, though you must register for free to get those files, but there are even more really good free download files so I really think it’s worth – I registered and nothing bad happened, there must be filled just few required fields and you’re in!

Ultimate Web 2.0 Gradients

This freebie from Dezinerfolio has been create 2 years ago already, but I think anyway you’ll find this useful, if you need quick premade gradient selection.

Official Adobe Website – Gradient Section

I really don’t know why, but this section doesn’t seem to be very popular, it’s DeviantArt where you can find really beautiful Photoshop resources and actually just everything else too design related. Anyway I found on this site many gradients worth downloading anyway, they have most recent, most popular and highest rated sections to sort out really outdated and not so good looking gradients.

BrushesDownload

Currently 287 gradient sets for Photoshop (until CS3) and Photoshop Elements available on this site. But that’s not all, you’ll find on this site also brushes, icons and several tutorials there. For me this page was really good discovery.

One more thing – if you create something like that for free, consider this to be one place to put your work on getting back your full credits.

Free Photoshop : Free Photoshop Gradients

17 very colorful gradients can be found there, again note they are supporting Photoshop (R) CS 3, CS 2, CS 7, 6 and Photoshop (R) Elements 5, 4, 3, 2, 1, PC + MAC OS X. Good thing is you can found there also free styles, brushes, shapes, plugins.

1000 Free Gradients – Web 2.0 Gradients

Beautiful colorful gradients, you might think they are too simple, but I think right good color code selections are key to success in design and at start or just in rush such freebies really can help to get maximal effect in the shortest time period.

Free4Photoshop – Free Photoshop Gradients

There are nine free gradient sets every set containing 30 unique gradients including single color, multicolor, transparent etc. You can see examples in live in the screenshot below.

BioRust – Photoshop Gradients

This is one more site where you need to register in order to download the files, but again I think it’s worth it, Biorust website also offers free fonts, actions, shapes, patterns, website templates – be sure to check them out too in download section.

Gradient Image Maker

Gradient images are used everywhere in web page design, ie, as the background of form buttons, DIVs, to act as shadows and other interesting visual effects etc. This online tool is created to allow you painlessly generate a gradient image of 3 types, with instant previewing so you get exactly what you had in mind.

Hand Picked Photoshop Gradients Packs From Deviantart

BOLD gradient pack by Kip0130

This gradient pack with 3 gradients is very popular and I was surprised at first. Then I downloaded those gradients and tried them – simple but very beautiful color selection, so in this case totally more is less.

Shattereds Gradients by shattereddesigns07

Gold gradient by ademmm

Apple Gradients by mppagano

Soft gradient by ademmm

4 gradients by Kip0130

MP: Underwater Gradients by millepetit

50 Golden Metal Gradients by Adoralyna

Web 2.0 Photoshop gradients by verbaska

While browsing on DeviantArt looks like ElvenSword kind of mastered color balance and has very, very good gradient packs and I wanted to feature and thank for here work there. Below is gradient packs created by her and by looking at them you’ll understand my sympathies.

Emerald Dragon Ps Gradients by ElvenSword

30 green gradients for Photoshop.

Landscape Ps Gradients by ElvenSword

Landscape themes painting bases and/or color blenders.

Ocean Breeze Psp Gradients by ElvenSword

Chic Sparkles by ElvenSword

Vintage Photoshop Gradients by ElvenSword

75 Beautiful vintage Photoshop gradient selection for the vintage, paper, fire, frame, rust, text works, autumn landscape themes, etc.

Heritage Platinum Ps Gradients by ElvenSword

These gradients are really good color picks resembling many different metal color. I really love these variations.

AKLPs Gradient Pack 1 by AKLP

20 soft yellow gradients by KumquatsLair

20 soft blue gradients by KumquatsLair

20 soft orange gradients by KumquatsLair

Vintage Gradients by ARTiK-NL

I enjoy subtle colors and beautiful yet simple variatons in this on.

51 Gradient Varieties by Liasmani

88 Gradient Varieties by Liasmani

66 Gradient Varieties by Liasmani

43 Gradient Varieties by Liasmani

Gradients 003: Skin Brightener by purplefeen

Retroactive Gradients by magdalena-stock

12 Gradients by kazugfx

Now you should be nice list to choose from. I’ll continue also with Part 2 and Part 3 of this article showcasing many more tools, tutorials and actual inspirational web and logo designs which are created using very precise and beautiful gradient effects so stay with us!

inseven designs — Tue, 16 Jun 2009 20:02:18 +0000

Navigation menus have really important role in any website. For big sites full with a lot of pages and articles, drop down menus and tabs are popular because they can make it a lot more easier to navigate and move through site, also you can save space on website displaying content on dynamic tabs. Also if you want to create a navigation menu, that really stands out of the crowd, jQuery could be the right choice to choose offering bunch of customizable options. That’s why I present to You 36 really good jquery navigation menu examples for every need.

1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. Be sure to check out the demo, you definitely will like it.

Preview || Download

2.Animated Menus Using jQuery

Learn how to create this amazing animated effect menu just with plain Xhtml,CSS and Javascript help, similar to Dragon Interactive (dragoninteractive.com).

Preview || Download

3. Create a Cool Animated Navigation with CSS and jQuery (Tutorial + Download)

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether.

Preview || Download

4.jQuery ListNav Plugin

This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

Preview || Download

5. jqDock menu

Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

Preview || Download

6.Sliding Jquery Menu

This tutorial explains and let you download sliding jquery menu and you can see the effect in action over on the PSDtuts webpage in the top right hand corner.

This is how looks finished demo version:

Preview || Download

7.CSS Sprites 2 – It’s JavaScript Time

Preview

8. CSS Mac Dock Menu

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfect to add on to my iTheme.

Preview || Download

9.Kwicks for jQuery

Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

7 Examples || Download

10.Jquery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

Preview || Download

11.Learning jQuery: Fading Menu – Replacing Content

Nice tutorial from CSS-tricks explaining how to use CSS with jQuery, this time he teaches how to use jquery fading options on menu.

Preview || Download

12. How to Make a Smooth Animated Menu with jQuery

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? This tutorial teaches how to do just that by building a menu and animate it with some smooth effects.

Preview || Download

13.Create Vimeo-like top navigation

Learn how to create navigation just like on Vimeo site, here is only xhtml,css used, but still I wanted to include this.

Preview + Vimeo site || Download

14. jQuery (mb)Menu 2.3

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component will get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

Preview || Download

15. Coda Slider

Preview || Download

16. jQuery idTabs

idTabs is a plugin for jQuery. It makes adding tabs into a website super simple. But it can also open the door to endless possibilities.

Preview || Download

17. Create a Slick Tabbed Content Area using CSS & jQuery

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. This is great tutorial explaining to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.

Preview

18. LavaLamp for jQuery lovers!

Extremely light weighted Lavalamp menu packaged as a plugin for the amazing jQuery javascript library.

Preview || Download

19. Animated Drop Down Menu with jQuery

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

Preview || Download

20. Using jQuery for Background Image Animations

Five different ways, how to create background image animations using jquery – very live effect.

Preview

21. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but this will be done in jQuery!

Preview || Download

22. Menumatic Mootools

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Preview Vertical || Preview horizontal || Download

23. jQuery convertion: Garagedoor effect using Javascript

For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!

Preview || Download

24. Perspective tabs

Perspective tabs is a simple mootools 1.2 plug-in that allows for a lagre number of tabs to fit into a small space.

25. Fisheye Menu

Fisheye Menu is an expanding menu based on the MacOSX doc.

Download

26. Sliding JavaScript Menu Highlight 1kb

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below.

Download

27. Mootools Demo Redux

Simple expandable Javascript navigation menu.

Preview

28. HoverAccordion

A jQuery Plugin for no-click two-level menus (or whatever else you want to do with it).

29. Simple Javascript Accordions

Javascript accordians have been used a lot in todays web design world. There are a lot of scripts we have seen and sure you too would have seen them. This script is one of the smallest accordion script which is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible.

Preview || Download

30. UvumiTools Dropdown Menu

The UvumiTools Dropdown Menu is the menu featured on this website. It is a very simple multi-level menu built from an HTML unordered list, using Mootools Javascript Framework, it can be easily updated by simply editing a

31. Create a multilevel Dropdown menu with CSS and improve it via jQuery

Preview || Download

32. jQuery & CSS Example – Dropdown Menu

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

Preview

33. Floating menu jQuery&CSS

For all of us who deal with long web pages and need to scroll to the top for the menu, here’s a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.

Preview || Download

34. Superfish – jQuery menu plugin

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:

Preview || Download

35. JQuery Pager

A simple JQuery plugin to provide paging UI functionality for data driven web applications

Preview || Download

36. jQuery feed menus

When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound – this jquery feed menu is solution here!

Download

Spread the love:

Contact-Pop: Contact Form Overlays with a Simple jQuery Plugin

inseven designs — Mon, 01 Jun 2009 17:09:29 +0000

Contact-Pop is a jQuery plugin that makes contact forms with grayed out overlays incredibly easy. The basic script grabs any links that point to your contact page and flags them for the Contact-Pop popup. When these links are clicked, Contact-Pop grays out the page and pulls in the contact form using AJAX. That means that with just a few lines of code, you can convert your site to use Contact-Pop’s form and overlay rather than your current contact page.

the Contact-Pop popup. When these links are clicked, Contact-Pop grays out the page and pulls in the contact form using AJAX. That means that with just a few lines of code, you can convert your site to use Contact-Pop’s form and overlay rather than your current contact page.

While there are a lot of options for producing grayed out overlays in jQuery, Contact-Pop provides a more robust and specialized solution for in-page contact forms. The main advantage is ease of use: simply flag any links to your current contact page by href or jQuery selector, and Contact-Pop does the rest. Combining this simplicity with a plethora of customizable options, Contact-Pop is a useful plugin for newbies and seasoned developers alike.

Additionally, Contact-Pop has the benefit of being totally unobtrusive. Since the plugin replaces the normal contact links on your page, even if a user doesn’t have Javascript enabled they will at least be routed to the normal contact page.

Finally, although Contact-Pop leverages a PHP file, this is just to make it easy to plug into your website. If you want, you can easily write a custom PHP, ASP or any other backend page to display and process the form as leveraged by Contact-Pop’s AJAX (see below).

Download Contact-Pop jQuery Plugin

How to use the Contact-Pop Plugin

Basic use of Contact-Pop couldn’t be easier. First upload the Contact-Pop directory to your web server, preferably at the root of your site. Next, make sure to include the contact-pop.js and contact-pop.css files, as well as the jQuery library:

The paths above should work if you’ve uploaded Contact-Pop to your site’s root, otherwise be sure to modify them as needed.

Next we will need to flag our contact links. Open up contact-pop.js and look for the config section. When modifying this section be careful to keep any trailing commas after the variable definitions, or the script will throw JS errors.

First change the replaceHref variable to the path to your contact page. Please note that this pulls in the href attribute from your various tags, so ‘contact.php’, ‘/contact.php’ and ‘../contact.php’ are all different even if they point to the same page.

Next open up contact-pop.php and head to the config section. Make sure to change the $siteEmail variable, since this is where the results of the form will get sent (when a message is posted, it will be emailed to you).

var $siteEmail = 'email@youremail.com';

And that’s it, you’re all set to go!

Download Contact-Pop jQuery Plugin

Unobtrusiveness and Best Practices with Contact-Pop

By replacing links to your static contact page, Contact-Pop ensures that even users without Javascript enabled can access the form. But we can take this a step further—let’s use the same backend script for the AJAX Contact-Pop form as well as the static contact page. That way the same process runs with the popup and the normal links.

First replace your current contact page with contact-pop.php by renaming and moving contact-pop.php accordingly. (If you don’t have a contact page, name it whatever you want).

Next open up contact-pop.js and find this part of the config section:

formPhpLocation : '/Contact-Pop/contact-pop.php',
// relative path to the backend contact form

Modify this according to the location of your contact page, which should be a relative path from the browser’s perspective. Just to double-check, the formPhpLocation should match the replaceHref in most cases (remember that our goal is to use the same page for the AJAX and static form).

Finally, you should use your site’s frame on the static contact page. Open up the newly renamed contact-pop.php file, and look to the bottom for a large block of HTML. Modifying this should be pretty straightforward.

Now regardless of how users reach your contact form, the same backend script will be used to both serve and process the form.

Download Contact-Pop jQuery Plugin

Customizing Contact-Pop

Although its basic setup is simple, Contact-Pop is also extremely customizable. Mainly, the easy-to-modify config section of contact-pop.js controls many of the plugins options.

First you can adjust the fade speed using overlayFadeIn and overlayFadeOut. If these fade speed controls aren’t enough, you can even incorporate the jQuery easing plugin by simply passing whichever easing string you want to use in overlayEasing (and including the plugin Javascript).

Additionally, the text and color of the popup header can be modified using thecontactHeadline and headerBgColor variables.

Contact-Pop’s config section also provides a number of options for the selectors it uses. First, if you want to use the popup for more than one href, you can pass an array of hrefs inreplaceHref, for instance:

replaceHref : array('/contact.php', '/Contact'),

Alternately, you can flag links for the Contact-Pop overlay using a jQuery selector; simply pass whichever selector string you want to use into openButtonSelector. If you want to only use the jQuery selector and not replace any links based on their href value, just setreplaceHref to null or an empty string.

Additionally you can flag a custom close button using closeButtonSelector. By default Contact-Pop appends its own close button so in most cases you can leave this alone.

Finally the Javascript file allows you to control a few other options. For instance, by default Contact-Pop preserves any changes made to the contact form when it is closed and reopened. To cause it to reset the form each time, set resetFormEachTime to 1.

Additionally, Contact-Pop doesn’t fade the overlay in IE7 because of a bug with IE7’s implementation of png-24s. This bug causes the overlay’s translucent gray png-24 to flash black before fading out. However, if you want to use a totally opaque image for your overlay image, set fadeOverlayIE to 1.

Besides the contact-pop.js config section, you can modify any other styling options through contact-pop.css, which should be fairly straightforward if you know CSS.

Finally, there are a few options provided in the contact-pop.php file. You can change the title of the emails that the form sends, as well as the text of the server response when the form is processed.

Download Contact-Pop jQuery Plugin

Writing a Custom Backend Script for the Contact-Pop Form

Although Contact-Pop comes with a pre-built PHP script for displaying and processing the form, it can work with just about any backend script (PHP, ASP, Java, etc). Furthermore, it doesn’t even have to use a contact form: Contact-Pop can use any script with a form and a response.

To make writing a custom script easier, let’s learn a bit about how Contact-Pop works. First the plugin’s AJAX hits the page flagged in formPhpLocation, and passes a GET variable of ‘ajaxForm’ so as to differentiate itself from a normal page visit. Then it pulls the outputted HTML into the overlay form. When this is processed, it hits the same page using the POST method, again flagging the ‘ajaxForm’ variable (this time with the POST method). The result of this request is then inserted into the overlay form area.

So in your custom script, the first step should look for the ‘ajaxForm’ GET variable. Then in the second step, flag one of the POST values from the form output in step one. If the form is processed successfully, output a ‘thank you’ message, otherwise output the form again (and error message).

And that’s all there is to it.

Download Contact-Pop jQuery Plugin

Portfolios, Promo Cards & More – Graphic Design Week for Freelancers

inseven designs — Mon, 25 May 2009 19:42:53 +0000

Portfolios, Promo Cards & More – Graphic Design Week for Freelancers, a great way to promote your ideas and views other great work, or even get some free money out of it for your creative time.
Over the last week Psdtuts+ and Vectortuts+ have been running a special event called Graphic Design Week that consisted of no less than 28 posts including tutorials, articles and giveaways. More than a few will be useful to freelance designers, including:

Preparing and Talking About Your Graphic Design Portfolio
Design and Print Bold Promo Cards in 60 Minutes
Make a Quick’n’Dirty Letterhead in … MS Word!
Make Your Design Work Look Awesome with a Product Mockup
Win $3500 to Spend on the ULTIMATE Graphic Design Setup!

And for readers just getting into design: Teach Yourself Graphic Design: A Self-Study Course Outline
So be sure to stop in at our Graphic Design Week Wrap-up post and browse around the great selection of articles.

57+ Free Image Gallery, Slideshow And Lightbox Solutions

inseven designs — Mon, 11 May 2009 19:16:02 +0000

I was browsing the net for a simple image gallery solution for web design project, but when I started to search, I came across some great articles, and tutorials on all the best image gallery solutions available on the Internet. So I i decided to post what I found the most interesting galleries. Here it is – this list is separated in 3 big categories like Ajax, JavaScript and Lightbox based galleries, CSS based galleries and FLASH based galleries, so You can easy switch to category You got interest in. I think here You’ll find gallery for every needs, should be enough to choose from!

Actually at first I wanted simple image gallery solution for web design project, but when I started to search I changed my mind and thought how great would be to create article about all the best image gallery solutions available on the Internet. So here it is – this list is separated in 3 big categories like Ajax, JavaScript and Lightbox based galleries, CSS based galleries and FLASH based galleries, so You can easy switch to category You got interest in. I think here You’ll find gallery for every needs, should be enough to choose from!

Ajax, JavaScript ( jQuery, MooTools), Lightbox based galleries

1. JonDesign’s SmoothGallery

Using MooTools v1.11, this JavaScript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website. Together there are 7 different gallery demos, You can download and test for free.

Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom CSS selectors. And even better, this solutions is very lightweight: The JavaScript file is only 24kb.

2. MiniShowcase Gallery

Minishowcase is a small and simple PHP/JavaScript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

3. jQuery SlideViewer

SlideViewer is a lightweight (1.5Kb) jQuery plugin which allows to instantly create an image gallery by writing just few lines of HTML. SlideViewer checks for the number of images within your list, and dynamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.

4. DevKick Galleria

Galleria is a JavaScript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

5. ZenPhoto

Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. We hope you agree with our philosophy: simpler is better. Don’t get us wrong though – zenphoto really does have everything you need for your online gallery, and you’ll even stare in awe at some of the innovative innovations we innovated upon.

Check out their feature list – it was too long to long to post here!

6. Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers

7. Visual Lightbox

VisualLightBox is a free wizard program that helps you easily generate web photo galleries, based on famous LightBox2 script, in a few clicks without writing a single line of code.

8. Photo Gallery with MooTools

Fully explained tutorial and also spectacular photo gallery to comfortably display many images.

9. GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way. It is very easy to use full-screen website, image gallery, which doesn’t conflict with pop-up blockers and it’s only 22 kb size!

10. TripTracker

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

11. qGallery

qGallery is a simple to use prototype based gallery script. All image processing is done by the script so you don’t have to worry about the images you upload on the server. All images for the skimmer graphics and the fullsize view will be created on the fly and stored in a cache directory on the server to save processing power on the server.

12. jFlow gallery

Tutorial and documentation, how to use jFlow plugin to create Your own gallery.

13. NoobSlide

8 different examples how to view Your images using MooTools, unfortunately there isn’t any documentation, but very easy to use gallery.

14. Spacegallery -jQuery plugin

Yet another way how to display Your images.

15. JQuery Cycle Plugin

The jQuery Cycle Plugin is a lightweight slideshow plugin.It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

16. Slider Gallery

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff using jQuery plugins.

17. PrettyPhoto

jQuery Lightbox clone, pretty similar to original Lightbox with few another features and full documentation.

18. PrettyGallery

One more way how to display Your photos using jQuery.

19. FrogJS

FrogJS is a simple, unobtrusive JavaScript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries. This type of gallery is best used when a page-by-page gallery is needed, as is the case with photo stories.

20. Galleriffic

A jQuery plugin for rendering fast-performing photo galleries. Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos.

21. Pirobox jQuery Lightbox

Lightbox scripts have become a very popular way of displaying images online in recent months. There are a huge number of them available, using a variety of different frameworks and languages. DesignShack offers a new jQuery Lightbox script It has been designed and created by Diego Valobra.

22. Slideshow 2

Slideshow 2! is a JavaScript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.

23. JQuery flickrGallery

FlickrGallery is a jQuery plugin for embedding flickr photos into a webpage. Plugin considers a Gallery to be a list of Albums (similar to Flickr’s Collections). Albums are considered to be photo sets.

24. Auto Generating Gallery

Words – “Auto Generating” don’t mean that that it takes the pictures for you. This gallery won’t even create the thumbnails for you. What it DOES, is build itself dynamically from your directory of images. So when you want to add new photos, you simply drop the new photo and thumbnail in the directory and you are done! Removing photos just means removing the photos from the image directory. Gallery use PHP for this web wizardry.

25. Photo Slider

Tutorial teaching how to create photo slider gallery with play/pause slideshow settings and interesting thumbnail effect using jQuery.

26. JavaScript TinySlideshow

This dynamic JavaScript slideshow is a lightweight (5kb) and free image gallery / slideshow script.

You can easily set it to auto-display the images, set the scroll speed, thumbnail opacity or to disable thumbnail slider.

27. S3Slider jQuery plugin

JQuery Slideshow with three different features and displaying sides, fully customizable sizes, delay speed and with good documentation.

28. Ajax Photo Gallery

The AJAX version of AgileGallery is a free AJAX photo gallery that rips through the XML output from Picasa (a free download from Google) and generates DHTML for the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. Since this photo gallery uses AJAX technology, it eliminates the need for any page refresh as the user pages through the photos.

29. Suckerfish HoverLightbox Redux

Handy JavaScript, CSS based image gallery with another version of Lightbox included.

30. PhatFusion Slideshow

Slideshow using JavaScript MooTools with features like:

Fade, Slide and Wipe transitions
Loops
Play, Stop, Next and Previous controls
Inits from array of image src’s, a list of images on the page or using the href of an a tag like the Lightbox.

31. HighSlide JS

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popup’s on web pages.

32. SlideFlow Ajax Image Gallery

Use slideflow to show elegantly Your images, also fullscreen mode is available.

Technical background: The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions (included)

33. Barack Slideshow 0.2

An elegant, lightweight slideshow JavaScript script.

34. jQZoom Evolution

JQZoom is a JavaScript image magnifier built at the top of the popular jQuery JavaScript framework. jQzoom is a great and a really easy to use script to magnify what you want.

35. jQuery Multimedia Portfolio

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

36. jQuery spherical panorama viewer

A JavaScript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.

I didn’t include screenshot here because demonstration can be seen only by clicking and dragging on the picture getting that 3D look.

37. JQuery Virtual Tour

This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour !

38. MooSlideBox

The mooSlideBox v3 is a small and slim Ajax based extension or replacement of the common “Lightbox” that can be found on nearly every page. This Lightbox clone works in IE 6/7, Opera and Firefox. It is based on the MooTools framework version 1.11.

39. jqGalScroll

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos

40. Featured Content Slider

Tutorial, how to create a slick auto-playing featured content slider.

41. Easy Slider jQuery Plugin

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with CSS alone. So, basically you link to plugin file, set the content up and style it with CSS.

42. Dynamic Image Gallery and Slideshow

This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features.

CSS Based Galleries

43. HoverBox Image Gallery

Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS, free to use for Your own projects.

44. Sliding Photograph Galleries

This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, as shown, or horizontally.

45. CSS Image Gallery

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The gallery works in IE6+, Firefox, Opera 8+.

46. Cross browser CSS Slideshow

Nasty CSS Slideshow producing a slide show or photogallery using a mixture of portrait and landscape images.

47. Cross Browser Multi-Page Photograph Gallery

Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text.Unlike the Suckerfish HoverLightbox this version does not use JavaScript but is pure CSS and still works in IE.

Tested in IE5.5, IE6, IE7, Opera, Firefox, Safari (PC).

48. CSS Decorative Gallery

Nice CSS Decorative Gallery and tutorial, how to decorate your images and photo galleries without editing the source images.

Flash Based Galleries

49. Flash Parallax Gallery

Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed. This will create an illusion of depth as the background images are moving slower than the foreground images. Awesome tutorial and also great idea how to display Your portfolio or create unique web design. Must see!

50. Flash Gallery

Flash Gallery is a free application that allows you to create a slideshow on your website easy and fast. You won’t need any programming skills to install or use it. Just embed it into your website and script will automatically form a slideshow from a specified folder or from Flickr photostream.

51. SimpleViewer

SimpleViewer is a free, customizable Flash image viewing application.

52. 3D Curve Wall

Unique Flash based 3D curve wall similar to Flashloaded version, but this one is free.

53. dfGallery

As stated on many other articles on DezinerFolio site, dfGallery is one of the coolest flash galleries currently on the Web.

54. Spiral Carrousel XML

55. Polaroid Gallery

Polaroid Gallery is a free, opensource flash gallery, the script loads images and image titles dynamically from an external XML file or a flickr RSS feed. Then the script processes the data and creates an interactive flash gallery.

56. TiltViewer

TiltViewer is a free, customizable 3D Flash image viewing application.

Other

57+. DynamicDrive

And finally if You still haven’t got enough galleries or one for Your taste You can check this huge collection of many different image galleries from DynamicDrive.com

If You know some more resources I missed here, feel free to add in comments and if You enjoy this article, let others know about it! Spread the word!

25 Digital Painting Tutorials

inseven designs — Fri, 08 May 2009 23:36:17 +0000

There are currently two posts on this blog showcasing excellent work from various designers in the area of digital painting (40 Incredible Digital Painting Portraits and 40 Amazing Digital Painting Portraits – Part 2). If you have been inspired or intrigued by these images, today I’d like to feature 25 tutorials that will help to show how you can do this yourself

Because of the detail and the amount of time that it can take to create on of these pieces, most of the tutorials are not step-by-step, showing you how to accomplish each little detail. Instead, they break down the process into a number of steps that is more attainable to follow in a tutorial.

Making of Yuka

Digital Painting Tutorial

Making of Three Lines

Painting a Landscape

Bioshock Video Game Digital Painting

Making of Transformer – Death Blow

Making Frodo

Making of Boudicca 3060 AD

Umbrella Sky

Making of Spanish Girl

How to Draw a Digital Portrait

Wonder Woman Pin Up Digital Painting

Making of My Prince

Red Assassin Digital Painting Tutorial

Equilibrium

Making of Bronze Dragon

Making of Hecate

Drawing a Female Character

How to Draw a Cartoon Character

Digital Painting Tutorial

Making of Lida

Making of Naughty Robot

Making of The Lady Bird

Photoshop Painting Tutorial

How to Paint a Digital Portrait (video)

For more tutorials, please see:

The CSS Gallery List – Review

inseven designs — Fri, 01 May 2009 17:46:16 +0000

Here is a great way to get your site out and viewed by other, also the chance to see other great designs. CSS gallery sites are kind of like a double edge sword. They can do a lot to help your website with quality link backs, exposing your site to would be customers, and showing off your work to others..

The drawback, or other side of the sword, is the fact that submitting to all these CSS sites can be a bit exhausting. There are so many of them that it can easily take hours to visit them all and submit your website.

Unless you know about a site called The CSS Gallery List

Overview of what they do

To sum it up, The CSS Gallery List submits your site to a large number of some of the biggest CSS galleries on the internet. At the time of this writing, The CSS Gallery List includes 78 featured CSS galleries. Do you have any idea how long it would take you to submit your site to that many galleries? I dont know exactly, but it would be more time then I care to spend.

From the website:

The CSS Gallery List is in partnership with all galleries in the featured list. Once your submission is received by The CSS Gallery List, the details of your submission are then automatically sent directly to all featured CSS galleries. It is then up to the participating galleries whether or not your submission is accepted for inclusion in their showcase.

If your site meets the criteria of The CSS Gallery List, it will also be added to our ‘favourite submissions’ section.

The best part of their service? It only cost $15 bucks!!! It is a steal of deal in my opinion and well worth the money.

Your experiences

Have any of you used The CSS Gallery List? If so, what was your experience like? Did you find it worth the money? If you know about The CSS Gallery List, but haven’t used them, why not? What is keeping your from using them?