Posts Tagged ‘jQuery’

WordPress Shortcode with loop, meta, category, pagination, Gallery and Plugins

With shortcode it is possible to display complicated codes or function result every where in your WordPress  Theme like  in widgets, excerpts, comments, theme files, user descriptions, and category/tag/taxonomy descriptions. According to WordPress support’s site “A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut [shortcodes].

Shortcodes were introduced in WordPress 2.5, and allowed the Gallery feature allows the option to add an image gallery to a Post or Page on your WordPress blog. but now you can us shortcode for your theme by using WordPress plugins and can create your own function to display requires result. I was working on my client web site and was required to display one category post on a specific page, I tried few plugins but did not get the proper result so one of blog fellow have given a solution on Simple Recent Posts Shortcodes for WordPress, which help me a lot and here is my code for The Corporation WordPress Theme:

<?php
function my_recent_posts_shortcode($atts){

global $post;

$myposts = get_posts(“showposts=5&category=32″);
foreach($myposts as $post) : setup_postdata($post); ?>

<img width=”120″ height=”120″ <?php the_post_thumbnail(); ?>
<div class=”latest_news_box”>
<h3><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h3>
<p><?php the_content_limit(520); ?></p>
</div>
<?php
endforeach;
}
?>

There are different requirement to display content on your blog, Kevin Chard have wriiten lot of usage of shortcode on his blog. You see shorcode usage on the following link: wpsnipp/shortcode. and  , the Founder and editor of WP-Snippets, explained in detail about shortcode usage on this link: Getting Started with WordPress Shortcodes (+Examples).

WordPress Plugins for Shortcode


Slider gallery shortcode

This plugin creates a new shortcode for WordPress. With this new shortcode, you can create a slider gallery in seconds just by typing [slider] while you’re writing your post or page. The slider will display the images that you have uploaded to the current post or page.

If you need more options, this simple shortcode features multiple attributes that you can set. You can:

  • add controls to go back and forward through each slide
  • select an specific transition between images (fade, zoom, scroll, curtains, grow, toss and many more)
  • show the image title
  • set the size of the images displayed in the slider
  • wrap the image with a link to the image file
  • adjust the transition speed
  • set the pause between transitions
  • set the initial delay before the first transition
  • exclude some selected images.

TitanEditor – The Shortcode Editor On Steroids

Features

  • Drag and drop Functionality – Drag, drop, move or delete your short-codes until your satisfied.
  • Page template Manager – No more messing around inside your default pages and posts, create your own page templates filled with short-codes.
  • Button shortcode editor – Create as many button styles and shapes you want.
  • Most common shortcodes included – Buttons, tabs, accordion, toggle, slider, images, columns, lists, message boxes, video, quotes, separator, blog elements, galleria and pre/code
  • Quick fill – After adding your columns your able to fill them all by just one click.
  • TitanEditor Page Attributes – After creating your page template and you’ve filled and rearranged all components then just create a new page and select your page template from the TitanEditor Page Attributes window and your done.
  • Clever editing – Not happy after seeing your freshly baked page, then just select the template through TitanEditor and edit it, TitanEditor remembers where you have left and opens the page just as you left it.
  • Screencasts Included – Watch the videos for full instructions on how to use the editor, once your used to it you never return to the wp-editor ever again.
  • Blog Post compatible – Your also able to create a nice looking blog post that looks different then any other blog post. Just create a page template ad your content through the editor and assign this page template to that blog post.
  • Editors Option Panel – A option panel from where you can enable or diasble the stylings, so if you want to use your own then you only need to disable it.

Tabbed Content Shortcode

A clean, easy to integrate, reusable tabbed content area for your WordPress themes!

Features

  • Reusable , add as many as you want on the page!
  • Easy to use, activate and copy-paste the sample shortcodes to begin
  • Auto sizing on a tab by tab basis
  • Help and information admin page
  • Easy to integrate into any design

SWS: Nivo add-on for Styles With Shortcodes

Styles with Shortcodes is a great plugin that makes life easier using WordPress whether you are a seasoned developer, designer or just a normal user!

Live preview | Detail

Shortcodes Ultimate

With this plugin you can easily create buttons, boxes, different sliders and much, much more. Turn your free theme to premiun in just a few clicks. Using Shortcodes Ultimate you can quickly and easily retrieve many premium themes features and display it on your site. See screenshots for more information.

Detail

Display Posts Shortcode

The Display Posts Shortcode was written to allow users to easily display listings of posts without knowing PHP or editing template files.

Detail

Category Post Shortcode

This plugin allow you to display post list in your page or post by using shortcode.

Detail

List category posts

The shortcode accepts a category name or id, the order in which you want the posts to display, and the number of posts to display. You can also display the post author, date, excerpt, custom field values, even the content! The [catlist] shortcode can be used as many times as needed with different arguments on each post/page.

Detail

Category Shortcode

This plugin creates the [Category]] Shortcode. The code takes 5 arguments:
number: the number of posts to display. 0 equals the default number. -1 equals the total available.

Detail

Available shortcodes for WordPress Hosted Blog


Miscellaneous | Video | Images and Documents | Audio

Detail

How to adjust and fixed DIV columns Heights with jQuery Plugin and CSS

I was working eCommerce website, and there is a need to display four equal column in one row and the other four in a 2nd column. I tired with Equal height – javascriptEqual Height Columns with Cross-Browser CSS, these tutorials are very helpful but not full-fill my client requirements. So I  tried Faux Columns, which gave the perfect solution.  Faux Columns provide the very easy way to by Making DIVs, using the CSS “Float Left” property, all have uniform heights; automatically adjusting to match the tallest DIV in the row.

All you have to play with the design and one image that fit with your design. A tutorial by DAN CEDERHOLM explained step by step procedure. Here is my CSS lines which I  get after modification.  Due to my client, I am unable to   provide the link of this implementation but still you can get idea from my code.

/* ======= index page cat. display ===================*/
#wrapper {
margin: 0 auto;
width: 1110px;
}
.cat_a {
display:block;
color: #FFF!important;
background-image:url(‘cat-tab-bg.png’);
min-height:40px;
padding-top:10px;
padding-left:10px;

}
.cat_a:hover, .hov_sh:hover {
text-shadow:2px 2px 2px #661111;
text-decoration:none;
}

.cat_ico {
float:right;
position:relative;
top:-11px;
}

#faux {
background: url(‘cat-bg.png’);
margin-bottom: 5px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
}

#leftcolumn {
display: inline;
width:264px;
padding:0px;
float:left;
margin: 0px 10px 10px 10px;
position:relative;
}
#leftmiddle {
display: inline;
padding: 0px;
width: 275px;
float: left;
margin: 0px 0px 0px 0px;
position:relative;

}
#rightmiddle {
display: inline;
width: 270px;
float: left;
margin-left:12px;
position:relative;

}
#rightcolumn {
display: inline;
position: relative;
padding: 0px;
width: 256px;
float: left;
margin-left: 13px;

}
.clear { clear: both; background: none; }

