Tuesday, June 28, 2011

Model Box In JavaScript, Simple JavaScript to create Light Box, Light Box Tutorial in javascript

Now these days Light box / Model box are widely use in website to show content or some other information.

and tutorial provide by website for creating Lightbox or Model box are too complex to alter the things.

Here I am providing simple light box and Model box tutorial with using few lines of script code.

JavaScript Code
function gray_box1() {
document.getElementById('light1').style.display = 'block';
document.getElementById('fade').style.display = 'block';
document.getElementById('fade').style.height='2000px';
}



HTML Code
<div id="fade" class="black_overlay">
div> 

X
Hello! this is light box example. 

CSS Code

Online Link


Thursday, June 23, 2011

Multi Level CSS DropDownn, DropDown Menu, MiltiLevel menu, DropDown menu using CSS

Tomorrow I found an another Simple menu style which using CSS to create its drop down list and also it works upto 4 four level.

it use different  CSS style for this menu to work in IE6 using conditional CSS.

So I decided to put that complete code here so that my Designer friends can use and learn easily.


Head Code Section
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* page styling, unimportant for the menu. only makes the page looks nicer */
body {
 font-family: Calibri, "Trebuchet MS", sans-serif;
 font-size: 100%;
}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}

.example {
 background: #eee;
 padding: 50px;
}

/* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */

/* remove all list stylings */
.menu, .menu ul {
 margin: 0;
 padding: 0;
 border: 0;
 list-style-type: none;
 display: block;
}

.menu li {
 margin: 0;
 padding: 0;
 border: 0;
 display: block;
 float: left; /* move all main list items into one row, by floating them */
 position: relative; /* position each LI, thus creating potential IE.win overlap problem */
 z-index: 5;  /* thus we need to apply explicit z-index here... */
}

.menu li:hover {
 z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
 white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
       see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
 float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
 visibility: hidden; /* initially hide all submenus. */
 position: absolute;
 z-index: 10;
 left: 0; /* while hidden, always keep them at the top left corner, */
 top: 0;  /*   to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
 visibility: visible; /* display submenu them on hover */
 top: 100%; /* 1st level go below their parent item */
}

.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
 top: 0;
 left: 100%;
}

/* -- float.clear --
 force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
 content: ".";
 height: 0;
 display: block;
 visibility: hidden;
 overflow: hidden;
 clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
 min-height: 0;
}
/* -- float.clear.END --  */

/* -- sticky.submenu --
 it should not disappear when your mouse moves a bit outside the submenu
 YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
 if you do it, make sure you 110% know what you do */
.menu ul {
 background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
 padding: 10px 30px 30px 30px;
 margin: -10px 0 0 -30px;
 /*background: #f00;*/ /* uncomment this if you want to see the "safe" area.
        you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
 padding: 30px 30px 30px 10px;
 margin: -30px 0 0 -10px;
}
/* -- sticky.submenu.END -- */






/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */

.menu, .menu ul li {
 color: #eee;
 background: #234;
}

.menu ul {
 width: 11em;
}

.menu a {
 text-decoration: none;
 color: #eee;
 padding: .4em 1em;
 display: block;
 position: relative;
}

.menu a:hover, .menu li:hover>a {
 color: #fc3;
}

.menu li li { /* create borders around each item */
 border: 1px solid #ccc;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
 border-top: 0;
}

.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
 top: 5px;
 left: 90%;
}

/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
 placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
 color: #567;
}

/* Fix for IE5/Mac \*//*/
.menu a {
 float: left;
}
/* End Fix */

/*]]>*/
</style>



<!--  Conditional CSS for IE6 -->


<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* - - - ADxMenu: IE6 BASIC styles [MANDATORY] - - - */

/*
 this rules improves accessibility - if Javascript is disabled, the entire menu will be visible
 of course, that means that it might require different styling then.
 in which case you can use adxie class - see: aplus.co.yu/adxmenu/examples/ie6-double-style/
 */
.menu ul {
 visibility: visible;
 position: static;
}

.menu, .menu ul { /* float.clear */
 zoom: 1;
}

.menu li.adxmhover {
 z-index: 10000;
}

.menu .adxmhoverUL { /* li:hover>ul selector */
 visibility: visible;
}

.menu .adxmhoverUL { /* 1st-level submenu go below their parent item */
 top: 100%;
 left: 0;
}

.menu .adxmhoverUL .adxmhoverUL { /* 2nd+ levels go on the right side of the parent item */
 top: 0;
 left: 100%;
}

/* - - - ADxMenu: DESIGN styles - - - */

.menu ul a { /* fix clickability-area problem */
 zoom: 1;
}

.menu li li { /* fix white gap problem */
 float: left;
 width: 100%;
}

.menu li li { /* prevent double-line between items */
 margin-top: -1px;
}

.menu a:hover, .menu .adxmhoverA {  /* li:hover>a selector */
 color: #fc3;
}

.menu .adxmhoverUL .adxmhoverUL { /* inset 2nd+ submenus, to show off overlapping */
 top: 5px;
 left: 90%;
}

