RapidWeaver Forums

Hi everyone,

I’d like to know if anyone’s been able to integrate FancyBox into RW, I like it better than SlimBox and it works for more than just images… check it out here: http://fancy.klade.lv/

Thanks in advance!

-noa- - 28 November 2008 02:53 PM

Hi everyone,

I’d like to know if anyone’s been able to integrate FancyBox into RW, I like it better than SlimBox and it works for more than just images… check it out here: http://fancy.klade.lv/

Thanks in advance!

I’m sure it’s possible. Have a look at this thread and follow the instructions from Phil (post 3). It seems to be the same for ‘everybox’ - as he points out.

Thanks, I didn’t realize it would be pretty much the same… if I wanted to integrate it into a whole theme, and not just a single page, I could just add it to the theme folder contents and modify the path when refering to the files, right? and I would add the code to the index.html? sorry, I don’t really know…

-noa- - 28 November 2008 03:19 PM

Thanks, I didn’t realize it would be pretty much the same… if I wanted to integrate it into a whole theme, and not just a single page, I could just add it to the theme folder contents and modify the path when refering to the files, right? and I would add the code to the index.html? sorry, I don’t really know…

From what Phil has said I think you are right but I have not added anything like this - Sorry. Suggest you have a go and then ask for help if you need it.

I haven’t been able to figure out how to enable FancyBox either. The download doesn’t match the information provided on the site.?.

Would be nice if you can get it work though.

Being a novice I am interested to see how someone with greater knowledge implements FancyBox with RW.  Your help and time would be greatly appreciated.

Thank you.

Paul Reynolds - 04 March 2009 11:56 PM

Being a novice I am interested to see how someone with greater knowledge implements FancyBox with RW.  Your help and time would be greatly appreciated.

Thank you.

found this thread in the forum that leads to this tutorial but, I can not read or for that matter speak French.  So I used Google translate but was still unable to make FancyBox work.  I’m going to need a little more hand holding.  Anyone up for the job that can type in English?

Thanks.

I would love to try and make it work, but I don’t think I’m capable enough to do it, or maybe it’s that I don’t have the time right now with all my colllege work. What I can try to do is translate the french tutorial, I understand french quite well…

This is only a translation of a French tutorial on how to use RW4 with FancyBox. The original tutorial can be found here. I apologize if there are translation mistakes, the only French I know is the one I’ve studied in school.

--------------------------------

To use Fancy Box with RW first download the source package of FB from the developer’s website.

To activate the different elements of FB place the following files under assets in the page where you want FB to work:

(Note: If you wanted to integrate FB into the whole theme and not just the page, I *think* you should place the files inside the theme’s contents and modify the path to the files accordingly. Also the html code should go inside the index.html of the theme, but I’m really not sure about this so you should check someone who knows more)

These are the files for the graphic interface of FB, the CSS and the Javascript libraries it uses.

--------------------------------

Once you’ve place the files in the page’s assets (or the theme’s contents) you must set the path to these files under the Page Inspector -> Header of the page.

(Again, if you want to implement it theme-wide, I believe this code should go in the index.html of the theme. Also rememeber to modify the path “assets/name_of_file_here” accordingly!)

--------------------------------

Now you must activate and cofigure FB to then be able to use it.

It is necessary a new script under the Page Inspector -> Header to define what class or id will have a FB effect and how it should behave. This will allow us to mix different behaviour of the FB using different attributes (see the FB demo page for more info on attributes).

Here is a basic script with the standard zoom effect applied to the content area of the page (no FB in sidebar, etc for now with this script):

--------------------------------

A example using RW4 and FB: (check the original page to see it in action. It also has screenshots of the RW dialogs)

In a certain page all the other instructions have been applied to activate FB; the following script creates an id and a class that will allow for single images and galleries. Substitute your_id and your_class with meaningful names, e.g. your_id = fancybox your_class=gallery

Here are two different uses (the images are placed under assets)

1. For a single image, open the link dialog in RW and set the link through assets to the image you want; then set the following custom attributes to the link
id “your id” (e.g. fancybox)
title “your title for the image” (e.g. Image Description)

2. For a gallery; again open the link dialog in RW and set the link through assets; in this case the custom attributes are:
tittle “your title for the image” (e.g. Image Description)
class “your_class” (e.g. gallery)
rel group1

That is it!

--------------------------------

I hope that helped something. I would really like to be able to perfectly integrate FancyBox in the themes I have, I like it better than any other LightBox clone. If someone is able to do it, I would appreciate a small tutorial or something explaining it a little!

Hi,

This tutorial’s a little out of date. I’ll post an updated one later today.

Marten

Sorry about that, I didn’t know!

No worries, that was a good translation! I’ll try and make it just a little easier.

Marten

noa your efforts are greatly appreciated and thank you for your contributions also Marten.

While we are on the topic, is this version of Fancy Zoom (http://orderedlist.com/demos/fancy-zoom) any better that FancyBox?  Sorry guys… I’m a complete noob but I want to integrate this web effect but still make my site viewable for most visitors.  I’m looking for the best solution.  I would just use MediaBox but, I like the look of FancyBox/Zoom so much better.  Again thanks for all the help and hopefully many others will benefit from this thread.

Here’s an updated version of the original FancyBox tutorial (which can be found here). Credit goes to Jean — the Original Poster — and forum member -noa- for his perfect translation above.

You can find the FancyBox website here.

You can download the latest FancyBox version here.

Open the FancyBox jquery folder you’ve just downloaded and add the following files to your page Assets:

fancy_closebox.png
fancy_left.png
fancy_progress.png
fancy_right.png
fancy_shadow_e.png
fancy_shadow_n.png
fancy_shadow_ne.png
fancy_shadow_nw.png
fancy_shadow_s.png
fancy_shadow_se.png
fancy_shadow_sw.png
fancy_shadow_w.png
fancy_title_left.png
fancy_title_main.png
fancy_title_right.png
jquery-1.3.2.min.js
jquery.easing.1.3.js
jquery.fancybox-1.2.0.js
jquery.fancybox.css

(In other words, all but the penultimate file — jquery.fancybox-1.2.0.pack.js.)

Place the following code in the Custom Header panel:

Please note: The forum has stripped out some of the code above. You can see how it is supposed to look in the image below. Go here for the full code you can copy and paste.

Substitute YOUR_ID_HERE with a meaningful name like ’fancybox‘; and YOUR_CLASS_HERE with a meaningful name like ’gallery‘.

Add your thumbnail image to the page.

Then add the image you want to appear in the FancyBox to your Assets.

For a single image:

Select your thumbnail image, and click on Add Link.

Link to the ‘big fancyBox image’ you’ve just added to Assets.

In Custom Attributes, click the + sign to add an attribute named ‘id’ with the value of your meaningful name (above).

For a gallery:

Add your thumbnails to the page and your big images to your Assets and then Link each of them as below

That’s it.

Slainthe
Marten

[EDIT — Well, I should’ve known the forum would strip out the most important part, the code for the Custom header. Go here for the full code you can copy and paste.

Just perfect Marten!  Wonderful… Thank you for putting in the time and this procedure works effortlessly for me.  Thank you.

I do want to throw a note out to the community… FancyBox works great when “you” are hosting the asset file but, does anyone know how I might integrate a YouTube video or other offsite media asset?  I tinkered around but, found no solution.  I do have my cake and I am eating it so it’s no big deal but, was curious if it was possible.

Again, thanks for your contribution Marten.

Paul