This exercise it is not well prepared, and is not well explained.

Is a very interesting matter and most useful.

Students should finish and achieve this exercise.

I'm trying to do lightbox.html exercise.

I have resolved some of my issues, but it still doesn't work.

 

Follow my actions, please:

Create a new page to display the carousel;

Add WebBlock for each JQuery file (excluding .min files), and fill the JavaScript;

Add WebBlock for each CSS file, and fill the StyleSheet;

Add all images;

In CSS files, change the path of images and the name because:

- OutSystems removes the "-" character of the file name;

- The path in CSS is "images" and the path in OutSystems is "img";

Create a new Weblock (jCarousel_Lightbox) to Lightbox exercise:

- Add a DIV id = base;

- Within the DIV Base, I added all WebBlocks CSS as lightbox.html;

- Within the DIV Base, added DIV id = content;

- Within the DIV content, added DIV id = container;

- Inside the container DIV, added DIV id = carousel

- Within the DIV carousel, I added all links with style = lb_gallery;

- Within all LINKs, added the correct image;

- Inside the DIV container, added DIV id = pages;

- Finally, in the DIV Base, added all WebBlocks JQuery as lightbox.html;
 

But the carousel is not working:

- All images are visible, the wrapper DIV is not working;

- The action click on the image is OK, and navigation in the image is OK;

 #container

   $( "#carousel" ).rcarousel({

  _total = $( "#carousel" ).rcarousel( "getTotalPages" );

On the divs you have this "Id's" on the field Name of the containers.
Outsystems platform generates the div Ids based on its location on code so the id's will not align with CSS and javascript that you are using.

So how can you solve it:

For the Css you can replace "#container" for a class ".container" that you can use then in the containers on the style field, and this way on JS you can use a selector like " $( ".carousel" ) instead of  $( "#carousel" ).

If you realy want to use the Id's,  insert the css or JS at the end of your screen inline using an expression with escape content set to no and this way you can use the container Ids in the contest of the page.(you have an example of this on the last image of the exercise).
PS - for this you need to use  <style></style> or <script> <\script> sections. 

Best Regards 
Hugo Catarino

 
 

Still doesn't work.
Can you send me the oml file, so that i can check it, please.

Thank you very much.

Best regards,
Gonçalo Correia