/*]]>*/
</style>

<script type="text/javascript" src="ADxMenu.js"></script>
<![endif]-->



HTML Source Code
<div class="example">
        <ul class="adxm menu">
            <li><a href="#">Main menu:</a></li>
            <li><a href="#" title="My writings">Blog</a>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#feeds/">Feeds</a></li>
                    <li><a href="#archive/">Archive</a></li>
                </ul>
            </li>
            <li><a href="#adxmenu/" title="Nested fly-out menu, standard-compliant">ADxMenu</a>
                <ul>
                    <li><a href="#">1st submenu</a></li>
                    <li><a href="#adxmenu/">Overview</a></li>
                    <li><a href="#adxmenu/instructions/">Instructions</a></li>
                    <li><a href="#adxmenu/examples/">Examples</a>
                        <ul>
                            <li><a href="#">2nd submenu</a></li>
                            <li><a href="#adxmenu/examples/htb/">Top to bottom</a></li>
                            <li><a href="#adxmenu/examples/hbt/">Bottom to top</a>
                                <ul>
                                    <li><a href="#">3rd submenu</a></li>
                                    <li><a href="#">Item 2</a></li>
                                    <li><a href="#">Item 3</a></li>
                                    <li><a href="#">Item 4</a></li>
                                </ul>
                            </li>
                            <li><a href="#adxmenu/examples/vlr/">Left to right</a></li>
                            <li><a href="#adxmenu/examples/vrl/">Right to left</a></li>
                        </ul>
                    </li>
                    <li><a href="#adxmenu/trouble/">Troubleshooting</a></li>
                </ul>
            </li>
            <li><a href="#wch/" title="Windowed Controls Hider, for Win IE">WCH</a>
                <ul>
                    <li><a href="#wch/">Overview</a></li>
                    <li><a href="#wch/instructions/">Instructions</a></li>
                    <li><a href="#wch/examples/">Examples</a></li>
                    <li><a href="#wch/trouble/">Troubleshooting</a></li>
                </ul>
            </li>
            <li><a href="#lab/" title="Reusable web techniques">Lab</a>
                <ul>
                    <li><a href="#css/z-pos">z-index tutorial</a></li>
                    <li><a href="#css/forms/">Styling forms</a></li>
                    <li><a href="#css/cfl/">Centered frame layout</a></li>
                    <li><a href="#css/tabs2/">Tabs with variable height</a></li>
                    <li><a href="#css/nestedtabs2/">2-level navigation</a></li>
                    <li><a href="#css/ow/">Tabs: Overlapping Windows</a></li>
                    <li><a href="#scripts/windowopen/">Unobtrusive window.open</a></li>
                    <li><a href="#scripts/fif/">Floating iFrame</a></li>
                </ul>
            </li>
            <li><a href="#deliver/" title="Various sites I (co-)did">Delivered</a>
                <ul>
                    <li><a href="#deliver/sites/">Sites &amp; proof of concepts</a></li>
                    <li><a href="#deliver/wp/">WordPress goodies</a></li>
                </ul>
            </li>
            <li><a href="#about/" title="Relevant info about me">Colophon</a></li>
            <li><a href="#about/contact/">Contact me</a></li>
        </ul>
    </div>

JavaScript link
ADxMenu.js
 
 
 

Wednesday, June 22, 2011

JavaScript Captcha implement, Form Captcha validation, captcha implementation using image and MD5

CAPTCHAs are used in attempts to prevent automated software from performing actions which degrade the quality of service of a given system, whether due to abuse or resource expenditure.

Its very difficult to implement captch into Static HTML  pages. so here i am providing simple code to implement captcha.


use script function to create input and image field in your for and link the md5.js and jcap.js in your HTML source.

<script type="text/javascript">sjcap();</script>

website using this script for using captcha.
 View online
Download source code

Jquery Form validator, Form Validation, Regular form validation mail

Here I am providing form validation code for regular expression using jquery. Just comment the field you don't want.

Live Demo

Monday, June 20, 2011

W3C Checker, Web Accessibility checker, Tools to check W3C and Accessibility tool, Web Accessibility Testing Tools for Designers, W3C Checker for Mobile web, W3C Stamdards

From Last Four Months I am working for Banks website like CBI and OBC as they are our Company's Clients.

To achieve the Web Accessibility Level AA we done few things and features implement to our clients website.

But except all I found that do we know that our page has pass Web Accessibility Test.

After searching long time I found few of link which check the web accessibility Level AA.

I want to share those link on my blog so it will be easy to Implement the Web accessibility Level AA to Designers/Developer.

Accessibility testing tools can assist web designers in making their web site accessible to all visitors. Most of the online testers cannot test some checkpoints in the W3C Web Content Accessibility Guidelines at all and can only partially test others.
The most important part before starting Web Accessibility is to Create a well formed structured web page.
We use W3C checker to check structured Validation of web page.
Tests HTML documents for conformance with HTML standards. The HTML Validation Service specifically tests for compliance with Level AA Checkpoint 3.2: “Create documents that validate to published formal grammars”, however it will pick up other accessibility errors such as missing ALT attributes and invalid field labels.
W3C HTML Validator
http://validator.w3.org/