In case if you are not satisfied with above solution, here I am compiling a list of resources where you can get more infor about how to get Equal Height Columns with jQuery and CSS.

Tutorials: equal Height Columns with jQuery


Tutorials:How jQuery Works

A basic introduction to jQuery and the concepts that you need to know to use it.

Tutorial

Equal Height Columns with jQuery

This concept has been adapted into a full-fledged jQuery plugin. Check it out here. And then read on to learn how this technique is done.

Detail tutorial

jQuery equal height columns plugin

 If you are looking for a plugin which will calculate the heightest column and than assign that height to the rest of the panels than you should visit: Equal Height Columns with jQuery.

Detail Tutorial

Quick hits with the Flexible Box Model

I’d bet that you’ve done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short.

Detail Tutorial

Equal height – javascript

Many people have problems getting the heights of their divs the same length. There are good, valid, ways of doing this with only CSS. This isn’t one of them. This uses javascript to find out which div is the longest and then set the others to be the same length as that one.

Detail Tutorial

Making DIVs, using the CSS “Float Left” property, all have uniform heights;

Would you believe that was the best title I could come up with? Honestly, if you can think of a better one shoot me a line – I want to hear from you.

Okay, I’m a big fan of Fluid Design. I love to design websites/webapps that flow into the space available, from giant screened desktops to mobile phones, and always look like they were designed with exactly that screen size in mind.

Detail Tutorial

Elixon Fixheight

Creating equal height columns with CSS is not as easy as it may first seem. Elixon FixHeight is a solution that works in all common web browsers.

Detail Tutorial

jQuery: Boxes of Equal Height

Ever had parallel boxes on a website you’re developing, and wanted them to have the same height, but still wanting them to have dynamic height, i.e. not having to lock them to a certain height in the CSS? I certainly have, and it’s usually difficult. But jQuery provides a simple sollution!

Detail Tutorial 

Tutorials: equal Height Columns with CSS


Equal Height Columns with Cross-Browser CSS

Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites.

Detail Tutorial

Nesting sites expanding

Russian language article: he will give way to layout the sprawling site (and others, as it turned out, I do not know how to typeset), which use the last 2-3 years. This method is used for complex modular networks, it is easy to use, but difficult to understand and it has several drawbacks. In general, the information here useful and web designers, since the very model of the site must be properly prepared.

Detail Tutorial

Faux Columns by DAN CEDERHOLM

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a<div>, the <div> will only expand down the page 200 pixels.

Detail Tutorial

Fluid Width Equal Height Columns

Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.

Detail Tutorial

Equal Height Blocks in Rows

There are plenty of solutions for equal height columns using jQuery (like this one by Rob Glazebrook). The basic idea is to measure all of their heights and then set all their heights to that of the tallest one.

Detail Tutorial

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)

Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

Detail Tutorial

Best examples of jQuery Sliders Effects and WordPress Plugins

jQuery are the best way to display your row images to present to your visitors. There are lots of option and customization that can create very simple, beautiful and good looking image sliders. Yesterday I written a tutorial on HOW TO: Create A Vertical Scrolling News Ticker on WordPress With jQuery Carousel. In this post you’re going to find different types of pre-made jQuery plugins and unique image galleries for inspiration, and at the end there are some WordPress themes  if you want to develop your own site image slider with beautiful effects.

jQuery Slider, Slideshow and jQuery Carousel Effects


3d Rotation Viewer

This example is inspired by a showcase example by Apple of HTML5 technologies. The UIZE implementation works in pretty much all browsers, with no need for HTML5 or CSS3 features. This was an exercise in seeing how easy it would be to create an equivalent experience in UIZE. It was easy, taking less than a day. The code is all original, with absolutely no referencing of Apple’s code (but thanks to Apple for their delicious iPod Touch products, and for their fabulous photos of said products). In the example, an instance of the Uize.Widget.Drag class is being used to create a simple 3D rotation viewer. Using a mouse, you can click and drag to rotate the 3D image. On an Apple iPad, you can use your finger.

jQuery Banner Rotator / Slideshow

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

Live preview | Detail

HTML5 jQuery slider w/ Canvas and jQuery

A progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

Live preview | Download

AviaSlider – jQuery Slideshow

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.

Live preview | Detail

Estro – jQuery Ken Burns & swipe effect slider

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled. This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.

Live preview | Detail

Highslide JS

Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages:

  • Quick and elegant looking.
  • No plugins like Flash or Java required.
  • Popup blockers are no problem. The content opens within the active browser window.
  • Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
  • Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
  • Outstanding, unconditional and free user support for both commercial and non-commercial users.
  • Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.
  • Source code included.

Detail

Sexy Slider

SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

Live preview | Detail

CrossSlide

CrossSlide is a jQuery plugin implementing in 2kB of Javascript code some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!) Internally CrossSlide does not rely on lookup tables, building instead a “chain” of functions. Each function starts a linear phase of the animation through jQuery, setting the next function in the chain as a complete callback. After all the functions are prepared and the animation is started, no other calculations are made. This setup reduces runtime overhead to the absolute minimum, making CrossSlide the most optimized implementation of these effects.

Detail

Panning Slideshow

This slideshow uses a few amazing photos found on Flickr. You can find links to them below. This is only the example page. Head back to Build Internet for the full tutorial and explanation.

Detail

Supersized jQuery plugin

Live preview | Download

Coin Slider

Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

Detail

Sliding Boxes and Captions

Detail

Polaroid Photo Viewer

This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.

Detail

Thumbnails Navigation Gallery with jQuery

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

Live preview | Download

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose.

Revealing Photo Slider

Sideways – Fullscreen Gallery

Demo  |  Demo 2  | Download

Nivo Slider

Slick Auto-Playing Featured Content Slider

SlideDeck

DualSlider

 JCoverflip

Flip Box

Flip is a jQuery plugin that will flip easily your elements in four directions. Try it.

ImageFlow

PieceMaker

Other jQuery Slider, Slideshow and jQuery Carousel Effects


