First, we need to specify the full and small sizes of each image. Place the following code into our anonymous function inside the HTML file we just created:
var dims = {
image1: {
small: { width: 150, height: 100 },
big: { width: 600, height: 400 }
},
image2: {
small: { width: 100, height: 100 },
big: { width: 400, height: 400 }
}
},
webkit = ($("body").css("-webkit-appearance") !== "" && $("body").css("-webkit-appearance") !== undefined) ? true : false;We created an object which contains properties matching each image's filename. Each property contains another nested object, which has the small and big properties and the relevant integers as values. This is a convenient way to store structured information that can easily be accessed at different points in our script.
We also created a variable called webkit. There is a slight bug in how images floated to the right are treated...