Creating a jQuery Web Part to View Images from a Picture Library

In this series of examples, you will learn some of the ways you can access images stored in a picture library. You will be learning useful concepts as the examples progress, building upon what you have learned already.

In the first example, you will access the images by manually telling jQuery the location of the files to use, making this a static example. This example will be displaying images of five fruits that have been put into a document library called Fruits, as shown in Figure 5-2 Each of the fruits has a small version (e.g., apple_small.png) and a large version (e.g., apple_large.png).

Figure 5-2. Picture library showing fruit images

The images, although they have a transparent background, appear to have a black background when viewed in the picture library. Don’t worry about that, though, because they will display correctly when using them later.