Text with Moving Backgrounds
Magic Scroller
jQuery Animated Innerfade
Pikachoose
MopSlider
jQuery Slinky Slider
jQuery.SerialScroll
Anything Slider
Zoomer Gallery jQuery Plugin
jQuery Plugin for Zoomable, Interactive Maps
Galleria
BBC Radio 1 Zoom Tabs
Leopard Desktop with jQuery
Contextual Slideout Tips With jQuery & CSS3
Animated fullscreen background image slideshow
Gallery Using z-index and jQuery
Background Image Navigation with jQuery
Morphing Gallery
Slide Thumbs
Presentation Cycle
iTunes-like Slider
iCarousel
Minimalistic Slideshow Gallery with jQuery
Related Posts Slide Out Boxes with jQuery and CSS3
Compact News Previewer with jQuery
Annotation Overlay Effect with jQuery
BxSlider 2.0
Lof JSliderNews
Image Rotator with Preview
Cloud Carousel
jQuery popeye 2.0
Control Tabs
YoxView
BlogSlideShow
jQuery Tiny Slider
jReel Gallery
Smooth Div Scroll
s3Slider jQuery plugin
Sliding Login Panel
jQuery Slideshow using CSS Sprites
jqGalScroll
Multiple Image Cross Fade
Fancybox
jQuery Cycle Plugin
jQuery Image Scroller

Text Effects with jQuery


jQuery Word Counter

This plugin allows you to set and limit user input by max characters within html textarea (it is only limited by characters other than words). It binds keyup, paste and drag events. The extra div is displayed under the textarea, which shows the current number of input characters and words. You can set your own styles and customise the text counter information. Version 2 provides the callback function.

jTicker Typing Text Effect using jQuery

For long now flash has been dominating the interactive web animation, using JavaScript was a daunting task. But introduction of frameworks like jQuery, MooTools, Scriptaculous, etc have made animating web component much easier. Another advantage of using these frameworks over flash is that they are search engine friendly. Though search engine do not index JavaScript, actual content is present in html or other SEO friendly code.

Codename Rainbows

Even without Photoshop, you can make text effects with this by just typing a little code.

Grab bag, jQuery text effects

Some fun little text effects. These manipulate $(ele).text() so will probably be disastrously broken with inner HTML content.

Color Changing Text and Backgrounds Effects

Normally you would define the (background) color in the CSS and that would be the end of it. In this case we want to be able to adjust colors after the page has loaded, and not just once either – we’re aiming for continuous adjustments.

The lovely part about this whole thing is the small about of jQuery required to make it all happen.

Fade Colors Using jQuery

Retweetradar has nice little effect in the footer – links in top lists fade, emphasizing the most popular links with strongest color intensity. This tutorial will explain how to fade a color in array of elements using jQuery.

Playing with jQuery Color Plugin and Color Animation

jQuery is an easy and useful JavaScript library. If you are someone with basic knowledge of JavaScript you can easily insert jQuery plugins and effects. You do not need to be hardcore coder or developer for that. In this post you will see how to create some cool menus with jQuery and  jQuery Color Plugin.

jQuery Approach

Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. It works in a very similar manner to jQuery animate, however it animates over distance instead of time.

AutoCompleter

AutoCompleter Tutorial

I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!

3d Tag Sphere

A rotating 3d tag cloud controlled with the mouse. Tags are scaled according to the weight assigned to them and fade into the background as they rotate.

Simple jQuery Text Resizer

The idea is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, we take advantage of that body class when we are writing our CSS to size the different elements appropriately.

Airport

Airport is a rather simple text effect plugin for Jquery. It emulates the style of those flickering information boards you sometimes find on airports and train stations.

Zooming with jQuery

This is basic level tutorial just changing style using jQuery script. It’s simple use it for zooming website content. Take a look at live demo

jQuery Label Effects

jQuery plugin that applies highlight and shadow effects to text in a control.

jQuery Flying Text With Fade Effect

With this great javascript framework, jQuery, you can create some flash like effects. In this post, I will show how to create very simple flying and fading text effect using jQuery. Here is live demo.

Animation Effects with jQuery


Dynamic PNG shadow position & opacity with jQuery

You can drag objects and place them anywhere you want. As well, there is a switch that can be turned on to amaze your visitors.

Image Cube

jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube.

jQuery.Smart3D

Interesting effects, which can be used on site-header. It’s very simple to use: several layers glued together into a 3D effect. See examples of using this jQuery plugin!

3D Sphere

This tutorial will walk you through how to create a Sphere in jQuery.

 3D Tag Cloud

This tutorial will show how to create a scrolling 3D tag cloud…it’s not as difficult as you might think.

Flip HTML content in 3D

In order to use the rotate3Di jQuery plugin, your web page will need to include jQuery v1.2.6 or newer, the jQuery CSS Transform patch, and the rotate3Di plugin itself.

Circulate

This is a very excellent plugin. after open the page, the object will revolve around the page and if you click the buttons, it will jump in a circular motion and bounce back into position.

Spritely

jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.

Animated Curtain

This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them.

 jQuery Animated Postcard

Nicely illustrated banners are…nice. But why not add a little pizazz by using animation like Flash websites do? Through Javascript web pages are becoming increasingly less static and all sorts of creative possibilities are opening up.

Quicksand

Reorder and filter items with a nice shuffling animation.

Puffing Smoke Effect in jQuery

Creating this fun jQuery effect doesn’t take too much effort. I am going to quickly go through the steps of using this effect to show you how easy it can be. As you can see on the example page, you can selected different types of smoke that will adjust the effect while keeping the code intact.

Download the source code here: http://www.gayadesign.com/scripts/smokeeffect/smokeEffect.zip.

View the examples here: http://www.gayadesign.com/scripts/smokeeffect/

jAni jQuery Plugin Animation

jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it’s always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the “dark side” of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.

Animated Landscape Header with jQuery

In this tutorial we’ll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery.

jQuery Parallax

A parallax style implementation of user interactions. When the mouse moves over the document (or a specific element) the actions can be translated to modify any CSS property of an element for example an image position, to give a parallax style effect.

Rezoner’s jEffects

jEffects enhances user interaction by providing decorative effects. It’s all packaged into an intuitive jQuery plugin. Detailed documentation is included.

Rotating Billboard with jQuery

In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one (the other ad) appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system.

jQuery Flight Board

jQuery plugin that sets a division to flip between text messages like a flight board at an airport.

Animated Cartoon Robot with jQuery

Aside from being a fun exercise, what purpose does something like this have? None that’s plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers.

Custom Animation Banner with jQuery

The idea is to have different elements in a banner that will animate step-wise in a custom way. We will be using the jQuery Easing Plugin and the jQuery 2D Transform Plugin to create some nifty animations.

JavaScript Sprite Animation Using jQuery

Add amusement flip the pages with this animated Javascript using jQueryfor your site visitors.

Transition Effects with jQuery


jqFancyTransitions slideshow with strip effects
Jquery Fade InFade Out
The Sexy Curls jQuery Plugin
Lazy Load
jQuery Booklet
jQuery pageSlide
Smooth Animated Menu with jQuery
jQuery MagicLine Navigation
HighlightFade
Dynamic Page / Replacing Content
jQuery Cycle Plugin-Effects Browser
jQuery Captify
Sponsor Flip Wall With jQuery & CSS
jSquares
Grid Accordion with jQuery
jquery Professional Dropdown Menu
Superfish jQuery Menu Plugin

