PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → Trying to use javascript in one page (WD 12)
Trying to use javascript in one page (WD 12)
Débuté par Victoria Caballero, 23 aoû. 2008 23:22 - 12 réponses
Posté le 23 août 2008 - 23:22
Hi all,
I'm trying to use "Lightbox" in one of the pages of my project. This is a simple, unobtrusive script used to overlay images on the current page. I want to to use this javascript to show some screenshots on my page. (If someone want this javascipt I can sended to you :-))

I've downloaded this javascript from a page. It is a .zip file with 4 .js files, some .gif files and a .css file. I've also a file with the explanation about how to implement this script :-) but I've never used javascript :-( so please I need your help about how to use this in WebDev.

The instructions are:
1) Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

(I've included this 3 scripts in my page in "Advanced" in the "Javascript" tab. I think this step is ok.)

2) Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

(My question here is where should I add this?)

3) Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location.
Also, make sure the loading.gif and close.gif files as referenced
near the top of the lightbox.js file are in the right location.

(I guess I can handle this one)

4) Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Optional: Use the title attribute if you want to show a caption.

(Again, some question: where should I add this?)

5) If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

I understand this but again I don't know where should I use this code.
Sorry but as you can see I don't understand so much how to use a javascript and I would like to start learning how to implment this simple sript.
Any help will be appreciated.

Thanks in advance.
Regards

Victoria Caballero
Copenhague
Denmark
Posté le 26 août 2008 - 00:44
Hi Victoria!...

Here is an easy 4-step solution for your problem.

1) Download:

First of all, download the Flash Lightbox version, it is called "Flashlightbox v2", you can download it from:

http://www.huddletogether.com/projects/lightbox/

You need this version to explicitly call the lightbox functions with javascript. It is easier this way with WebDev.



2) Prepare the Project:

Inside the zip file you will find the files: close.gif, lightbox.css, lightbox.js, loading.gif, overlay.png. Just copy this files into your "_WEB" directory.



3) Prepare yor Page:

In the page description, insert this code in the "Advanced" tab, in the HTML section (code to be added to the page header):

<Link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>




4) Use the library!

Place a Link, a button or whatever... On the Description of the control, on the section "Operation on Controls" pick "None" to avoid server roundtrip.

Now, we will need to add the code, go to the control's code, and in the browser's Click (the green area) type in:

flashLightbox('Image.gif','This is my Image')




That's all, u just need to use the browser function "flashLightbox" to call your popup... Remember, this funcion is client-side, you need to turn the server roundtrip off. Note that if the image does not exists, you will only see the "loading" image with all grayed out.


Cheers!

Hilario Perez Corona
Nabu Tecnologia en Software
Posté le 26 août 2008 - 14:08
Hi Hilario,
thanks for your response.
I've taked a look to the link. It seems to be easy to implement with
the 4 steps that you have provided. I will try it!!.

Regards.

Victoria Caballero


Hilario Perez Corona brought next idea :


Hi Victoria!...

Here is an easy 4-step solution for your problem.

1) Download:

First of all, download the Flash Lightbox version, it is called
"Flashlightbox v2", you can download it from:

http://www.huddletogether.com/projects/lightbox/

You need this version to explicitly call the lightbox functions with
javascript. It is easier this way with WebDev.



2) Prepare the Project:

Inside the zip file you will find the files: close.gif, lightbox.css,
lightbox.js, loading.gif, overlay.png. Just copy this files into your "_WEB"
directory.



3) Prepare yor Page:

In the page description, insert this code in the "Advanced" tab, in the HTML
section (code to be added to the page header):

<Link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>




4) Use the library!

Place a Link, a button or whatever... On the Description of the control, on
the section "Operation on Controls" pick "None" to avoid server roundtrip.

Now, we will need to add the code, go to the control's code, and in the
browser's Click (the green area) type in:

flashLightbox('Image.gif','This is my Image')




That's all, u just need to use the browser function "flashLightbox" to call
your popup... Remember, this funcion is client-side, you need to turn the
server roundtrip off. Note that if the image does not exists, you will only
see the "loading" image with all grayed out.


Cheers!

Hilario Perez Corona
Nabu Tecnologia en Software
Posté le 26 août 2008 - 16:25
Hi Victoria,

I've made a little project in WebDev 12 for you. You can test it and download the source in version 12 from here :

http://megusta.webdevtest.com/WD120AWP/WD120Awp.exe/CONNECT/FlashLightBox

--
Regards
Pat

ps - thanks Hilario for your explanations.
Posté le 26 août 2008 - 18:19
Hi Hilario,
thanks for the demo, I've downloaded and it works fine! it is very easy
to use :-)

