jQuery Samples

As part of my learning jQuery project, I've put together some pages which illustrate the things which are possible using jQuery. Many of these scripts were written by other people and I have acknowledged this where necessary and placed a link back to the source article on the page containing the demonstration. In some cases I have tweaked the script(s) (usually by modifying the style sheet).

Getting started

In my opinion there is no easy way into jQuery. You have to know some CSS, you have to know some Javascript and you have to know some HTML. Of course, it is entirely possible to copy and paste scripts from any of the thousands of sites which supply jQuery plugins, and in most cases this works fine. But if you have a problem, you have to be able "go under the hood" and tweak. The script which I am using to generate this tabbed dialog is a case in point. It does not work as downloaded.

For me, as a beginner, the biggest problem was getting to grips with the compact Javascript syntax which is possible with this library. I'd gaze at the script for ages and think "How does this actually work - what are all those braces and brackets for ....etc".

The best primer I found is here. Obviously I have not looked at them all - there are thousands of "tutorials" out there ! Most of the ones I looked at, I found confusing. This is the first one I found which made the "Ah-ha" light go on over my head.

A simple photo album built with jQuery



Slideshow Image 1

Chrysorrogiatissa Monastery in the Troodos Mountains, Cyprus

Slideshow Image 2

A fine array of Harrington coaches at Amberley Chalk Pits Museum

Slideshow Image 3

Brunel's Royal Albert Bridge over the River Tamar, Saltash, Cornwall

Slideshow Image 4

The Boat House, somewhere in Cornwall

Slideshow Image 1

Beach at Porthcurno, Cornwall, England

Slideshow Image 1

Entrance to the parish church in Mells, Somerset, England

Slideshow Image 1

Bridge over the St Laurence River, Sarnia, Canada

Slideshow Image 1

Harley Davidson motor cycle

Slideshow Image 1

A flower from our garden given the waterspray treatment !

Slideshow Image 1

A beach house at Paphos, Cyprus



There are literally thousands of album scripts for jQuery out there on the internet. Which ones are rubbish and which ones work ? Well, the honest answer is, I don't know. This is one is from the same guy who did the image flipping effect you can see on the home page. It works a treat, and is easy to install. I recommend it.

But here's one which is not so easy to use. The main problem with this one, for me, is that you have to name your images in ascending numeric order thus:

 
    1.img
    2.img
    3.img
            ....etc

And this is a nightmare when you are trying to organise your slide show into a particular order. You have to have a cross reference sheet showing the actual name of the image and the numeric name. If you want to change the order in which they are displayed, you have to re-name them, because the code (sorts) orders the image list by name. And it's an ASCII sort, not a numeric sort ( 1.img and 11.img are next to each other). Why do folks do this ?

So all you can do really is spend some time rooting around the internet to find the script you want, then test it before you decide to use it for real on your web site.

Good Luck !

Terms of Use | Trademarks| Privacy Statement
Copyright © 2011 - 2022 Cobblers. All Rights Reserved.

Site designed and built by Aspado .