Image Editing and Adjustment Effects


jQZoom
Cloud Zoom
Crop Example
ImjQMosaic
Micro Gallery
imgAreaSelect
Rounded Images
AnythingZoomer
jQuery Virtual Tour
jQuery Corner Demo
Apple-like retina effect
Photo Zoom Out Effect
Interactive Picture
JQuery.iviewer
Image Highlighting and Preview with jQuery
Jcrop » the jQuery Image Cropping Plugin

Other jQuery Effects and Resources


Tetris with jQuery
jQuery Touchwipe
jQuery Zoomooz
Music player using jQuery
jQuery Before/After Plugin
ZURB Annotation plugin
Crazy Dots – jQuery Plugin
jQuery CSS Clip Animation Plugin
Dynamic FAQ Section w/ jQuery
Latest Tweets Tooltip with jQuery
Outside the Box Navigation with jQuery
JQuery animation easing plugin example
Array of jQuery Animations- Tutorialized
jQuery Background-Position Animation
Colourful rating system using CSS3 and jQuery

Premium WordPress jQuery Sliders


uBillboard – Premium Slider for WordPress

uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options for you to be able to customize it to your needs while not overwhelming you with options you never wanted or needed. Version 3 is a revolutionary release with most of the codebase rewritten from scratch. This has enabled us to integrate many features that you have been requesting during the first year.

Live preview | Detail

WordPress jquery slider/banner image rotator – li

liJQuery Image Slider is carefully crafted slider/banner image rotator, full of features, easy to install and customize. Whenever you need a full featured slider image rotator or you need a simple ad banner, liJQuery Image slider will do the job with ease!

Live preview | Detail

Slider PRO – WordPress Premium Slider Plugin

Slider PRO is one of the most powerful slider plugins for WordPress on the market (some buyers have been saying that it’s actually the best). The slider offers you 100+ customizable properties, 100+ possible transition effects, 10+ skins and much more. Also, the slider’s administration area is very powerful and uses the default WordPress design, which WordPress users are already familiar with. This slider plugin is carefully coded, using WordPress development best practices, to avoid conflicts with other themes and plugins that are well coded.

Live preview | Detail

CCSlider WP – 3d/2d Slideshow WordPress Plugin

CCSlider WP makes it easy to embed the CCSlider jQuery slideshow plugin in your WordPress theme. CCSlider is an unique slideshow plugin because of the fact that it supports 3d transitions! There are 10 stunning 3d transitions available, and also 10 stylish 2d transitions. You have the option for mentioning a 2d transition fallback for old browsers that don’t support HTML5 Canvas, which is used for producing the 3d transitions. The plugin also supports HTML captions and autoplay of slides. See below for a list of features available in the plugin.

Live preview | Detail

Slider Evolution for WordPress

Slider Evolution is a JQuery plugin that lets you easily create powerful javascript sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

Create an unlimited number of sliders with customized settings for each one, and place them anywhere on your WordPress website with ease.

Live preview | Detail

Sugar Slider – Premium WordPress Slider Manager

Sugar Slider makes it as easy as it could possibly be to create gorgeous sliders for your WordPress powered site. Forget nasty custom fields and image URLs. You can even forget about manually resizing every image before you upload it.

Live preview | Detail

DDSliderWP – 11 Transitions – Slide Manager Panel

DDSliderWP features EVERYTHING that the jQuery plugin already offered PLUS a custom admin panel, with total management of slides.

Live preview | Detail

WordPress Ken Burns Slideshow

WordPress Ken Burns Slideshow is a smooth and beautiful flash slider made just for WordPress!

Based on the best selling Xml Ken Burns Slideshow, it has a lot of cool features and effects, so this slider can become the perfect way to showcase your products.

Live preview | Detail

Slider gallery shortcode

This plugin creates a new shortcode for WordPress. With this new shortcode, you can create a slider gallery in seconds just by typing [slider] while you’re writing your post or page. The slider will display the images that you have uploaded to the current post or page.

Live preview | Detail

Premium Featured Posts Slider

  • Show off your content the real way – in a slider!
  • Feature any post, page or custom post type
  • Includes 6 predefined layouts
  • Customize layouts with 18 variables
  • Global and per-post options
  • Intuitive admin GUI with inline help
  • Thumbnails, arrows and pagination slide controls
  • Uses your theme’s CSS styles
  • Extensive user friendly documentation
  • No template editing needed if you use [fps]

Live preview | Detail

WordPress 360º Image Slider

The WP 360 º Image Slider is a highly configurable plugin that adds slider functionality to your posts or pages. You can see the DEMO HERE . Please click on the “Play in HD” button to see it in fullscreen.

Pixwall slideshow for WordPress

Pixwall is a plugin for WordPress based on a project called Diapo, a jQuery slideshow developed by me, Manuel Masia (or Pixedelic), but improved since the original version. Pixwall is used to create animated slideshows with particular effects, and you can use it also for fullscreen background slideshows.

Live preview | Detail

Sublime Slider for WordPress

WPSublimeSlider is a fantastic WordPress plugin that allows you to create and display unlimited image galleries on your site. You can create sliders using your own images or even from a Flickr photoset or Picasa web album.

Live preview | Detail

jQuery Carousel Evolution for WordPress

jQuery Carousel Evolution for WordPress is a WordPress plugin that allows you to easily create powerfull carousel slider in a few minutes. You can then integrate it into any page with a single shortcode. It includes a full back-end interface to create and customize your Carousel. It also offers a preview mode to easily try out some settings before pushing them live.

Live preview | Detail

Flip Book WordPress Plugin

Flip Book WordPress Pluginis based is on XML Flip Book / AS3 one of the three top selling items of all times on ActiveDen . It has been built from scratch. Almost everything you see on the page is easily customizable through the WordPress administration panel – easy installation, no coding skills required.

Live preview | Detail

Free WordPress jQuery Plugins


WordPress jQuery Lightbox Plugin

As the name shows, this is just WordPress’s version of the jQuery Lightbox Plugin written by balupton, working perfectly with WordPress 2.2 or up, and fully compatible with K2!

Live preview

Carousel Gallery (jQuery)

This plugin builds on the builtin WordPress gallery, and replaces any gallery inserted using the

tag with a neat jQuery powered carousel. By carousel it means you can browse through all the pictures in the gallery and they’ll slide from the right to the left and seamlessly start over at the end.

Live preview

Shadowbox JS

Shadowbox is an online media vieiwing application similar to Lightbox and Thickbox but with more functionality. Supports all types of media.

Detail

jQuery Lightbox For Native Galleries

Makes the native WordPress galleries use a lightbox script called ColorBox to display the fullsize images.

