Saturday, 9 June 2012
Final website
After a few more tweaks and coding I have finished my website and am very please with how it looks. Here is what the finished site looks like.
Monday, 4 June 2012
Building the site
On my static work section of my website I was planning on having a carousel showing my images, I had a look on various sites and found this one which seemed to be the most popular and exactly what I was after. (http://fredhq.com/projects/roundabout/)
After having downloaded the files and following the tutorial several times I found that I couldn't seem to get it to work. I then went about trying to find more and I came across a few but each time I tried, I couldn't seem to get them to work.
I then decided to try and use an image slider/slideshow instead but as before even after following the tutorials I couldn't get it right. Reading the comments on the sites from other people I could see that it was a fault I was making, however, even carefully reading through the tutorials I seemed to be missing something.
After a few days of this I decided to find another way of showing my work which didn't take away from the theme of my site. I then thought about making thumbnail photos into stamps and having lightbox so that they could be seen at a good size as well.
To do this I first saved two versions of my image, one being the full image at 800px width and the other shrunk down to 125px width and with a stamp shaped border which I added in Photoshop. I then downloaded the code I needed for lightbox and saved it into my js and css folders as the tutorial asked me to. The next thing I needed to do was to link the jquery and css to the head of my html document as you can see below.
After having downloaded the files and following the tutorial several times I found that I couldn't seem to get it to work. I then went about trying to find more and I came across a few but each time I tried, I couldn't seem to get them to work.
I then decided to try and use an image slider/slideshow instead but as before even after following the tutorials I couldn't get it right. Reading the comments on the sites from other people I could see that it was a fault I was making, however, even carefully reading through the tutorials I seemed to be missing something.
After a few days of this I decided to find another way of showing my work which didn't take away from the theme of my site. I then thought about making thumbnail photos into stamps and having lightbox so that they could be seen at a good size as well.
To do this I first saved two versions of my image, one being the full image at 800px width and the other shrunk down to 125px width and with a stamp shaped border which I added in Photoshop. I then downloaded the code I needed for lightbox and saved it into my js and css folders as the tutorial asked me to. The next thing I needed to do was to link the jquery and css to the head of my html document as you can see below.
Once this was done I then needed to create a div which would hold the images, style it in css so that it was in the place I wanted it and then using this code I added in the two pictures making sure the one with lightbox was the larger image.
All I did then was repeat this with all of my images changing the css on each div to make them look different and this is the result.
Subscribe to:
Posts (Atom)