Content:
Videos
Images
Text
Animation
Audio
Box Model
The width and height you specify is for the content.
Adding Padding
We added a 10 px padding round the edge which is 20px
We had to subtract this from the height and width of the content
As you can see above their are now gaps around the text boxes.
By the end of the session we should be able to use other peoples Java Script
Light Box
Once it was download we opened the folder and copied over the js & the css folder from light box to our root folder
Also all the images except the examples folder.
Adding a Photo Gallery
We need to work out the measurements to make sure the images fit in the column
We created a thumbnail version and a large version and saved them in the root folder
Anything that is to do with functionality goes in the head section in source code.
To add light box to our site we opened up the template and pasted the code in before the head finishes, This will make it work on all pages.
We then posted the code: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> in the third column and renamed the image in the code with our picture name. This meant when you click on the link a new window pops
In the design view we edited the text in column 3 and using insert I placed the thumbnail.
Then in the code I deleted the text and made sure the link was before the
By copying the code over you can have a set of images to link them together you
need to tag them in brackets [ ]"
I edited the code to have 3 separate thumbnails.
Check out : http://www.woothemes.com/flexslider/
Same type of thing, this supports videos as well!
Use Vimeo for Video
Soundcloud for Audio
No comments:
Post a Comment