Detail

WordPress Plugin jQuery Pagebar

This plugin show instead of the next and prev links a jQuery slider as a modern pagebar. So it’s easy to navigate through many pages.

Detail

HOW TO: Create A Vertical Scrolling News Ticker on WordPress With jQuery Carousel

I had to design a Vertical Scrolling news ticker for my client. Initially,  I thought it’s hard to figure it out, but thanks to a tutorial ” Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite“.  I learnt from this tutorial along with other and  modified  the code and made it into something I wanted, hope this would help you too.

First thing first, how to Including jQuery in WordPress (The Right Way)? WordPress already includes a copy of jQuery. Here is how you can load up jQuery in your theme the smart (and intended) way. Put the following code in header.php file in the <head> section:

<?php wp_enqueue_script("jquery"); ?>  <?php wp_head(); ?> 

[Detail]

Other References:
How to Add JCarousel Lite to WordPress
How to Create a jQuery Carousel with WordPress

jCarousel Lite is tiny but powerful plugin and with it you can easily add/tweak/configure  News ticker part on your Website. After including jQuery Carousel into you WordPress theme, now need to create style and html code to run image gallery or News on your website. Follow these steps to  Create A Vertical Scrolling News Ticker on WordPress With jQuery Carousel.

Step 1


Create a new <div> in your style sheet, which should include container for the news ticker and style of the text and heading. As well, a very important <div> class name that must b same class name when you configure jCarousel Lite in your theme. In my case I have created “latestnews-jcarousellite”, as you can see bellow:

/* ======= Latest News ===================*/
#latest-news {
width:268px;
padding:0px 0px 8px;
float:right;
margin:0 !important;
min-height:100px;
}
#latest-news a { text-decoration:none; }
#latest-news .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:2px;
}
.latestnews-jcarousellite { width:100px; }
.latestnews-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:2px; }
.clear { clear: both; }

Step2


Create a News category and get its id number, hope you know how to get it, after creating some news post for created category, add a loop where you want to display News ticker. In my case i wanted to display it in side bare and  have added the following code in my theme sidebar:

<div id="latest-news">
<h2>Latest News </h2>
<p> Find out our latest orders, clients and customer feedback! </p>
<div id="latestnews-jcarousellite">
<ul>
<?php query_posts("showposts=5&cat=32"); $i = 1; ?>
<?php while (have_posts()) : the_post(); ?>
<li> <a class="title" rel="bookmark" href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
<?php endwhile; ?>
</ul> </div>

Step 3


After adding loop’s posts  and configure the jCarousel. Under the<head> or  in sidebar.php file  add following price of script:

<script type="text/javascript">
jQuery(function() {
jQuery("#latestnews-jcarousellite").jCarouselLite({
vertical: true,
speed: 1000,
visible:5,
auto:500
});
});
</script>

Where visible number  must be equal to showposts number, <div id=”latestnews-jcarousellite”> must be same.  The “auto:500? means it will auto-scroll every 500ms. There are a lot of options read the documentation for more information and configuration.

Other References about How to Create a jQuery Carousel with Website and WordPress Posts


From the list bellow you can create image gallery from carousel on WordPress posts from a specified category.

jQuery Carousel Gallery for WordPress
Making an infinite JQuery carousel
jQuery Infinite Carousel
How to Create an Infinite Carousel with jQuery
How To: Create A Jquery Carousel With WordPress Posts
Create a Simple Infinite Carousel with jQuery
How to install and style jcarousel lite
Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite
Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite
How can I degrade from Jquery carousel to css scrolling list gracefully
How to create simple and sleek jquery carousel gallery
HTML5 jQuery slider w/ Canvas and jQuery

Pre-made Carousel Plugins


By using these plugins you can create beautiful carousel image gallery for your visitors inspiration.

Boutique carousel

A ready to use jQuery slider/carousel to present your images in a unique, smooth and customizable way. Simply link to the JavaScript and CSS files and apply it to your HTML element like other jQuery plugins. Customize the settings and CSS to match your style and purpose. Full documentation and examples included.

Live preview | Detail

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation) - Example.

jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. jCarousel Lite is not a replacement for jCarousel; rather it is a light-weight (only 2kb) alternative for users whose primary focus is not to build a full-blown image gallery.

Agile Carousel

Agile Carousel is a JQuery plugin that lets you create a carousel with fexible settings.
New features in Beta 2.0 include:

Here’s an example with intro slide.

jQuery Carrousel

Moodular is a jQuery plugin which allows to create carousel/slider very easily. Moodular comes from the contraction of two words : mood & modular.
Mood for many reasons, “in the mood – Glenn Miller”, …
Modular because this plugin has some modules integrated (controls & effects).
It’s modular too, cause you can create your own controls & effects to perform your personal carousel.

jQuery Infinite Carousel Plugin

jQuery carousel plugin where small image thumbnails allow users to jump over to other images.

Features:

  • Carousel never ends and images shuffle around
  • Captions are optional
  • Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence
  • Thumbnails can be styled via CSS
  • It’s less than 14K
  • Reusable on multiple containers within the same page

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.

Just Another Carousel

A jQuery content carousel that works with any size content and supports mouse input. Features:

  • Works in FF3, IE7, Opera, and Safari.
  • Supports fixed-size or variable-size children
  • Supports the Meta plugin for jQuery
  • Totally CSS-based allowing for high customization
  • Degrades gracefully into an unordered list

 jQuery Carousel

Great looking plugin with various types of use.

Roundabout

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

jQuery Banner Rotator / Slideshow

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

Live preview | Detail

AviaSlider – jQuery Slideshow

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.

Live preview | Detail

Estro – jQuery Ken Burns & swipe effect slider

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.

Live preview | Detail

 Sexy Slider

SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!
Live preview | Detail

Examples for Inspiration


There are huge list for inspiration and I will complie it in my next post along with pre-made WordPress themes with jQuery gallery. Subscribe to wparena’s email for update:

Rss Feeds    Twitter Followers   Email Updates

Best Online Generators for Designers & Developers

Online generator do a tremendous job for designers and developers if they want to solve some problem quickly and efficiently. As well, on the other hand web-generators make their life easier and save precious time. I have compile a list of the most useful online-generators for web-development and listed them below.

Color Generators


ColorBlender.com

ColorBlender is developed by Kim Jensen and It is a free online color matching toolbox.

Color Calculator

The free online Color Calculator is an interactive color wheel that helps designers select HTML, RGB, or CMYK colors, and identifies color harmonies and schemes.

ColorCombos.com

Web colour combinations tool and library, on this website you can Color Tester, Combo maker and very useful articles on ColorCombo’s Blog.

ColorMixers

This colorpicker from Color MixersColor BlenderColor MixerWeb Color Themes.

color palette creator v1.6

