Tag Archives: images

jQuery Tutorial – Create a jQuery Menu Slider

jQuery Menu Slider

In the following tutorial we are going to go through how to create a jQuery menu slider similar to the one used in our own website’s mega menu navigation (see “Wordpress Plugins” menu item).

View Demo Download Source Code


The HTML is very simple and basically includes:

  • A wrapper (”#menu-slider”) – only used for styling the jquery menu
  • more

Slick jQuery Image Captions

In today’s tutorial we are going to show how you can add slick image captions to an image gallery using just a few lines of jQuery and CSS.

1. Gallery HTML

Our image gallery is going to just be a simple unordered list containing our image thumbnails. For the captions we will use span tags, which will contain a header … more

jQuery Image Swap Gallery with Just 3 Lines of Code!

Our earlier post, Quick and Easy jQuery Image Swap has always been popular, so today we are going to use this code to create the ultimate jQuery image swap gallery with just 3 lines of code and 2 lines of CSS.

And here is the jQuery code:

$("#gallery li img").hover(function(){
	$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));

View The DemoDownload Source Files

A great … more

Create An Image Preloader For Image Swap Using jQuery

The following tutorial takes one of our earlier code snippets and improves it by adding a function to preload images.

The Quick and Easy jQuery Image Swap function offers a very simple way of implementing image change on hover for buttons, links, etc (see earlier post for more info). One problem however is that the first time the active image … more

jQuery Image Swap Using Click

In a previous post we showed a simple piece of jQuery code, which allows you to add the ability to swap images on hover to your website. Since then we have had several requests asking how to add a similar effect using “click” instead.

The Image

Use the same naming system for the 2 images as in our previous post … more

Quick and Easy jQuery Image Swap

Here is a very quick and easy way to implement image swap on hover on your website using jQuery.

With the jQuery javascript library already added to your website add the following javascript code between the head tags in your web page:

          function(){this.src = this.src.replace("_off","_on");},
          function(){this.src = this.src.replace("_on","_off");

Then simply create your 2 images – normal … more