Tests cascading style sheets to ensure they conform with CSS standards. The CSS Validation Service specifically tests for compliance with Level AA Checkpoint 3.2: “Create documents that validate to published formal grammars”.
The validator is not 100% accurate but passing validation with no errors or warnings is a good indicator that your code is Standards-compliant. One weakness with the validator is that it can get confused if the CSS version is not specified or if the CSS uses a mix of CSS 1 & 2 for example. This can result in inaccurate reports.
W3C CSS Validator
http://jigsaw.w3.org/css-validator/



Web Accessibility checkers

The WAVE is a page-by-page accessibility evaluator by WebAIM. It tests many, but not all, of the W3C Web Content Accessibility Guidelines. Also not mention the accessibility level so it can be use to implement basic feature(structured) of web page.



AChecker. This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker.

By using Its options you can check different level of web accessibility and also check the standard of HTML and CSS.

In short you have all checker facility here you needed to implement to your website.
AChecker

Wednesday, June 15, 2011

Create HTML Scroller in div using CSS, CSS Tutorial to create HTML Scroller, CSS Scrollbar content

Last month I was working on my companies client website. he ask to me make scrollable area to show there text. because website content has too much text which increase the height of webpage too much.

So I did some quick research into creating my own Scroll area without using script as i have posted before for JavaScript Scroll bar content.

After Searching I found CSS attribute "Overflow" and i found that this attribute can help me to create my own scrollable content.

So here I am sharing the source code for CSS Scrollbar content.

CSS CODE With Div