A color swatch generator which was inspired directly by the excellent Creating Color Palettes article by Andy Clarke.

Color Palette Generator

This is image base color generator, just enter the URL of an image to get a color palette that matches the image. This is useful for coming up with a website color palette that matches a key image a client wants to work with.

colr.org

It has two purposes:
1) It’s a tool to let people fiddle around with colors.
2) It’s a jungle gym for software ideas.

EasyRGB

This site provides information and services related to color technology. The first RGB and COLOR search engine on the Web!

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 is Web-based tool that makes a linear gradient image between any two colors.

Technicolor

Cameron Adams is one of the new breed. Automatic color palette generator with realtime preview and CSS generator.

php & MySQL generators


PHP Classes – Class: PHP MySQL class generator

The goal of this service is to build a base of programming components ready to be used in applications written in PHP. Generate classes to manipulate MySQL table rows

phpMyEdit – Instant MySQL Table Editor and PHP Code Generator

phpMyEdit generates PHP code for displaying/editing MySQL tables in HTML.

phpThumb()

phpThumb() uses the GD library to create thumbnails from images (JPEG, PNG, GIF, BMP, etc) on the fly.

PHP FormMail Generator

A tool to create ready-to-use web forms in a flash

POG – Php Object Generator (v1.6 rc2)

Php Object Generator, (POG) is a PHP code generator which automatically generates tested Object Oriented code that you can use for your PHP4/PHP5 application.

WWW SQL Designer

visualisiert Datenbanken und Strukturen

css generators


Clean CSS

CSS Formatter and Optimiser

CSS Button Generator

CSS Button & Text Field Generator

CSS Creator

The generator helps you create the structure of your website template using valid HTML and CSS.

CSS Font and Text Style Wizard

You can use this wizard to experiment with font and text styles and generate sample CSS style source code.

Online CSS Optimiser/Optimizer

This tool is used to optimise CSS code. All you have to enter either a URL or Copy & Paste the stylesheet into the box, and it will Optimize your Style Sheet.

CSS Formatter and Optimiser

Online Style Sheet optimizer.

CSS Form Code Maker

This HTML – CSS form generator will create a nice looking layout for forms. Create  ‘tableless’ layout for forms. And at the same time, add a ‘little color’ to the forms.

CSS Menu Generator

CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons

Format CSS Online

Automatically format your CSS (cascading style sheets) so they are easy to read and edit…..

Online CSS Optimizer

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file.

Cornershop

This page is for creating rounded corner graphics to use in your website design.

CSS Rounded Box Generator

Generates both the images and code you need for a rounded box.

Online CSS Scrollbar Color Changer

This tool will change the scroll-bar colors in an HTML page

CSS Tab Designer

CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!

Free CSS Template Code Generator

This HTML – CSS template generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.

HTML and CSS Table Border Style Wizard

You can use this wizard to experiment with table border styles and generate style source code.

Listamatic

one list, many options – Using CSS and a simple list to create radically different list

Listamatic2

It provide nested list options

List-O-Matic

List-O-Matic is a tool that makes the process of creating list-based, CSS-styled navigation just that little bit easier. Try it…

S5Easy: Create S5 Slideshows Easy Online

By using this tool you can Create slideshow in only 3 steps.

Scriptomizers

A CSS stylesheet web-generator

The Generator Form v2.90

CSS Source Ordered Variable Border 1-3 Columned Form Maker

ascii generators


ASCII Artist

This little program converts your picture to ASCII text art – a jumble of letters, numbers and symbols that do not appear to have any significance until you step back and look at the whole picture. It has no practical purpose, other than the neat factor.

ASCII G+enerator

Web-Generate to create a ASCII graphic from a word or text. Over 130 fonts.

ASCII-O-Matic

One of my favorite web application that can convert an image into ASCII Art dynamically

email generators


Advanced Email Link Generator

The “Advanced Email Link Generator with Anti-Spam Encoder” will generate mailto: links you can copy and paste into your web pages and emails.

E-Mail Icon Generator

For GMail, Hotmail, MSN, Yahoo!, AOL and many more!

Email Riddler

Email Riddler is an online tool that encrypts and transform your email address into a series of numbers when displaying it, making it virtually impossible for spam harvesters to crawl and add your email to their list.

NeedASig

This web-generator will create Email and Forum Signature Icon.

favicon generators


A Tutorial:

How to Add favicon into WordPress Blog and Website

Favicon Generator

You can make Free Favicons  with this tool – Create a Favicon.ico Design

FavIcon Generator (beta)

Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it’s prominence in your visitor’s bookmark menu.

FavIcon from Pics

Now it’s easy to create icons and marquees for your web pages with FavIcon from Pics. Simply select a picture, logo or other graphic (of any size/resolution) for the “Source Image” and it will create your icon.

Favicon.ico Maker

Upload a 16 x 16 pixel PNG and click ‘Faviconify!’ to create a favicon for your website. This favicon maker supports alpha transparency.

Flash generators


Flash Buttons Menu Generator

Easy and fast to create website menus ! Instantly add your text and links to any of the animated buttons. A webmaster tool that will add both functionality and flavor to your site.

FLASH EMBEDDER

This tool will let you easily embed flash movies into HTML. This could also be done using the Publish option in the Flash program.

form generators


Accessible Form Builder

This tool will generate XHTML-compliant accessible forms quicky and easily.

Contact Form Generator

The free Website Contact Form Generator utility enables you to create form-to-email scripts for your ASP, PHP or Perl web site with no programming skills needed. Optionally you can have the facility to save the results to a database and for users to upload a file. Results can be saved to a MySQL or MSSQL database, or saved as CSV.

CSS Form Code Maker

This HTML – CSS form generator will create a nice looking layout for forms. You can make ‘tableless’ layout for forms. And at the same time, add a ‘little color’ to the forms.

FormLogix

FormLogix is an online FREE form builder tool for creating web databases and web forms.

JotForm

This is Web Based WYSIWYG Form Builder.

PHP FormMail Generator

A tool to create ready-to-use web forms in a minutes. It’s Easy + Quick + Free.

Wufoo

HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

Web Form Factory

This is an Open Source Web Form Generator.

Graphics & Image Generators


Ajaxload

Create easily your own ajax loader icon.

Button Maker :: Adam Kalsey

Pick some colors, enter some text, and you’ll get a button you can download for your site.

Brilliant Button Maker by LucaZappa.com

A web application to create customizable 80×15 brilliant buttons

PHP/SWF Charts

is a simple, yet powerful PHP tool to create attractive web charts and graphs from dynamic data.

XML/SWF Charts

XML/SWF Charts is a simple, yet powerful tool to create attractive charts and graphs from XML data. Create an XML source to describe a chart, then pass it to this tool’s flash file to generate the chart. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.)

ACME Label Maker

With this toll you can Make a label online!

Create A Graph

Create Graphs and Charts with with web tool.

Cool Text (Logo Generator)

Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work.  Simply choose what kind of image you would like. Then fill out a form and you’ll have your own custom image created on the fly.

Online SiGGy Maker

These are the so called User bars :) , you can use them as your email or forum signature, it also helps in hiding ID’s from spambots.

phpThumb()

phpThumb() uses the GD library to create thumbnails from images (JPEG, PNG, GIF, BMP, etc) on the fly.

PixelButton

PixelButton is an Antipixel online generator, easy and fast to use. This little buttons created by Jeremy Hedley, become larged used expecially among bloggers, because they are nice looking, very visible and it’s easy to place theme inside a site layout. It makes possible to create buttons without the need of programs like Photoshop. The button is generated with the desired text and colors and it is converted into an HTML code with inline image, not requiring to be uploaded on the server.

Portrait Avatar Maker

Best ‘n’ Free Avatar Generater ! Available for blogs and SNS ! But Unmeasurable about the Combinations of parts.

Portrait Illustration Maker

Your free online Illustrator maker and let’s make an original icon!

RSS Button Generator

A RSS Button is a small image banner/badge/button/label/sticker (80 pixels wide x 15 pixels high) that has been adapted by the blogging world in order to keep blogs neat and consistant.

Sparklines

You can start right away by dynamically creating a sparkline using the Sparkline Generator Web Application. Sparklines, as defined by Tufte, are intense, simple, word-sized graphics. Kind of like this:  .

StripGenerator

With this wonderful tool you can make your own cartoon online.

Texture Maker

The application can create procedural and hand painted textures from scratch, remove visible seams from existing images, crop textures from photos by applying a perspective correction, render seamless tiles from structure sample patches, combine existing textures and heightmaps with realistic illumination and much more.

Thumbnail Generator

This is the source code file with it you can process thumbnails from a large amount of images

Tile Machine 1.0

Excellent web generator for designing graphic tiles.

Typogenerator

A so-called typo poster is an image consisting of text and background images – not necessarily being readable, but looking nice. typogenerator is a tool to create typo posters automatically.

Wallpaper Generator

Make free Desktop Wallpapers

Web Album Generator 1.8

With this application you can create Online Photo Albums

htaccess generators


Htaccess Disable Hotlinking Code Generator

If people are ‘hotlinking’ to your image files, they are using your bandwidth which you will ultimately pay for. You can stop this from happening by placing a ‘.htaccess’ file in the folder where your images are stored.

.htaccess File Generator

This is an Apache htaccess file generator.

.htaccess Generator

This .htaccess generator – will generate the files you need (.htaccess and .htpasswd) to password protect a directory of your website.

.htaccess Generator

The .htaccess is a simple method that allows you to customise the way the webserver works on a per directory basis. With this application Create Encrypted Passwords in seconds.

mod_rewrite RewriteRule Generator

Their mod_rewrite RewriteRule generator will take a dynamic url given to it, and generate the correct syntax to place in a .htaccess file to allow the url to be rewritten in a spiderable format.

URL Rewrite (mod_rewrite)

With the URL Rewrite Tool you can generate dynamic urls to search engine friendly urls. For search engine friendly (rewrited) urls you need the rights to put a .htaccess file on your webspace and you need e.g. the Apache Webserver module mod_rewrite.

metatag generators


META builder

This form will generate HTML META tags suitable for inclusion in your HTML document. These tags allow better indexing by robot-driven search engines.

Title & Meta Tags Generator

Making web design easy. Create your sites meta tags instantly to help achieve higher search engine ranking. Includes title tag, description, abstract, keyword, and robot meta tags. You can read theMeta Tag Description page for an explaination of the meta tags created by our meta tag generator.

META Tag Generator

Fast track creating your META tags with our advanced META tag generator. Just select the META tags you would like and let our META tag generator spit out the code for you

META Tag Generator

Here‘s an easy to way to generate your META tags. Fill in the form and hit ‘submit‘

password generators


Free Password Generator

Fill out the form, click ‘Generate’, and you will get your own unique password instantly generated.

hashapass

Hashapass automatically generates strong passwords from a master password and a parameter.

Perfect Passwords

Generates a unique set of custom, high quality, cryptographic-strength password

Phonetic Password Generator

It was originally designed to help make up passwords that would be easy to remember but relatively difficult for nefarious types to guess.

PASSWORD GENERATOR

Online Password Generator

Password generator

This is a little Javascript program that will concatenate two fields and MD5 them…

Perfect Passwords

Ultra High Security Password Generator

pdf generators


html2pdf

This application will convert any URL of a Webpage into a PDF file

Notepad Generator – 1.0.0a

This tool allows you to customize a PDF notepad.

PDFCreator

PDFCreator is a free tool to create PDF files from nearly any Windows application.

PDF Online

Quickly and easily convert your documents into PDF from anywhere in the world

RSS 2 PDF (Beta)

Free Online RSS, Atom or OPML to PDF Generator

popup generators


Accessible Pop-up Window Generator

Create pop-ups that are accessible and search engine-friendly

Popup Window Generator

Use Eric’s Popup window Generator to easily add popup windows to your site! The windows are activated by clicking on a link, and can be fine tuned in every aspect, such as dimensions, scrollbars, toolbar etc. Awesome tool.

Popup Window Maker

Need to create a popup window? Use their code generator! Fill out the specifications of the popup window you would like to use, including the URL and the various options such as menubars, toolbars, scrollbars, etc, and click the generate button. Just add this generated code to your site, or even have us mail it to you!

robots.txt generators


Robots.txt Generator

This is the Robot Control Code Generation Tool

Robots.txt Generator

robots.txt Generator (Website is in German language)

Robots.txt syntax checker

This robots.txt syntax checker checks the contents of a site’s robots.txt against that contained in the latest specification, along with providing warnings on the use of new features that are not yet widely deployed.

rss generators


ListGarden

The ListGarden™ program is a tool for manually creating and maintaining RSS feeds. (To learn what an RSS feed is, read “What is RSS?“.)

RSS Button Generator

A RSS Button is a small image banner/badge/button/label/sticker (80 pixels wide x 15 pixels high) that has been adapted by the blogging world in order to keep blogs neat and consistant. With this page you can create your own RSS styled buttons.

RSS 2 PDF

Free Online RSS, Atom or OPML to PDF Generator.

RSSxl Beta – RSS Generator

This online tool generates an RSS 2.0 Feed from pretty well any web page.

sitemap generators


Free Sitemap Generator

Their tool creates a sitemap as defined by Google™ for your site.

Google Sitemap Generator for WordPress v2 Final

This plugin generates a XML-Sitemap compliant sitemap of yourWordPress blog. This format is supported by Ask.com, Google, YAHOO and MSN Search.

