How to use Fancybox with WEBDEV ?
FancyBox is a tool for displaying images in a Mac-style “lightbox” that floats overtop of web page. It is built using the jQuery library. See http://fancybox.net/ for more details. Here is a tutorial to use Fancybox and jQuery in WEBDEV 15.
Note that even if the tutorial refers to version 15 everything will work the same in WEBDEV 14
1st Step – Create a WEBDEV project named “fancybox”
Make it of dynamic type with no skin, no home page, and no database.
2nd Step – Make it W3C compliant and Javascript friendly
In Option for generating the HTML code (Project > Description > Advanced),
- check W3C with DTD
- unchek the 4 “compress” options
- uncheck the “Don’t generate Id …” options
W3C is required because jQuery uses DOM, the other settings will make the HTML code more readable.
3rd Step – Download and install Fancybox
Do this in the project folder. It’s always best to have everything in one place.
4th Step – Play with the index.html page
Do this until you have a little understanding of how it works (the source code will help).
As with every jQuery code, the effect is set up in the $(document).ready(function()).
In this function, we will need to write just one line of code that will be:
$("something").fancybox()
We’ll see later what exactly write instead of “something”.
As for the HTML code, what is needed is a link with an image inside, like this:
<a href="./example/1_b.jpg"><img src="./example/1_s.jpg" /></a>
This is a simple link, but not a text link. Instead of the text, we have a small image 1_s.jpg (this is the src part). The effect of clicking this small image will be to display the big image, 1_b.jpg (this is the href).
The trick will be to get something like this with WEBDEV.
5th Step – More with index.html
Before dealing with WEBDEV, let’s play a little more with index.html. First we’ll comment one line of javascript. Actually it’s three lines, but it counts for one.
$("a#example1").fancybox({
'titleShow': false
});
To comment we just need the put // in front of each line
// $("a#example1").fancybox({
// 'titleShow': false
// });
Now execute index.html again, the first image is not “fancy” anymore. The magic is gone, clicking the little image displays the big image in the most simplistic and ugly way. Our first job inside WEBDEV will be to replicate this behavior, and then to make it fancy again.
6th Step – jQueryfying
We are going to make a last change in index.html. As it is now, it is downloading jQuery directly from the site. This is a good thing, but for a better integration with WEBDEV, it’s best to get the .js file locally. Let’s do that.
- Load and save this script (http://code.jquery.com/jquery-1.4.2.min.js) in the fancybox folder.
- - change accordingly the index.html code like this.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
becomes
<script type="text/javascript" src="./fancybox/jquery-1.4.2.min.js"></script>
Now all the required scripts are available locally in the fancybox folder.
Before going on check that the index.html is working as before.
7th Step – Back inside WEBDEV
Build a new blank page and create a clickable image on it. Note that this is a clickable image, not a regular image. We will use the images provided with the Fancybox example page. For simplicity, we have to copy theses images into the FANCYBOX_WEB folder. Let’s do that: copy the /example/ folder from the /jquery.fancybox-1.3.1/ folder to the FANCYBOX_WEB folder.
Now we can set up the image control. In the General tab of the image description window select the 1_s.jpg for Image (1). For Action select None (2) then go to Other actions. In defining an action select Other actions: enter a link (3) and finaly for Custom link:(4) enter _PROJET_WEB_example/1_b.jpg
And now you are wondering what the hell is _PROJET_WEB_. Let’s say for simplicity that WEBDEV will replace this with the actual name of the FANCYBOX_WEB folder.
Test the page now. If all is well clicking the small image will display the big one. The more curious will have a look at the page source and will find the image link that we described in the 4th step.
<a href="/FANCYBOX_WEB/example/1_b.jpg" target="_self"><img src="/FANCYBOX_WEB/example/1_s.jpg" width=50 height=50 hspace=0 vspace=0 border=0 alt="" name=CLICKABLEIMAGE1 id="CLICKABLEIMAGE1" CLASS=l-0></a>
8th Step – Bringing the magic of Fancybox
Now it’s time to add the fancybox effect to our clickable image.
Let’s import the javascript scripts (the order matters !): window description, tab Advanced, tab Javascript, use the [+ Add] button to add the following scripts:
- jquery-1.4.2.min.js
- jquery.mousewheel-3.0.2.pack.js
- jquery.fancybox-1.3.1.js
We need another script, very simple that will link fancybox to WEBDEV, call it domready.js and save it in the FANCYBOX_WEB folder with the following content:
jQuery(document).ready(function() {
DOMready();
});
And the final task will be to create the browser procedure DOMready() inside WEBDEV with this simple line (the prupose of this line being to test that jQuery is working):
alert("jQuery is working");
Please note that Javascrip is case sensitive and that the procedure (actually a function in Javascript linguo) is of type Javascript (not WLanguage).
Test the page. If everything is correct so far, you will see a small dialog box saying “jQuery is working”.
9th Step – With style
The fancybox effect uses a CSS stylesheet. We need to add this stylesheet to our project. It’s done from the description project window in the Style tab with the [Free CSS style sheets] button at the bottom of the screen. The stylesheet must first be copied into the FANCYBOX_WEB with all the images present in the /fancybox/ folder. These images are used by the stylesheet.
10th – Step the moment of truth
If we test our page now, we will see that nothing has changed. Clicking the little image just displays the big image in the most ugly way. Of course we did not tell jQuery where to apply the fancybox effect. We are going to do this now.
Edit the DOMready procedure to enter the following (at the same time, we will remove the alert message):
$("a[href$=.jpg]").fancybox();
This is the jQuery way to say:
- apply the fancybox effect .fancybox();
- to all links that point to an image .jpg $(“a[href$=.jpg])
Finally let’s test the page for the moment of truth.
Try it !
As an exercice for the reader, I suggest the following :
- group some images into a cell to make a gallery
- use a looper to make a gallery
Download The full project in version 15
The download includes jQuery and Fancybox.
Answers are provided in the download.