<div style="width: 98%; padding: 1%; border: 2px solid rgb(170, 0, 0); height: 400px; overflow: auto;">
        <p>
            This Subscriber Agreement and Terms of Use govern your use of RIP (Revitalize Inspire
            Perform) online magazine, distributed by The Aquiline Group, and unless other terms
            and conditions expressly govern, any other electronic services from RIP magazine
            and the Aquiline Group that may be made available from time to time (each, a "Service").</p>
        <p>
            If you agree to be bound by the terms of this Agreement, you should click on the
            "I AGREE" button at the end of this Agreement. If you do not agree to be bound by
            the terms of this Agreement, you should click "I DISAGREE." If you click "I DISAGREE,"
            you will not be able to proceed with the registration process for the respective
            Service and become a subscriber. To the extent you have access to, or are using,
            a Service without having completed our registration process or clicked on an "I
            AGREE" button, you are hereby notified that your continued use of a Service is subject
            to many of the terms and conditions of this Agreement as explained in Section 5
            below.</p>
       

        <p>
            <strong class="con_head">5. Limitations on Use. </strong>
        <br>
            a.Only one individual may access a Service at the same time using the same user
            name or password, unless we agree otherwise.</p>
        <p>
            b.The text, graphics, images, video, metadata, design, organization, compilation,
            look and feel, advertising and all other protectable intellectual property (the
            "Content") available through the Services are our property or the property of our
            advertisers and licensors and are protected by copyright and other intellectual
            property laws. Unless you have our written consent, you may not sell, publish, distribute,
            retransmit or otherwise provide access to the Content received through the Services
            to anyone, including, if applicable, your fellow students or employees, with the
            following exceptions:</p>
        <p>
            (i) You may occasionally distribute a copy of an article, or a portion of an article,
            from a Service in non-electronic form to a few individuals without charge, provided
            you include all copyright and other proprietary rights notices in the same form
            in which the notices appear in the Service, original source attribution, and the
            phrase "Used with permission from RIP magazine" or "Used with permission from the
            Aquiline Group" as appropriate. Please consult the RIP magazine web site if you
            need to distribute an article from a Service to a larger number of individuals,
            on a regular basis or in any other manner not expressly permitted by this Agreement.</p>
        <p>
            (ii)While you may download, store and create an archive of articles from the Service
            for your personal use, you may not otherwise provide access to such an archive to
            more than a few individuals on an occasional basis. The foregoing does not apply
            to any sharing functionality we provide through the Service that expressly allows
            you to share articles or links to articles with others. In addition, you may not
            use such an archive to develop or operate an automated trading system or for data
            or text mining.</p>
        <p>
            c.You agree not to rearrange or modify the Content. You agree not to create abstracts
            from, scrape or display our content for use on another web site or service (other
            than headlines from our RSS Feed with active links back to the full article on the
            Service). You agree not to post any content from the Services (other than headlines
            from our RSS Feed with active links back to the full article on the Service) to
            weblogs, newsgroups, mail lists or electronic bulletin boards, without our written
            consent.</p>
        <p>
            d.You agree not to use the Services for any unlawful purpose. We reserve the right
            to terminate or restrict your access to a Service if, in our opinion, your use of
            the Service may violate any laws, regulations or rulings, infringe upon another
            person's rights or violate the terms of this Agreement. Also, we may refuse to grant
            you a user name that impersonates someone else, is protected by trademark or other
            proprietary right law, or is vulgar or otherwise offensive.</p>
       

        <p>
            iii. Grant of Rights and Representations by You. If you upload, post or submit any
            User Content on a Service, you represent to us that you have all the necessary legal
            rights to upload, post or submit such User Content and it will not violate any law
            or the rights of any person. You agree that upon uploading, posting or submitting
            information on the Services, you grant the Aquiline Group, and our respective affiliates
            and successors a non-exclusive, transferable, worldwide, fully paid-up, royalty-free,
            perpetual, irrevocable right and license to use, distribute, publicly perform, display,
            reproduce, and create derivative works from your User Content in any and all media,
            in any manner, in whole or part, without any duty to compensate you. You also grant
            us the right to authorize the use of User Content, or any portion thereof, by users
            and other users in accordance with the terms and conditions of this Agreement, including
            the rights to feature your User Content specifically on the Services and to allow
            other users or users to request access to your User Content, such as for example
            through an RSS Feed.</p>
        <p>
            iv. We may also remove any User Content for any reason and without notice to you.
            This includes all materials related to your use of the Services or membership, including
            email accounts, postings, profiles or other personalized information you have created
            while on the Services.</p>
        <p>
            v. Copyright/IP Policy. It is our policy to respond to notices of alleged infringement
            that comply with the Digital Millennium Copyright Act. For more information about
            our policy, please see our Privacy Policy.</p>
        <p>
            <strong class="con_head">7. Third Party Web Sites, Services and Software. </strong><br>
            We may link to, or promote web sites or services from other companies or offer you
            the ability to download software from other companies. You agree that we are not
            responsible for, and do not control, those web sites, services and software.</p>
        <p>
            <strong class="con_head">8. DISCLAIMERS OF WARRANTIES AND LIMITATIONS ON LIABILITY.
            </strong><br>YOU AGREE THAT YOUR ACCESS TO, AND USE OF, THE SERVICES AND THE CONTENT
            AVAILABLE THROUGH THE SERVICES IS ON AN "AS-IS", "AS AVAILABLE" BASIS AND WE SPECIFICALLY
            DISCLAIM ANY REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, WITHOUT
            LIMITATION, ANY REPRESENTATIONS OR WARRANTIES OF MERCHANTABILITY OR FITNESS FOR
            A PARTICULAR PURPOSE. We do not give tax or investment advice or advocate the purchase
            or sale of any security or investment. You should always seek the assistance of
            a professional for tax and investment advice. THE AQUILINE GROUP AND ITS SUBSIDIARIES,
            AFFILIATES, SHAREHOLDERS, DIRECTORS, OFFICERS, EMPLOYEES AND LICENSORS WILL NOT
            BE LIABLE (JOINTLY OR SEVERALLY) TO YOU OR ANY OTHER PERSON AS A RESULT OF YOUR
            ACCESS OR USE OF THE SERVICES FOR INDIRECT, CONSEQUENTIAL, SPECIAL, INCIDENTAL,
            PUNITIVE, OR EXEMPLARY DAMAGES, INCLUDING, WITHOUT LIMITATION, LOST PROFITS, LOST
            SAVINGS AND LOST REVENUES (COLLECTIVELY, THE "EXCLUDED DAMAGES"), WHETHER OR NOT
            CHARACTERIZED IN NEGLIGENCE, TORT, CONTRACT, OR OTHER THEORY OF LIABILITY, EVEN
            IF ANY OF THE AQUILINE GROUP PARTIES HAVE BEEN ADVISED OF THE POSSIBILITY OF OR
            COULD HAVE FORESEEN ANY OF THE EXCLUDED DAMAGES, AND IRRESPECTIVE OF ANY FAILURE
            OF AN ESSENTIAL PURPOSE OF A LIMITED REMEDY. IF ANY APPLICABLE AUTHORITY HOLDS ANY
            PORTION OF THIS SECTION TO BE UNENFORCEABLE, THEN THE AQUILINE GROUP PARTIES' LIABILITY
            WILL BE LIMITED TO THE FULLEST POSSIBLE EXTENT PERMITTED BY APPLICABLE LAW.</p>
        <p>
            <strong class="con_head">9. General.</strong><br>This Agreement contains the final
            and entire agreement between us regarding your use of the Services and supersedes
            all previous and contemporaneous oral or written agreements regarding your use of
            the Services. We may discontinue or change the Services, or their availability to
            you, at any time. This Agreement is personal to you, which means that you may not
            assign your rights or obligations under this Agreement to anyone. No third party
            is a beneficiary of this Agreement. You agree that this Agreement, as well as any
            and all claims arising from this Agreement will be governed by and construed in
            accordance with the laws of the District of Columbia, United States of America applicable
            to contracts made entirely within the District of Columbia and wholly performed
            in Washington, D.C., without regard to any conflict or choice of law principles.
            The sole jurisdiction and venue for any litigation arising out of this Agreement
            will be an appropriate federal or state court located in Washington, D.C. This Agreement
            will not be governed by the United Nations Convention on Contracts for the International
            Sale of Goods.</p>
    </div>