Cheers

Victoria Caballero
Copenhage
Denmark



pat wrote on 26/08/2008 :
Hi Victoria,

I've made a little project in WebDev 12 for you. You can test it and download
the source in version 12 from here :

http://megusta.webdevtest.com/WD120AWP/WD120Awp.exe/CONNECT/FlashLightBox
Posté le 27 août 2008 - 14:11
Hi Victoria,

I've made a new WebDev project that uses Slimbox instead of Lightbox.

Slimbox is written with the FX library Mootools, so the pictures are displayed more smoothly, with effects.

I prefer this one than the original Lightbox. Otherwise it's quite the same.


http://megusta.webdevtest.com/WD120AWP/WD120Awp.exe/CONNECT/Slimbox


Hope you'll enjoy it.

--
Regards
Patrick

ps - the project comes with 3 languages french-english-spanish. I'm not sure of the translations, specially with the spanish one.
Posté le 28 août 2008 - 12:13
Hi Pat,
I've downloaded your example and it works perfect and the code used to
implement the javascript is really very easy but(there is always a but
:-() I'm trying to do the same you did using a "clickable image" and it
doesn't work... The problem I can see is the images execute always the
server code of it self or maybe the server code of a link but the code
we have to place in order to use the "slimbox" is placed in the
browser, so it doesn't work... Of course, I know that one solution
could be place a "link" control below each image and call the slimbox
and that will works fine but I want it to know if it is possible to do
it in some way by clicking in the image. As you can see I don't know so
much about using javascript in a WebDev project and I'm also still
learning about the difference between the "browser" and "server"
concepts.
Thanks again for the time you've spended creating the example.

Regards

Victoria Caballero



pat pretended :
Hi Victoria,

I've made a new WebDev project that uses Slimbox instead of Lightbox.

Slimbox is written with the FX library Mootools, so the pictures are
displayed more smoothly, with effects.

I prefer this one than the original Lightbox. Otherwise it's quite the same.


http://megusta.webdevtest.com/WD120AWP/WD120Awp.exe/CONNECT/Slimbox


Hope you'll enjoy it.
Posté le 28 août 2008 - 17:40
Hi Victoria,

I've updated the Slimbox project in order to use a clickable image. The trick here is again not to call the server code.

Slimbox is a client side effect. It means that the effect is performed by your browser (ex: Firefox) without reloading the page.

Calling a server code, even when the code is empty, results always (ALWAYS) in a page reload. Therefore if the page is reloaded, the effect is never seen.

So in the description of the clickable image, you will note that action is set to : none.

Hope it helps

--
Regards
Patrick
Posté le 29 août 2008 - 08:58
Also remember, if you want to execute client AND server code, you can turn on "Send control values to the server", but on the code you must enable the AJAX option on the server code. This way the server code will be executed without a page refresh, and you will still see the client-side effect.



Hilario Perez Corona
Nabu Tecnologia en Software
Posté le 29 août 2008 - 16:30
Hi Pat,
I've downloaded your example and it works really fine! It is exactly what I need to do in my project . I've taked a look carefully and I think I've followed all the steps but I can't make it work in my project. I don't know what am I doing wrong. Maybe you can help me.

In "Advanced" Tab in my page, in "Javascript" list I've added the javascripts "mootools.js" and "slimbox.js".
Then in the Browser code of the image I've added this code:
tabParam est un tableau de 2 par 2 chaînes
tabParam[1,1] = "/Images/Screenshot1.jpg"
tabParam[1,2] = "Screenshot 1"

tabParam[2,1] = "/Images/Screenshot2.jpg"
tabParam[2,2] = "Screenshot 2"

MySlimBox(tabParam, 0)

And that's it! Am I missing something else?

I've seen in your project that the .js files are in the folder "SLIMBOX_WEB\" and also in "SLIMBOX_WEB\js\". My doubt here is: where they should be, in both folders?
Then I can see the file "Slimbox.css" it's in "SLIMBOX_WEB\" folder, and inside "SLIMBOX_WEB\UK" and also inside of "SLIMBOX_WEB\UK\css". Again my doubt is if this file should be in all these folders.
Anyway I've placed the .js files in the same folder that in your project. I've done the same with the .css file (I copy the file in all the folders just in case...)

When I click on the image nothing happens.
I can send a screenshot of my page or folders if this can help you.
Thanks in advance.

Regards

Victoria Caballero
Copenhage
Denmark
Posté le 29 août 2008 - 19:06
Hi Victoria,

It's rather difficult to know what is wrong but I'll try. I'm gonna answer you in two ways. First answering directly to your message, second with a step by step tutorial I've prepared. Sometimes seeing something from different angles help.

tabParam est un tableau de 2 par 2 chaînes
tabParam[1,1] = "/Images/Screenshot1.jpg"
tabParam[1,2] = "Screenshot 1"


Your pictures must be in the project_WEB folder, or in a sub-folder. I my case, I wrote

tabParam[1,1] = "/SLIMBOX_WEB/example.jpg"

/SLIMBOX_WEB/ is what I call my project_WEB folder.



> I've seen in your project that the .js files are in the folder "SLIMBOX_WEB\" and also in "SLIMBOX_WEB\js\". My doubt here is: where they should be, in both folders?

You don't have to worry about the .js file. WebDev is making a copy. However you must add them in the right order.


Then I can see the file "Slimbox.css" it's in "SLIMBOX_WEB\" folder, and inside "SLIMBOX_WEB\UK" and also inside of "SLIMBOX_WEB\UK\css". Again my doubt is if this file should be in all these folders.


The .css file must be in the project_WEB folder.

Note that WebDev is going to use multiple copies of some files. Frankly I don't know why. Don't get distracted by this.

In addition, I strongly recommend using Firefox and the Firebug plugin. Combined, these will give you a lot of informations. Much more than IE.

As said before, here is a small tutorial that I have experimented myself. It's supposed to guide you to build a WebDev project from scratch. For that purpose, I have prepared first a simple HTML page using Slimbox. You may download this page here:

http://ilikewd.free.fr/zip/slimbox.zip

Following is my little tutorial. Good luck.

--
Regards
Pat

=====================================
We're going to build a new Webdev project using Slimbox from scratch.

1. First unzip the slimbox.zip file and then test the slimbox.html page. It will display a very basic page with a link. Clicking on the link will open a picture of a monkey while graying the background. The letter X can be used to close this window. This is the static version of Slimbox. Now we have all the files we need and we are going to use them in a new WebDev project.

The ZIP contains the following files.

example.jpg
slimbox.html

---css
closelabel.gif
loading.gif
nextlabel.gif
prevlabel.gif
slimbox.css

---js
mootools-1.2-core.js
mootools-1.2-more.js
slimbox.js

2. Create a new WebDev project named SLIMBOXTUTORIAL, very simple : no database, no SCM, no charter, ... and create a new blank page and save it as "page1.wwh".

3. Create a link set like this, caption: Slimbox, Action : none. On the "Click of link browser" code change the WL to JS, meaning that we will enter here javascript code instead of WLanguage code. In order to do that click on the letters WL on the green bar. The bar will turn blue and display JS instead of WL.

4. Enter this javascript code

Slimbox.open("/SLIMBOXTUTORIAL_WEB/example.jpg", "A big monkey");

5. Don't test it now. It will fail because "Slimbox" is not defined yet. In order to define it, we have to add some javascript codes in your page. Go to the Advanced tab in the page description, select the javascript tab and use the [+} button to add the following files in this order :

- mootools-1.2-core.js
- mootools-1.2-more.js
- slimbox.js

You can pick up the files from where they are located as WebDev will make a local copy of each in the _WEB folder.

6. We gonna need other files though and WebDev will not copy them. We have to do the copy by ourself. First copy the "example.jpg" in the project_WEB folder. Second copy all the files from the static example /CSS folder in the project_WEB folder.

7. Now finally, we have to add the proper CSS. Go to the Project description, in the Style tab and add the slimbox.css file with the [Free CSS style sheets...] button (remember that slimbox.css must be already in the project_WEB folder).

8. Run once this menu option: Project > Other actions > Repair the project. It will force WebDev to rebuild the HTML page.

9. Take a long and calm breath.

10. Test the project.

What could go wrong ? many thinks unfortunately. I cannot anticipate everything. Here are some advices :

- clear the browser cache often in order to prevent the browser from giving you an old version of your page.

- make a little change in the page, like adding a static. if you don't see it, clear the cache.

- in order to test if some javascript code is executed, add the following javascript line before it :
alert("this is a message");

- repair the project often (after a minor change like adding a CSS style sheet for example), WebDev will not rebuild the page as it should.
Posté le 30 août 2008 - 03:17
Hi Pat,
your guide really help me!! the problem was that I wasn't added the .css file to the project. I did it so now it works perfect! Tnank you very much for the time you have taked with the tutorial and so on.

Regards!

Victoria
Posté le 13 mai 2009 - 20:13
Hello,
I apologise because my english is not fluent.
Thanks for your plan Slimbox at disposition. Can point out to me if it is possible to recover the instant or the user clicks on Rounded off. Because I meet problems with combos on IE which appear on picture.
thank you
Bye