Four Elements: Gallery

A very important aspect of this website is the gallery, because it can show off to the user of the website what they are instore for, but then again not giving away too much about the exhibition.

This gallery had to be responsive, and also use JavaScript to allow for the images to become large across and fill the screen to allow the user to get a better look at the images. I looked into a few different responsive galleries’ I could use and came across one which does exactly what I want it to do.

I downloaded the java-script and placed it into a folder called ‘JQuery-Gallery’, this java script file will allow for the animation on the gallery, and allow the images to enlarge across the screen.

I then created a link to the folder containing my ‘java-script’ file within my ‘index’ file, to allow for the java-script to work on my gallery.

gallery1Here is the code that I implemented into the ‘index’ file of my website, that allowed me to link my images into my gallery.


Here is screenshot taken from my website, showing the gallery and how it looks before selecting any of the images. The good thing about this gallery I have used in particular is that you don’t have to use two separate images, one for the thumb nails and the other for the larger images.


This gallery allows you to only use the large images, and then they are resized for the thumb nail images.

Here is a screenshot of the image enlarged, once selected via the thumbnail.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s