Just copy and paste above text into body tag of your HTML.

and you will find content like this.


Online link

JavaScript Video Gallery, youtube Video Gallery, JavaScript Dynamic Video Gallery, JavaScript Tutorial to create dynamic Video gallery using youtube, DHTML SlideShow in JavaScript for Video

 I found DHTML Slideshow coded in JavaScript on Dynamic Drive for manual slide show for images.

I found it useful because i need same effect but Instead using image i need same effect for my videos.

So i have edit its javascript to run OBJECT code of youtube flash to create my dynamic Video galley. I am sharing my own edited script here so it will help other users to create their Video gallery.

To run the video we are using youtube links means videos uploaded on youtubes will run in our video gallery by passing their links to javascript array.

I am providing here complete source for JavaScript Dynamic Video gallery.

HTML Source
<div class="youtube_frame">
<div class="video">
<script type="text/javascript">

    //Define your own array to hold the photo album images
    //Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

    var myvacation = new Array()
    myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&amp;hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[1] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&amp;hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]
    myvacation[2] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&amp;hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[3] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&amp;hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]
    myvacation[4] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&amp;hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[5] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&amp;hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]

    //myvacation[2]=["http://www.youtube.com/v/r5N2BLDftuY?fs=1&amp;hl=en_US&amp;color1=0x234900&amp;color2=0x4e9e00", "Delhi 6 Mast Song", ""]


    //initiate a photo gallery
    //Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
    var thepics = new photogallery(myvacation, 1, 1, '659px', '260px', 'testing')

    //OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
    //DELETE everything below to disable
    //Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
    thepics.onselectphoto = function(img, link) {
        if (link != null) //if this image is hyperlinked
            window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
        return false //cancel default action when clicking on image, by returning false instead of true
    }

</script></div>

</div>

Put this text into body of your HTML.

CSS Source

<style type="text/css">
.youtube_frame{
    width:659px;
    height:324px;
    float:left;
    position:relative;
    border:1px #000 solid;
}
.video{
    height:260px;
    float:left;
    width:659px;
}
.photogallery{ /*CSS for TABLE containing a photo album*/
               background:none repeat scroll 0 0 #222121;
}

.photogallery img{ /*CSS for images within an album*/
border: 1px solid green;
}

.photonavlinks{ /*CSS for pagination DIV*/
font: bold 14px Arial;
text-align:right;
height:44px;
position:relative;
z-index:0;
color:#fff;
padding-top:20px;
background:none repeat scroll 0 0 #222121;

}

.photonavlinks a{ /*CSS for each navigational link*/
margin-right: 2px;
margin-bottom: 3px;
padding: 1px 5px;
text-decoration: none;
color:#000;
background-color: white;
}

.photonavlinks a.current{ /*CSS for currently selected navigational link*/
background-color:#ff01a5;
color:white;
}
</style>

JavaScript Source
// -------------------------------------------------------------------
// Photo Album Script v2.0- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Mar 11th, 07': Script updated to v2.0
// -------------------------------------------------------------------

function photogallery(garray, cols, rows, twidth, theight, paginatetext){
 gcount=(typeof gcount=="undefined")? 1 : gcount+1 //global var to keep count of current instance of photo gallery
 this.gcount=gcount
 this.galleryarray=garray
 this.cols=cols
 this.rows=rows
 var twidth=twidth || "700x" //default table width is 700px
 var theight=theight || "500px"
 var ptext=(typeof paginatetext=="object")? paginatetext : ["Browse Gallery:", ""] //Store 2 compontents of paginate DIV text inside array
 this.pagecount=Math.ceil(this.galleryarray.length/(cols*rows)) //calculate number of "pages" needed to show the images
 document.write('<table class="photogallery" id="photogallery-'+gcount+'" style="width:'+twidth+'; height:'+theight+';">') //Generate table for Photo Gallery
 for (var r=0; r<rows; r++){
  document.write('<tr>')
  for (var c=0; c<cols; c++)
   document.write('<td valign="top"></td>')
  document.write('</tr>')
 }
 document.write('</table>')
 document.write('<div class="photonavlinks" id="photogallerypaginate-'+gcount+'"></div>') //Generate Paginate Div

 var gdiv=document.getElementById("photogallery-"+this.gcount)
 var pdiv=document.getElementById("photogallerypaginate-"+this.gcount)
 gdiv.onselectphoto=function(imgobj, linkobj){return true} //custom event handler "onselectphoto", invoked when user clicks on an image within gallery
 this.showpage(gdiv, 0)
 this.createNav(gdiv, pdiv, ptext)
 gdiv.onclick=function(e){return photogallery.defaultselectaction(e, this)} //attach default custom event handler action to "onclick" event
 return gdiv
}


