Lightswitch HTML - enlarging an image on click

Question

has anyone yet produced some code or found a way of making an image click-able on Lightswitch HTML? I think having the abiity to click on the photo and then for it to en-large would certainly be a good feature...

if so please could you share your answer(s)/research below

Thanks

Answer 1

a lot simpler than I thought it would be... In my case, I have a table view which lists (x) number of rows, each containing an image limited to 150px by 150px...

1. create a popup and drag the image from the table on the left pane onto the popup. (not the whole table) Make sure that the column/row width is adjusted to fit the image or the image will expand over the popup border...

2. click on the image in the table view on the screen (center), and select itemTap, and select the popup

3. change the size of the image to what suits you on the popup and your ready to go :)

4. add the code below to center the popup (EditRender on the popup):

myapp.ViewEngineer.popupname_postRender = function (element, contentItem) {
    $(element).parent().on("popupcreate", function (e) {
        $(e.target).popup({
            positionTo: "window",     // position the popup in the center of the browser window
        });
    });
};