Hopefully this explains how to get started with Fancybox js plugin.
I can never find clear instructions to install things so i thought i would make the world a better place and do something about it!!
I also tried this on a blank document which i would also suggest to someone who hasnt used it before. You can then save it as a record to refer back to. Ive also attached my own RSD file for referance
1. Go to http://www.fancyapps.com/fancybox/
and download the zipfile
2. Extract it somewhere for further use...
3. I had the folder name 'fancyapps-fancyBox-18d1712' that contained the demo, source and lib folders and other files etc..
4. Change that folder name to 'fancybox' without the ''. The src in the script needs this name to find the folder.(i think! im no expert!)
5. Go to you Resources on RSD and highlight the 'project folder'
6. Go to 'add folder' and find the fancybox folder you have extracted and renamed.
7. Once added this folder should be at the same level as the Social icons folder. if it isnt remove it and try again.
8. Go to the page you want to use the fancy box on and go to Settings and find the 'Head' section
9. Paste this in to the head
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
10. Then go to the Footer and add this script.
<!-- Add jQuery library -->
<!-- Add mousewheel plugin (this is optional) -->
<!-- Add fancyBox -->
<link rel="stylesheet" href="http://www.ajhdesigns.com.au/test/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
11. Go to the webpage and column your creating in RSD and add an HTML element
12. Click on the HTML element to bring it up in Design
13. Paste this code into the small box that says HTML
<a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>
14. As you can see there is a reference in the code to 'large' image and 'small' image. These need to be replaced with the file names of your small and large images (to be added in a minute).
15. The titles can be changed in the script in the HTML box on the right. its the yellow text. the inverted comers need to be kept and the file extension needs to kept as well. so your file name might be something like "Smallfishpic.jpg" or "Largefishpic.jpg"
16. Add your small and large images to the project folder level of Resources. So highlight project folder and then go to add files.
17. your small 'link' image should then be visible on the editing page.
18. Go to the browser previewer and it should work!
Hope this is useful. This all worked when i tried it. If it doesnt work for you ill keep an eye on this post and amend the instructions accordingly
When did Noah build the ark?
‘Before the rain Gladys, before the rain!’