photogallery.prototype.createImage=function(imgparts){
 //var imageHTML='<img src="'+imgparts[0]+'" title="'+imgparts[1]+'"/>'
 var imageHTML='<object height="243" width="645" type="application/x-shockwave-flash" data="'+imgparts[0]+'"><param name="movie" value="'+imgparts[0]+'"><param name="quality" value="high"><param value="opaque" name="wmode"></object>'
 if (typeof imgparts[2]!="undefined" && imgparts[2]!=""){ //Create URL?
  var linktarget=imgparts[3] || ""
  imageHTML='<a href="'+imgparts[2]+'" target="'+linktarget+'">'+imageHTML+'</a>'
 }
 if (typeof imgparts[1]!="undefined" && imgparts[1]!="") //Display description?
  imageHTML+='<div class="details" style="position:absolute; left:0px; bottom:30px;">'+imgparts[1] +'</div>'
 return imageHTML
}


photogallery.prototype.showpage=function(gdiv, pagenumber){
 var totalitems=this.galleryarray.length //total number of images
 var showstartindex=pagenumber*(this.rows*this.cols) //array index of div to start showing per pagenumber setting
 var showendindex=showstartindex+(this.rows*this.cols) //array index of div to stop showing after per pagenumber setting
 var tablecells=gdiv.getElementsByTagName("td")
 for (var i=showstartindex, currentcell=0; i<showendindex && i<totalitems; i++, currentcell++) //Loop thru this page's images and populate cells with them
  tablecells[currentcell].innerHTML=this.createImage(this.galleryarray[i])
 while (currentcell<tablecells.length){ //For unused cells, if any, clear out its contents
  tablecells[currentcell].innerHTML=""
  currentcell++
 }
}

photogallery.prototype.createNav=function(gdiv, pdiv , ptext){
 var instanceOfGallery=this
 var navHTML=""
 for (var i=0; i<this.pagecount; i++)
  navHTML+='<a href="#navigate" rel="'+i+'">'+ptext[1]+(i+1)+'</a> ' //build sequential nav links
 pdiv.innerHTML=ptext[0]+' '+navHTML
 var navlinks=pdiv.getElementsByTagName("a")
 navlinks[0].className="current" //Select first link by default
 this.previouspage=navlinks[0] //Set previous clicked on link to current link for future ref
 for (var i=0; i<navlinks.length; i++){
  navlinks[i].onclick=function(){
   instanceOfGallery.previouspage.className="" //"Unhighlight" last link clicked on...
   this.className="current" //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
   instanceOfGallery.showpage(gdiv, this.getAttribute("rel"))
   instanceOfGallery.previouspage=this //Set previous clicked on link to current link for future ref
   return false
  }
 }
}

photogallery.defaultselectaction=function(e, gdiv){ //function that runs user defined "onselectphoto()" event handler
 var evtobj=e || window.event
 var clickedobj=evtobj.target || evtobj.srcElement
 if (clickedobj.tagName=="object"){
  var linkobj=(clickedobj.parentNode.tagName=="A")? clickedobj.parentNode : null
  return gdiv.onselectphoto(clickedobj, linkobj)
 }
}

Modification
myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&amp;hl=en_US", "Indian michael jackson awesome dance - funny video", ""]

