GWT Bootstrap 3 Gallery

Question

I am trying to run the demo function of gwt bootstrap 3 - gallery.

When I open a picture on the GWTBootstrap3 demo it is opened as popover. When I open it in my application. It follows the link to the picture, that I selected. What am I doing wrong?

My ui-binder code is

<gallery:Gallery ui:field="gallery" thumbnailWidth="100px" thumbnailHeight="100px">
    <gallery:GalleryImage url="https://farm1.static.flickr.com/655/21391422043_68c98789bf_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/582/21830878218_f7e24ec74d_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5707/21832711448_02e33b3b3b_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/567/22011206725_9d0b3dc1ae_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/670/22016240921_6fca2b20ce_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5833/21401954003_27f145bc32_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5686/21997628766_9845a40fdc_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5637/21393309814_17ca189d39_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/660/22018439171_06358ee107_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5757/21829896778_e9febcfec8_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5799/21837884439_b5cfe23d60_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/616/21833374820_2c2a1ee5a7_b.jpg" />
</gallery:Gallery>

exactly as with the sample code in http://gwtbootstrap3.github.io/gwtbootstrap3-demo/snapshot/#gallery

Answer 1

As I could not fix the original Problem I worked around setting up a DecoretedPopupPanel "po". My sample code looked like. First I am adding picture thumbs with a click handler:

                ClickHandler cH= new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                
                Image iImg=(Image)event.getSource();
                showPicture (iImg.getUrl());
                }                                                               
                };

if the thumb is pressed I open the popup ...

/**
 * Zeige in einem PopupFenster ein Bild möglichst groß an 
 * @param strURL
 */
public static void showPicture(String strURL) {
    po.clear();
    Image iNew=new Image(strURL);
    float iY=iNew.getHeight();
    float iX=iNew.getWidth();
    
    float iWX=Window.getClientWidth();
    float iWY=Window.getClientHeight()-120;
    
    boolean bDo=true;
    
    //adjustiere die Bildgröße
    while (bDo) {
        float iXAdjust=iX/iWX;
        float iYAdjust=iY/iWY;
        if (iXAdjust<0.5 && iYAdjust<0.5) {
            iY=iY*2;
            iX=iX*2;
        }
        else if (iXAdjust>1 || iYAdjust>1) {
            if (iXAdjust>iYAdjust) {
                iY=iY/iXAdjust;
                iX=iX/iXAdjust;                                             
            }
            else {
                iY=iY/iYAdjust;
                iX=iX/iYAdjust;                                             
            }
            bDo=false;
            //iY=iY/2;
            //iX=iX/2;
        }
        else {
            bDo=false;
        }
    }
    mI.setImageData(strURL);
    
    //neu
    mI.iImage.setUrl(iNew.getUrl());//=iNew;
    mI.iImage.setPixelSize((int)iX, (int)iY);
    mI.iImage.addClickHandler(  new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            
            po.hide();
        }                               
    });

    po.add(mI);
    po.center();
    po.setGlassEnabled(true);
    po.setAutoHideEnabled(true);    
    po.show();
}

Answer 2

This ui-binder code will generate, for each image, something like:

<a data-gallery="data-gallery" href="https://farm1.static.flickr.com/655/21391422043_68c98789bf_b.jpg" style="display: inline-table; width: 100px; height: 100px;"><img src="https://farm1.static.flickr.com/655/21391422043_68c98789bf_b.jpg" class="gwt-Image" style="width: 100px; height: 100px;"></a>

which, without any javascript code associated, will simply open the image, just like you are experiencing.

Comparing the local code with the demo on the GWTBootstrap3 website, particularly the javascript handlers on each link element, you can see that jquery.blueimp-gallery.js is missing on the local code. This file is also not found on the demo website, but the code is cached, which seems to be the reason why it is working there.

This problem is the result of using discontinued and deprecated libraries and projects. GwtBootstrap3 has been discontinued and the Bootstrap-Image-Gallery is deprecated in favor of blueimp Gallery. I would therefore strongly suggest to stop using GwtBootstrap3 completely and, for the gallery in particular, use the project https://github.com/blueimp/Gallery. You can use GWT, Bootstrap and other libraries together. GwtBootstrap3 was only a GWT wrapper for Bootstrap. It is not needed and I believe it is even undesirable, also because you end up depending on projects that get discontinued and do not evolve at the pace Bootstrap and GWT do. In my opinion wrappers like this one only add up unneeded complexity to the project.