jQuery: Nice looking slide show in no time !!

Sometimes we need to add sideshows to our website. Today we are going to see how to achieve it very quickly with a little bit of coding. We will use the jQuery to reduce the amount of coding we have to do. Now let us see how can we do it -

What we will need -

1. jQuery script [jquery-1.3.2.min.js]
2. Images which will appear in the slide show
3. Some JS and HTML coding

 First we will need to add the jQuery library file.

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

 Next we need to setup our own jQuery code to define the slide show materials and properties.

 <script type="text/javascript">
    var srrc = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];

srrc is the array variable which holds the image paths of the slide show images. You can add as many path as you want. 

    var id =0;
    var max = 5;

id is the variable whose value tells the browser to load which images from the srrc array. It is acting as a index variable for the srrc array. max variable defines the maximum number of images defined in the image array.

function run() {
        id = id + 1;
        id = id % max;
        var cur = srrc[id];

 Nothing much to describe here. cur variable holds the path for current image which we are going to display.

        $("#images").hide();
        $("#images").attr({src: cur, alt:'', border:0});
        $("#images").fadeIn("slow");

$("#images") will return the handle of the html element with the id of images. Don't worry about the element for now, it is a <img> element, we will be introduced with it in the latter section.
First we used the jQuery hide() function to hide the element.
Then we use the jQuery attr() function to add the html attribute to the <img> element. The important part is the src: cur. cur variable is holding the image path for current image. So, we just add the image path to the img tag. It can be translated as <img src="the image path in the cur variable">.
Now the img element has the image but it is hidden. Now we show the whole element using the jQuery fadeIn() effect. This adds nice looking transition effect while changing the images.

        setTimeout(run,10000);
    }

 Now to run this script indefinitely we use setTimeout() javascript function. We want to keep each images for 10 secs. So the second parameter is 10000 (it is in mili secs). The first parameter is a callback function.
Whenever 10 secs has passed since the timeOut() function is called, the callback function is called automatically.

    $(document).ready(setTimeout(run,3000));
</script>

 Lastly we use the $(document).ready() function to initiate the first call to the run function.

Now all we need is to add the <img> element into body section of the html page

<img src="1.jpg" width="395px" height="245px" alt="" id="images" border="0" />

 We are all done.
Here is the total work.
If you have any suggestion or question please leave a comment.

GIMP: Create Nice Looking Button For Your Website

It is very easy to create nice looking button in modern graphics editor like PS CS3. I will show the basic behind creating in creating such nice and cool looking button. I am using GIMP (GNU Image Manipulation Program) for creating such an image. The method is almost similar in PS CS3 or earlier.

Here is the button which we are gonna create using the graphics editor -

1) First we need to create an empty space for creating the button. I am using 300x150 pixel dimension stage. The stage is set to full transparent. This is how it looks like -

2) Create a new layer to create the background effect of the button. Use (CTRL+L) to bring out the layer dialog if it is not showing.

3) Now select the "Rectangle Select Tool" from the toolbox and draw a rectangle. See the option for the "Rectangle Select Tool" and find and activate the "Rounded Corner" property. This will make the selection look like a rounded box.

4) Now Select the "Bucket Fill Tool" from the toolbox. Select your desired background color and click the selection to fill the selection with that color. This is our background of the button.

5) Now we have to create the top layer of the button. Again we create a layer and then draw a similar rectangle tool, but this time it is a little smaller than the background.

6) After creating a slight smaller selection similar to the background on top of the background, we have to fill the selection again to get the shape of the selection. But this time we will not use the "Fill Bucket Tool"; instead we will use the "Gradient Fill Tool". It is know as "Blend Tool" in GIMP. We have to select two color for gradient fill. Then using the tool mentioned above we will fill the selection. The output will look similar to this -

7) So far we have completed the shape of the button. It is now time for to put some text. Select the "Text Tool" (T) and click on the button to enter text. The text itself will appear as a different layer. So you do not have to create a new layer for the text.

8) Adjust the text as per your need by using the "Move tool" (M). Now we are gonna add the shadow of the text. For this we need to duplicate the text. Select the text and open the Layer dialog box (CTRL+L) right click the text layer and click the duplicate layer option.

9) Double click the layer name to rename it. Rename the new duplicate layer into an understandable name. Now select the new renamed layer, and move it down. Put it just under the text layer. This newly created layer will be acting as shadow for the old text layer. So, the layer should be immediate below of the text layer.

10) Now select the text layer and click the "eye" on the left of the layer. This will hide the layer. Now you can edit the shadow layer. We need the shadow layer text to be a different color. In precise we need to define the shadow color. So, select the "Text Tool" and click on the text of the shadow layer. Make sure the shadow layer is selected. Change the color of the text to your desired shadow color.

11) Now we have to place the shadow in proper position. The layer should be moved slightly to the desired shadow direction. We have to move the shadow layer just a little to the left and down direction to create an optical illusion of drop shadow of the original text. Select the shadow layer and select the "Move Tool" (M) from the tool box. Now select the stage and press left and down twice. This will move the shadow layer just a bit in the left and down direction.

12) Now set the text layer to visible. This is done by clicking the "eye" of the text layer in the layer dialog.

13) As you can see a nice and cool looking button is created with shadow effect :) . We are just a little tweak away from using the button. Select the background layer bn_bg. Go to stage and then go to Image->Autocrop Image from the menu. This will make the button compact. Now we can export the button into different format and use it on our website :) .

Here is the total work.
If you have any suggestion or question, leave a comment.