Ive found it frustrating trying to install Fancybox 2 or 3 with no information so if you want to install it this how to do it.
I’ve got this to work but I seriously think it could be cleaned up but I don’t know how to do it. ‘If it aint broke don’t fix it!!!’

WARNING! Im not a coder so unless you get all this right im not going to be able to help much.

For Fancybox 2 (Now not available to download but……….) follow these steps on this link. Thanks for the help in getting me started ‘Jamie’. I also never got the ‘helpers’ to work; something to do with the file and folder structure….
For the old RSD you will need to do this too - as there is no ‘attribute’ settings for images
In newer version and RFF you need to use ALL picture links from design as you need links to the gallery folders and images and also to add attributes to the pictures in the folders

http://www.coffeecup.com/forums/respons … to-viewer/

For Fancy box 3 follow the same Steps 1 & 2.
When you come to adding the folders in resources. you don’t need to add the ‘Fancybox’ and helpers folders

So you should have
Project folders
Social icons
Images
Your gallery folders
……….. more folders etc
Scripts (add the ‘jquery.fancybox.js’ file here
CSS

Step 1.
In RSD design your gallery page (or whatever it is you are creating) page and style the picture links to work the way that you want them to. Make sure that each image not only has the class (or ID) that you are using to style it but also add a class 'fancybox' for each and every image - see here http://prntscr.com/98opri

Also ensure that the Href for each image is set to target the same path as the one you have selected for the picture link image itself: http://prntscr.com/98or06

Step 2.

At this point, go to the 'Settings' section (found here: http://prntscr.com/98ojck ) of RSD and in the 'Head' area add this:
change or replace the name of the j query files to 3.2.1 not 2.1.5 bellow before you paste it in the header and footer –

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.5" media="screen" />


and in the 'Footer' section add this:

<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.fancybox.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/

$('.fancybox').fancybox();

$(".fancybox").fancybox({
openEffect : 'fade',
closeEffect : 'fade',

helpers : {
title : {
type : 'inside'
}
}
});

// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,

openEffect : 'none',

helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});

});
</script>


Step 3
Repeating some of the above….
Get your picture link you want to use on the page.
Have a look at the uploaded RFF file.
(I don’t have RSD 2 so cant help there. Try a trial version or something just to have a look or maybe some nice person can create an RSD file!!!)
The href needs to link to the first image in the gallery you want to use.
You also need to add an attribute;
name: ‘data-fancybox’
value: ‘gallery’ (omit the ‘ marks)
or if you want to use more than one gallery on a page change the value to ‘group1’ second gallery ‘group2’ etc.
for the single gallery make all values ‘gallery’
for two or more, make all images including the picture link on the page ‘group1’ etc
For multiple galleries you need to put the pictures on the page and then put display none to the column so it hides the column on publishing.

Hopefully that’s covered it.

RFF file attached below

Missed some bits
In the Fancybox 3 download the files are in the 'dist' folder

So you should have:

Project folders
Social icons
Images
..............Your gallery folders
……….. more folders etc
Scripts ............(add the ‘jquery.fancybox.js & ‘jquery.fancybox.min.js) file here
CSS’ ...............(add the ‘jquery.fancybox.css & ‘jquery.fancybox.min.css) file here

Thanks for posting. I'll have a look at it later today.

Hi Inger (or other post viewer! )
Also forgot to mention that I've made changes to the 'jquery.fancybox.css' file on the RFF file.
Just sub it for the original Fancybox downloaded file ......or if you like it just use it instead
T.