Myacation is array name to add new links.
it accept four argument as describe below.
["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

path_to_thumbnail  = here you mention the url for video you want to run.
Else option will not used as we are working on video so their title will be same as it on youtube.


Online Link

Download link

Tuesday, June 14, 2011

Jquery Tutorial for accordion, javascript Accordion, Jquery Slide animation

Here I explaing you how to apply Javascript effects by using jQuery.
Jquery Plugin is used to implement lots of animation and work for those we are using Ajax.

LIVE DEMO


HTML Source Code

<div class="accordion">
 <h3>Question One Sample Text</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <h3>This is Question Two</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <h3>Another Questio here</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <h3>Sample heading</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <h3>Sample Question Heading</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>

 CSS Source Code

<style type="text/css">
body {
 margin: 10px auto;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
 width: 480px;
 border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
 background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
 padding: 7px 15px;
 margin: 0;
 font: bold 120%/100% Arial, Helvetica, sans-serif;
 border: solid 1px #c4c4c4;
 border-bottom: none;
 cursor: pointer;
}
.accordion h3:hover {
 background-color: #e3e2e2;
}
.accordion h3.active {
 background-position: right 5px;
}
.accordion p {
 background: #f7f7f7;
 margin: 0;
 padding: 10px 15px 20px;
 border-left: solid 1px #c4c4c4;
 border-right: solid 1px #c4c4c4;
}
</style>

Jquey Source Code

<script type="text/javascript">
$(document).ready(function(){
 
 $(".accordion h3:first").addClass("active");
 $(".accordion p:not(:first)").hide();

 $(".accordion h3").click(function(){
  $(this).next("p").slideToggle("slow")
  .siblings("p:visible").slideUp("slow");
  $(this).toggleClass("active");
  $(this).siblings("h3").removeClass("active");
 });

});
</script>

Jquery Liabrary File

 Jquery Modification

$(".accordion p:not(:first)").hide();
 this code Reefer that first P tag will not close else all will be close by default.
If you want to hide all tabs just comment this line in jquery code.
You can any of tag like DIV, SPAN instead of using P tag.
you can also modified the css as well as i did one of my project.
ONLINE Link  if you need any other modification feel free to write me.

Monday, June 13, 2011

Image Gallery with onhover Scroll, javaScript Tutorial for Smooth DIV Scroll

I have found one of very good Jquery image gallery or horizontal scroll animation for contents.

its a Jquery plugin use to scroll content horizontally on mouse over it shows its left and right when you have content to be showed.

I am presenting here its filtered HTML and CSS code for SmoothDIVScroll gallery.

you can find complete Detail for SmoothDivScroll by visting its website.

Smooth DIV Scroll

HTML Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Basic demo - jQuery Smooth Div Scroll</title>
    <!-- the CSS for Smooth Div Scroll -->
    <link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
    <!-- jQuery library - I get it from Google API's -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
 <link href="css/smoothDivScroll.css" rel="stylesheet" type="text/css" />

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

   


    <script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>

    <script type="text/javascript">
        // Initialize the plugin with no custom options
        $(window).load(function() {
            $("div#makeMeScrollable").smoothDivScroll({});
        });
    </script>

    <!-- Styles for my specific scrolling content -->
    <style type="text/css">
        #makeMeScrollable
        {
            width: 100%;
            height: 330px;
            position: relative;
        }
        #makeMeScrollable div.scrollableArea img
        {
            position: relative;
            float: left;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="makeMeScrollable">
        <div class="scrollingHotSpotLeft">
        </div>
        <div class="scrollingHotSpotRight">
        </div>
        <div class="scrollWrapper">
            <div class="scrollableArea">
                <img src="images/field.jpg" alt="Demo image" />
                <img src="images/gnome.jpg" alt="Demo image" />
                <img src="images/pencils.jpg" alt="Demo image" />
                <img src="images/golf.jpg" alt="Demo image" />
                <img src="images/river.jpg" alt="Demo image" />
                <img src="images/train.jpg" alt="Demo image" />
                <img src="images/leaf.jpg" alt="Demo image" />
            </div>
        </div>
    </div>
</body>
</html>

CSS Source

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
    /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
    min-width: 75px;
    width: 10%;
    height: 100%;
    /* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
    background-image: url(../images/arrow_left.png);
    background-position:center center;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    left: 0;
    display:none;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
    background-image: url(../images/arrow_left.gif);               
    background-color: #fff;
    background-repeat: no-repeat;
    opacity: 0.35; /* Standard CSS3 opacity setting */
    -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
    filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
    zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
    min-width: 75px;
    width: 10%;
    height: 100%;
    background-image: url(../images/arrow_right.png);
    background-position:center center;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    right: 0;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
    background-image: url(../images/arrow_right.gif);
    background-color: #fff;
    background-repeat: no-repeat;
    opacity: 0.35;
    filter: alpha(opacity = 35);
    -moz-opacity: 0.35;
    zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

div.scrollableArea
{
    position: relative;
    width: auto;
    height: 100%;
}

JavaScript Script files
jquery.smoothDivScroll-1.1-min.js
js/jquery.ui.widget.js
jquery.min.js 
 
 
 
 

Wednesday, June 8, 2011

JavaScript Content Slider, Content Scrollbar using JavaScript, Custom JavaScript Scrollbar tutorial

Here I am providing the details how to create Custom Scrollbar for WebPage.
So now you are not bound to use browser's inbuilt scrollbar.

Create your own Fancy Scrollbar for your Website with Easy Step.

HTML Source
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0054)http://www.n-son.com/scripts/jsScrolling/example2.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jsScrollbar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">.Container {
 BACKGROUND: url(images/container_background.gif) #fff no-repeat; LEFT: 100px; WIDTH: 400px; POSITION: absolute; TOP: 50px; HEIGHT: 600px
}
#Scroller-1 {
 OVERFLOW: hidden; WIDTH: 420px; POSITION: absolute; HEIGHT: 490px
}
#Scroller-1 P {
 PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; MARGIN: 0px; COLOR: #6f6048; TEXT-INDENT: 20px; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.Scroller-Container {
 LEFT: 0px; POSITION: absolute; TOP: 0px
}
#Scrollbar-Container {
 LEFT: 60px; POSITION: absolute; TOP: 40px
}
.Scrollbar-Up {
 CURSOR: pointer; POSITION: absolute
}
.Scrollbar-Track {
 BACKGROUND: url(scrollbar_track.gif) repeat-y center center; LEFT: 4px; WIDTH: 20px; 
 POSITION: absolute; TOP: 36px; HEIGHT: 490px
}
.Scrollbar-Handle {
 WIDTH: 20px; POSITION: absolute; HEIGHT: 22px
}
.Scrollbar-Down {
 CURSOR: pointer; POSITION: absolute; TOP: 517px
}
</style>

    <script src="jsScrollbar_files/jsScroller.js" type="text/javascript"></script>
<script src="jsScrollbar_files/jsScrollbar.js" type="text/javascript"></script>

    <script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("Scroller-1"), 600, 200);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
</script>

