The Gallery page

13 Jun

The Contact page and sitemap were two pages that I whizzed through on my Project Two website. The Gallery page was another matter entirely. Well, it wasn’t the Gallery page itself but the extras that were added to it. The Gallery page consisted of six thumbnail photographs each of which opened up in a new window when clicked and a video to the right of the thumbnails. I registered with Vimeo which is a video sharing site. I then uploaded a video of mine to Vimeo, once this was processed (it took a long time) I was able to copy the code giving the address of the video file online plus other information such as the size of the video and other info governing its behaviour. The video and thumbnails were from the recent wedding of my wife’s sister. That was the Gallery page finished for the moment. I was happy enough with it.

Gallery page screen print

The Gallery page

Next I had to augment the Home page of my Project Two site. I was going to add a slideshow to it. This involved adding pictures inside a container called “slideshow” and then adding jQuery, which is a form of Javascript, to the code. Thankfully I got this working first time round. It wasn’t difficult as it was mainly a case of copying a few lines of code and so long as everything was in the right place it would work.

As preparation for what I wanted to achieve with the Gallery page, I did an assignment whose aim was to create a “Lightbox”. What this basically means is that when you click on a thumbnail a white box appears containing the full size image with the option to click an arrow to go onto the next image or the previous image. It is basically another sort of slideshow. The instructions to create this Lightbox were in my web design book but unfortunately there were several omissions which meant that every so often I would have to ask for my tutor’s assistance. Once it was seemingly finished it still didn’t work. With assistance from my tutor Martine and web design student Ross I eventually managed to get the assignment to work. The problems I had were mainly to do with the fact jQuery is case sensitive while HTML isn’t. The folder containing my images was in uppercase but in the code it was in lowercase and I didn’t realise this for the longest time.

It was now time to add the jQuery code for the Lightbox to my Gallery page. Even though I got it working for the assignment I couldn’t get it to work for the Gallery. Once more it turned out to be problems with case sensitivity! I was slow to learn my lesson! Another problem I had was that the text describing the photo in the Lightbox wasn’t visible. It turned out that the text takes the colour given to it in the body property of the CSS. The colour there was white and the background of the lightbox was white which meant of course you couldn’t see the text. Finally the Lightbox worked and the text was visible. It was worth the frustration though once it was finished and it is a great addition to my Gallery page.


The Lightbox slideshow in action

%d bloggers like this: