JavaScript Image Gallery

 First off, what I will show is in an Image Gallery with a click event on each image to display the image in a popup.

Here is a live preview.

Here is a screenshot of the Gallery:

And when an image is clicked, the image is enlarged like so:

 

First we will start by creating out html page, which as you will see will have all CSS and JavaScript files attached, including the list of images which will be used. 

Before adding your images, insure that you have two sets of images, one set will be used as icons which are seen in the gallery, and another set to display the bigger view of the image.

I set the height of the images in the first set to 80px. Keep the proportions of the image, where the width should be set automatically.

For the second set, resize all images that the width and height is smaller that 500px, depending on what you want as an outcome.

As you can see above all images are added to an unordered list. Each images name and ID must have a number which continues in the sequence as seen above for this method to work. For the sorting of the images, the images are divided into different classes, but we'll get to that at a later stage. Next, I added the onClick events to each of the images, which will send that image through to the method 'showImage()'. I will come to what this method does at a later stage.

Also seen above, external files linked to my page is style.css (which has all my styles), jquery.min.js (allows for the use of jQuery methods) and script.js (contains all my script).

Now that we have our page, it's time to start withthe styling. Style your page as needed, just remember to add the following to create the gallery look:

If you want to add some space between your images, you can add th efollowing:

Now we want to create the method which is called when an image is clicked. As explained above, this method is showImage().

We will now be working in the script.js file. First creating the method 'showImage' with a parameter 'currentImage'.

What I want this method to do is to create a popup instead of just showing/hiding a previously created popup. Thus the code will be appended to the body like so:

The div with id - 'popupBackground' is as the name implies. It is the whitish background behind the popup. The style for this div is the following:

The inside this div, we have a div with id - 'popupwrapper', which is the window you will see, which contains the image and information. Styles are as follows:

and lastly you will see another div with an image inside it. This is the close button seen at the top-right corner on the popup.

The second line which reads as follows: $('#popupBackground').fadeIn('slow');, will slowly display the popup, which was just created. 

The next step is to display the image you clicked. This is where the numbering in the image names and ID's are importand. What we do is to get the id of the clicked image, and retrieve the imageName plus the expention from that element.I used this method, because my two different sets of images are in different locations, but the names of the identical images are the same.

Here is the code:

The variable loc as seen above is set to the source folder of the image.

The amount variable will be used at a later stage as this is used for the description of the images.

Next we get to the result variable. This is set to the name and extension of the clicked image to get the name of the image which should be displayed.

Next I added the image to the div with id - 'popupWrapper'. As seen above the source is coded as the following:

             src="assets/images/galleryLarge' + result + '"

What this does is to add for example: /car1.jpg to the url to create

             src="assets/images/galleryLarge/car1.jpg"

Next a div was also added to popupWrapper, which will have the information regarding the image.

Now if your image sizes are correct sizes, the following should work, but if you find that some popups do not display the correct size, you can increase the 100 value found at the end of the setTimeout method.

The setTimeout method is used because you need to get the size of the image after it has been loaded.

As seen above, I set currentImageHeight equal to the height of the image and currentImageWidth equal to the width of the image. This is done, because the image sizes vary. Next you set the size of the popupWrapper equal to thiese sizes.

Now the method mouseEvent is fired, which will be explained in the next part.

Now I created the boolean variable clicked, which checks whether the description view is open or not. As for the click method, animated the description div to open and close as it's clicked.

Now we get to the mouseEvent method.

 

These events are only used for the close button on the popup. Thats it for the popup.

Next Sorting the images into different categories using the buttons created in the html:

Now we need to add events to these buttons. There are various ways to do this as shown in this tutorial, but I will be adding them using the jQuery click method.

First I created a jQuery ready method to load the code as the page is done loading:

In this method I will create all the click methods for these buttons:

What the slideUp method does, it shrinks and moves the image until it can't be seen, where the slideDown method restores the image to its original state.

Lastly, styles need to be added to elements, which will not be shown in this example.