</head>
<body>
    <div id="Scrollbar-Container">
        <img class="Scrollbar-Up" src="jsScrollbar_files/up_arrow.gif">
        <img class="Scrollbar-Down" src="jsScrollbar_files/down_arrow.gif">
        <div class="Scrollbar-Track">
<img class="Scrollbar-Handle" src="jsScrollbar_files/scrollbar_handle.gif">
        </div>
    </div>
    <div class="Container">
        <div id="Scroller-1">
            <div class="Scroller-Container">
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
<p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
<p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
<p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
            </div>
        </div>
</div>
</body>
</html>


JavaScript Laibrary File
JsScroller.js
JsScrollbar.js

Image File 
 
 

Create a unique Gallery by using z-index and jQuery, Image Rotator in Jquery, Jquery Tutorial for Image Rotaor amd gallery

Here I am posting a unique image rotator gallery created in Jquery having effect of Sliding the image to background with shuffling effect.

Please read the tutorial carefully to use Image Rotator and gallery.

HTML Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <title>Demo for - 'Create a unique Gallery by using z-index and jQuery'</title>
    
    <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
  </head>
  
  <body>
   
        <!-- relevant for the tutorial - start -->
        <div class="grid_6 prefix_1 suffix_1" id="gallery">
          <div id="pictures">
            <img src="images/picture1.png" alt="" />
            <img src="images/picture2.png" alt="" />
<img src="images/picture3.png" alt="" />
            <img src="images/picture4.png" alt="" />
            <img src="images/picture5.png" alt="" />
          </div>
          
          <div class="grid_3 alpha" id="prev">
            <a href="#previous">&laquo; Previous Picture</a>
          </div>
          <div class="grid_3 omega" id="next">
<a href="#next">Next Picture &raquo;</a>
          </div>
        </div>
        <!-- relevant for the tutorial - end -->
        
 
    </div>
  </body>
</html>


CSS Source Code
 
 /* Main Style Sheet start here */
html { font-size: 16px; min-height: 100%; margin-bottom: 1px; }
body { font-size: 62.5%; font-family: Verdana, Arial, sans-serif; color: #555555; background: #22384d url(../images/bg.jpg) repeat-x; }
a { color: #0F67A1; text-decoration: none; }
a:hover { text-decoration: underline; }

#wrapper { background: white url(../images/sidebar_bg.jpg) repeat-y top right; }

#content { }
  #content h1 { font-size: 2.4em; font-weight: normal; line-height: 32px; margin: 30px 0 50px 0; }
  #content p { font-size: 1.4em; line-height: 22px; margin-bottom: 20px; }
  
  /* relevant for the tutorial - start */
  #gallery { position: relative; }
    #pictures { position: relative; height: 408px; }
    #pictures img { position: absolute; top: 0; left: 0; }
    
    #prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }
  /* relevant for the tutorial - end */
  
#footer { text-align: center; margin: 50px 0 20px 0; }

#sidebar { }
  #sidebar ul { margin-top: 20px; }
  #sidebar ul li { font-size: 1.2em; padding: 20px 0 20px 0; border-bottom: 1px solid #dddcdc; line-height: 18px; }
  #sidebar ul li h2 { font-size: 1.2em; margin-bottom: 8px; }
 
 /* Main Style Sheet Ends here */
 /* 960 Style Sheet start here */
 .container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
 /* 960 Style Sheet Ends here */
 
 /* Reset Style Sheet Starts here */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* remember to define focus styles! */
:focus {
 outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}
 /* Reset Style Sheet Ends here */ 

Script Source Code
$(document).ready(function() { //perform actions when DOM is ready
    var z = 0; //for setting the initial z-index's
    var inAnimation = false; //flag for testing if we are in a animation

    $('#pictures img').each(function() { //set the initial z-index's
        z++; //at the end we have the highest z-index value stored in the z variable
        $(this).css('z-index', z); //apply increased z-index to <img>
    });

    function swapFirstLast(isFirst) {
        if (inAnimation) return false; //if already swapping pictures just return
        else inAnimation = true; //set the flag that we process a image

        var processZindex, direction, newZindex, inDeCrease; //change for previous or next image

        if (isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
        else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action

        $('#pictures img').each(function() { //process each image
            if ($(this).css('z-index') == processZindex) { //if its the image we need to process
                $(this).animate({ 'top': direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
                    $(this).css('z-index', newZindex) //set new z-index
            .animate({ 'top': '0' }, 'slow', function() { //animate the image back to its original position
                inAnimation = false; //reset the flag
            });
                });
            } else { //not the image we need to process, only in/de-crease z-index
                $(this).animate({ 'top': '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
                    $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
                });
            }
        });

        return false; //don't follow the clicked link
    }
    function runauto() {
        swapFirstLast(true)
       // alert('hu');
        setTimeout(runauto, 3000);
    }
    runauto();
    $('#next a').click(function() {
        return swapFirstLast(true); //swap first image to last position
    });

    $('#prev a').click(function() {
        return swapFirstLast(false); //swap last image to first position
    });
});
 
JavaScript Library File



Share this link with your facebook profile if you like this.