Hi
Has anyone tried Or installed Fancybox 2 photo viewer? This a quality photo enlarger/viewer and worth exploring and based on jqueery. If anyone has used it could they possibly explain installing it on RSD.
Thanks

I use colorbox. Close to the same thing. Have you tried looking at the example and adding the code to your page?

Hi Eric
Ive been looking for the example (which i have seen before) now i cant find it. could you post a link please. Thanks T.

I just used it on my work site.
http://esmansgreenhouse.com.
scroll down to the 4 INCH WAVE then click on one of the subheaders.
When it opens click on one of the types in the list.

I use fancybox all the time...easy to implement and fully responsive. A current project that I am working on that uses it in the gallery: http://clients.motley.site/bpe/gallery.php

Hi Jamie
I would be very great full if you could explain how to install it on RSD please? I've given it a go but it hasn't worked yet.
Thanks Tim

Hey Tim

Am not ignoring you... just trying to think of the easiest way to help you out. Will revert soon!

Jamie

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>

10. Then go to the Footer and add this script.

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://www.ajhdesigns.com.au/test/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- 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" />
<script type="text/javascript" src="http://www.ajhdesigns.com.au/test/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

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

LOL you beat me to it! Was just about to post the below:

Hey Tim

In terms of adding it directly in to RSD, I dont think that there is a way to do that directly per se as you will need to make a slight modification to make it from a single pop up image to a series of images in a gallery. I have put together a really simple project file which you can access here to help you work your way through this.


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:



and in the 'Footer' section add this:



Step 3.

Now export the project and open the page in a browser and, and so long as you have maintained the folder structure and paths that I have created in the .rsd file, you will be able to click on each image and it will open up in a larger version.

At this point, note that you can only open up each image individually and you cannto, yet, scroll through as you would in a gallery.

To 'enable' this, all you need to do is open the page in a wysiwig or notepad and add the following



within the <a href> of each and every image in your gallery - eg



Step 5.

Test again after making all the changes in step4 and you should be able to scroll through all the images that have been added to the gallery.

Hi Jamie
Awesome stuff. That's another insight into the workings. I managed to get mine to work in RSD so it would work using the browser preview. That was for a single image though. I like Fancybox. It has clean graphics with no silly bits to try and make it look overly and unnecessarily impressive. Less is more...
Thanks Tim