Browser Test Report: Javascript Only




Tested in Opera 16.0.1196.73 using Windows 7 64-bit





Tested in Google Chrome Version 36.0.1985.143 using Windows 7 64-bit


Again all the same differences, like on the JQuery gallery . Opera displays the captions slightly smaller than Chrome, it looks like the pixels render slightly smaller. Disabled javascript galleries have slightly smaller captions even though it has the same css. Images in Opera seem to display sharper than Chrome.  Aside from that both galleries display the same.


Browser Test Report: JQuery



Tested in Opera 16.0.1196.73 using Windows 7 64-bit





Tested in Google Chrome Version 36.0.1985.143 using Windows 7 64-bit


Opera displays the captions slightly smaller than Chrome, it looks like the pixels render slightly smaller. Images in Opera seem to display sharper than Chrome.  Aside from that both galleries display the same.

Work In (Lack Of) Progress: Week Four

Unfortunately no progress has been made this week on this assignment because I have been focused on writing an essay which has been slowly draining the life out of me.

Will Nicole find her assignment motivation again? Will she complete and hand in her essay and do some work on this assignment? Only time will tell.



Research (5): JavaScript

For my gallery I want the play button to be inside a circle, which, while the images are playing automatically will countdown the amount of time each image is displayed for. I saw this on another image gallery I previously posted about and thought it was quite neat.

The first way I considered doing this was by creating an animation and then converting it to a .gif to play and pause using JavaScript hover / click states. This way doesn’t give me much control over the circle image once the animation is created though, so I researched a way to create this using JavaScript. So I have decided instead to code a circle that “draws itself” using the canvas js feature. This will give more manipulation control.

Work In Progress: Week Three

I have completed the first mock up that I’m somewhat happy with. It’s simple, functional, and has all the requirements.

After trying to integrate arrows I have decided they are gross and I can’t seem to get them into my layout nicely so I don’t want them and have decided instead that the user can navigate the gallery by clicking the images below.
I have also placed the title and caption on top of the images with a small opacity on the background which I think looks nice. I am considering making the caption and background disappear so that the user can see the full image, but I don’t want it to be too confusing.

I haven’t inserted all my images because I made a rookie mistake and saved them on the wrong computer, but will be putting them when I have the edited images.

Screen Shot 2014-08-12 at 4.14.11 pm

Screen Shot 2014-08-12 at 4.15.04 pm

I want the images to be semi-transparent when they are not selected, but then fully transparent when they are hovered over. The image displaying up the top is going to be full opacity. This makes the image that is selected recognisable within the gallery, but also adds a somewhat ‘snowy’ effect I think by making them hazy by lowering the opacity. I’m not sure about what opacity percent I want to use yet. The images below that are ‘unselected’ are at 65% opacity, but could still be unrecognisable.

Screen Shot 2014-08-12 at 4.47.15 pm


I am still going to be looking at editing this slightly as I would like to have arrows, so I want to try and find a way to integrate them nicely. I want to get this finalised and onto html and css though so I can add javascript sooner rather than later.

Research (4): Colour

I have considered making my gallery aspects in colour (UI, text colour, text background colour), such as the colour themes below which might fit my theme.

blue bluegold

However I think it will place more emphasis on the gallery making them black and white.

Initially for my buttons and text background I have thought about having black UI buttons with a black background, and having white text. However, because black is more evident in images I have decided to make them white, and also a white background looks cleaner and snow is white so it fits the theme in my opinion. It might look a little plain but I want it to look clean as the focus is on the pictures over anything else.



Work In Progress: Week Two

This week I have chosen and edited my images. I applied roughly the same edits to them, to add a bit of grain and sharpness, and cool down the image.

For example, the image below on the left is one from Flickr that has a creative commons license, and on the right is my edit.


– –

I have also decided to use the font PT Sans Caption Bold for the gallery title in forced capitals, because it follows the strong bold theme that other snow themed sites use.


At this stage I am also thinking I will use the regular version of the same font for the other text (captions).


I think it would look unified if this was also uppercase, however it may look too overpowering when it is put together.

– –

I have also done a few pencil sketch mock ups however am not sure about any of the mock ups, and did these before my latest research post so am going to try and develop them a bit more. I tried pushing elements around in photoshop for a more visual mock up, but I’m not satisfied with this either after doing my latest research post.



20140803_121817 20140803_121900 20140803_121741