Google Sitemaps

Google sitemap generator- need to sign up, excellent tool for webmaster.

ROR Sitemap Generator

A Google XML sitemap will ensure that Google and other participating search engines are made aware of all the pages contained within a website, speeding up the time it takes for your pages to be crawled by the search engines.

Sitemap Generator

Create an XML sitemap that can be submitted to GoogleBingYahoo and other search engines to help them crawl your website better.

text generators


Lorem Ipsum Generator

Typographic filler text generators are available for these languages:

ArabicChineseEsperantoGreekHebrewHindiInterlinguaJapaneseL33tspeakLatin |LetzebuergeschMorsecodeQuenyaRussianSlovioSonaTokiponaVolapük

Typographic filler text-generators are available with individual user interfaces in:

  • English
  • Spanish
  • German
  • Lorem Ipsum

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Get it from this ipsum generator.

    Malevole – Text Generator

    Tired of using Lorem Ipsum for dummy text in your latest masterpiece?

    This text generator has been developed based on years of careful research and is guaranteed to improve even the most lacklustre of designs.

    Typetester

    The Typetester is an online application for comparison of the fonts for the screen.

    tooltip generators


    DHTML Tooltip Generator

    Sometimes the HTML “alt=” isn’t enough to relay the detail you’d like it to. Here is a tool that will allow you to give your users more interactive tooltips.

    Flash Tooltip Generator

    A flash tool tip is like an alt tag that can contain a message and this tool tip can be used on text links quite nicely, giving a brief description of the link to your visitor.

    Weblog generators


    Firdamatic

    Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only and comes with no technical support as my interest in web design has died down. Use it at your own risk.

    PsycHo

    Free weblog template generator

    misc generators


    Backlink Builder

    Building Quality backlinks is one of the most important factors in Search Engine Optimization.

    FontEditor BitfontMaker

    Online bitmap font editor

    HTML to JavaScript Convertor

    The HTML to JavaScript convertor takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.

    Insta-Select

    Transform a list of words/phrases into to an XHTML-compliant <select> list. Just like that, as Tommy Cooper used to say.

    Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS

    This is a source code beautifier (source code formatter), similiar to indent. Please make a backup before you replace your code!

    Quick Escape

    It’s a tool that lets you quickly paste in HTML and for that to be converted to escaped characters which can be pasted back in to your HTML source code so that it renders on screen.

    Response.Right

    Response.Right converts text/HTML to server-side write statements in PHP, ASP, JavaScript and Perl.

    XFN (XHTML Friends Network) Link Creator

    Create XFN-friendly links at the press of a few buttons

    Yes No Now!

    It’s a tool for quickly generating accessible, XHTML-compliant yes/no radio button choices from a list, that’s what.

    Browsershots

    Free screenshots of your web design in different browsers

    iCapture

    Screenshot Generator

    More will be added…

    References:
    ASCII-Art
    Graphics
    Using the .htaccess File
    Free CSS Generators and Creators
    What is Web 2.0 Badges
    Web 2.0 Badges – Online Generator
    Photoshop to Create a Favicon ICO
    Meta Tag Generator By ProBlogBooster
    Free Online PHP Form Generator
    20 More Shocking and Remarkable Flash Photo galleries for Websites
    Color Scheme Generators for Cool Web Designs – Make Wonderful Color Schemes for Websites
    How to view hidden passwords without using any software
    How to increase your email subscriber database fast using proven and cost effective techniques

    Free Files of the Month: May 2011 from Envato

    This post is continuity of “ Free Files of the Month: April 2011 from Envato”  which is the marketplaces where thousands of developers and designers buy and sell digital goods every day.

    Free files from Envato are completely ready-made, well-designed and functional enough to provide you with all necessary facilities for your website or project requirement. You can download the files you like absolutely for free.

    All you have to create an account and with this single account you can get access to all Envato Marketplaces and after Sing in  Download link will be available to you.

    Themeforest: Slideo Business template – available in 7 colors

    A modern business template, cool sliding menu and ready to use page styles.

    7 custom skins: Navy, Red, Green, Pink, Orange, Purple and Grey.

    Live Preview | Download

    Code Canyon:CSS style switcher

    Features

    • absolutely no PHP editing needed!
    • 5 seconds, 3 step setup (see below)
    • created for designers
    • support for multiple CSS files in single HTML
    • ideal for showcasing your work with multiple color schemes
    • faster than JS based switching
    • unlike JS based switching not prone to bugs; doesn’t interfeer with other JS code
    • extensive user-friendly documentation and examples

    Live Preview | Download

    Calendar is resizable.
    You can resize the whole calendar over xml including text size and position of every element, without the need for opening flash files.
    Easy to change font (instructions included).

    Download

    Video Hive: Spectrum

    Customize this project any way you need! Add your videos, photos and text! By simply tweaking a few settings, you can give this project a completely different feel!

    Included with the project file is a in-depth video tutorial to help you customize the project quickly and easily.

    Download

    Pack of stunning backgrounds, including city skylines and night skies.

    • Includes 25 JPEGS and a PSD file
    • 10 color variations, plus add your own with a few clicks
    • Fully layered, editable and easy to use
    • Textured and clean versions included
    • Resolution – 1280×960

    Download

    3D Ocean: 15 plastic Materials and Render Scene

    This file was made using 3d Max 2010, so the material will only work in 3d max 2010/2011

    Please Note the Hovercraft is not included, but is available to buy from DarkstarDesigns’s portfolio.

    These amazing materials come with a professional render scene included to help get the best out the textures, It comes ready to use simply add you own models to the scene. 15 different styles of Plastic material to choose from so any model will look good.

    Download

    An upbeat modern Africa inspired piece depicting simpler times and joyful souls… Bouncy celesta and marimbas set the tone for this one.

    Download

    Tut Plus: Build your Own JavaScript Library

    Over the course of the past few years, the JavaScript community has exploded exponentially. While technologies like Ajax certainly had something to do with the popularity of JavaScript, it it’s safe to say that libraries are the primary reason we’ve seen such astonishing growth in the community. No longer is the browser the playground of those who venture into JavaScript development and brave the disparate APIs supported by multiple browsers. Thanks to libraries, the differences between the popular browsers are minimized, making cross-browser development much easier than it used to be.

    Download

    Run a Video Blog on “eVid WordPress Theme”

    Free & Professional WordPress Security Service Free & Professional WordPress Security Service

    We Love WordPress. WordPress Arena is a place for WordPress Developers and Designers, providing Tips, tricks, tools and resources to build a website or blog on WordPress. We also present The WordPress Showcase for all kind of WordPress Powered Websites.

    Recent Comments

    Anderson

    |

    Dont work with post_type? ‘post_type=property&numberposts=1′