For an application I want to provide an image slider, in stead of the default Bootstrap carousel. I remembered a blog post of Johnny Oldenburger about Unite Gallery a while ago so I gave that a try.
Repeat and xp:image
Where Johnny demonstrated some static images I want to populate the image collection so I set up a repeat control with an xp:image control inside and calculate it’s properties.
Here is what the code looks like:
The code of the XPage you can download here.
After loading the JS resources I have a script block that build the gallery when the document is ready. The div gallery functions as container for the gallery.
Then I have a repeat control. An album object is just a Notes document that contains references to other Notes documents containing the picture files. So my Album.getPictures method returns a vector of references for which I have to make a lookup (via a Picture object) and collect some values (which size picture to use (thumbnail or original).
I separate the design from the data, so I also have to collect the location of the data db.
In the example I have two ways to define the image, one is via a xp:text control and the other is via the xp:image control. I rather prefer this last option.
Below you can see a snippet of how the result. At first it looks nice, does’t it?
Complications with XPages
So after I got the gallery on my XPage with dynamic content I started to notice undesired behaviour. My Bootstrap navbar links (xp:link) didn’t work anymore. Buttons on the same page stopped behaving and more.
A quick search after “Unite Gallery and XPages” lead me to some stackoverflow questions where people described similar problems.
Untill now I have not found a solution to get it working.
Before implementing a plugin in XPages, do some research on possible complications.