Category Archives: JQuery

JQuery is the most popular JavaScript Library. You can use various sophisticated JavaScript technique by jQuery only writing very little code.

jQuery Form Validation without and with Plugins

Custom contact us page for WordPress using jQuery Contact Form without a Plugin :

http://trevordavis.net/blog/wordpress-jquery-contact-form-without-a-plugin/


10 Useful jQuery Form Validation Techniques and Tutorials
http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/


Good Image & banner rotator plugins JQuery Mootools

A jQuery Image Scroller [ Very Good looking scroller ]
View Live Demo
Main Script Page Link : http://www.htmldrive.net/items/show/111/a-jQuery-Image-Scroller


SlideItMoo v1.1 – image slider
Page Link : http://www.php-help.ro/mootools-12-javascript-examples/slideitmoo-v11-image-slider/
View Live Demo : SlideItMoo v1.1 – image slider


Simple jQuery Slider SUDO SLIDER : Good simple jQuery Slider
Main page link: http://www.htmldrive.net/items/show/434/Sudo-Slider-jQuery-Plugin
Demo


jQuery cool hover Slide Effect
View Demo: http://www.htmldrive.net/items/demo/685/jQuery-cool-hover-Slide-Effect


Slideshow Feature List : Visual lists (Looks good )

Demo : http://www.htmldrive.net/items/demo/59/Slideshow-Feature-List/


A JQuery Dual Slider
View Demo

———————————————————-

Fatpaint is a free online photo editor, Graphic design software, that lets you design online, put your design on products, and then directly purchase those products.

s3Slider jQuery plugin – jQuery Image Rotator

This is the s3Slider jQuery main plugin page : http://www.serie3.info/s3slider/

View the live example of this s3Slider jQuery plugin based on jQuery

View the usage of this plugin here : http://dreamweavertutorial.co.uk/dreamweaver/video/jquery-image-rotator.htm

HOW TO USE

It is very easy. First include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider.

JavaScript code inside <head> section of HTML page :

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

A sample code which needs to be put in <BODY> tag :

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

The CSS Code needs to be put in <style> tags in <head> section

#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Calling of the JavaScript Library is initiated by the following lines :

Then you need to initalize s3Slider and set the duration of how long will one picture be shown on the page (value is in miliseconds).

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

Image Gallery with jQuery Lightbox

A very good video tutorial on jQuery Lightbox

Here is the link to part 2:

Here is the link to part 3:

The image gallery is available for a free download, here is the link to the Dreamweaver Tutorial EXERCISE FILES:

http://bit.ly/lightbox-gallery-files

=============================================

Fatpaint.com is completely online Graphic Design Software. This online picture editor is the most advanced online photo editing software that I have come across.