You can view a demo and download the resources for this tutorial at the bottom of the post.
Web 2.0 websites have a lot of Ajax functionality, some times when you load a new element of a page you may want the user to be able to click the back or forward button so that they can see the previously loaded content. One method to add this function to a website is to use the jQuery Address plugin with jQuery.
jQuery Address has 4 main methods; init, change, internalChange, externalChange. The init method is what is called when the plugin is initiated. The change method is called when the URL is changed, an element in the page is changed or either the forward or backward button is pressed. The change method has the combined functionality of internalChange and externalChange. The internalChange is only called when a hyperlink inside the page is clicked; externalChange is only called when the URL is changed or the backward or forward button is pressed.
To allow deep linking within your website the only two methods that are required is init and change, you can then use internalChange and externalChange wherever you may need them.
(more...)
FancyBox is a plugin for jQuery that allows you to easily display images in the same window with a simple yet effective code. The plugin takes no time to set up and all that is required is that you include the jQuery javascript library within the pages that you are using the FancyBox plugin on.
Features:
- Display single images
- Create image galleries
- Display iFrame
- Execute Ajax
- Include Flash, movies or audio files
Using FancyBox
First of all we need to link to the jQuery and FancyBox file after we have downloaded.
<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>
Create a form that requires the user to enter both a username and password. If the username field or password field is left blank then a message will be displayed.
Learn how to use the animate function within the jQuery library to create an effect similar to the table of contents for the table of contents on codeigniter.com.
