Zk integrating lightbox.js

asked 2015-09-24 06:03:48 +0800

roshanShahukhal gravatar image roshanShahukhal
13 2

I am being able to use lightbox.js to view images in zk framework only if I hardcode the image url. I need a way to set the url from the viewModel but I am not being able to achieve so. Here is what I have done so far :

<zk apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.shahukhalroshan.vm.TestVM')" xmlns:h="native">
<style src="lightbox.css" />
    <h:a class="example-image-link" href="http://www.quicksprout.com/images/foggygoldengatebridge.jpg" data-lightbox="example-1">
        <image id="imgUrl" sclass="example-image" src="http://www.quicksprout.com/images/foggygoldengatebridge.jpg" width="100px" height="100px" />
 <script src="lightbox-plus-jquery.js"></script>


Replacing the src as follows doesn't work :

<h:a class="example-image-link" href="@load(vm.imageUrl)" data-lightbox="example-1">
    <image id="imgUrl" sclass="example-image" src="@load(vm.imageUrl)" width="100px" height="100px" />

Thanks in advance !

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2015-09-24 08:29:22 +0800

chillworld gravatar image chillworld flag of Belgium
5357 4 9

First things first.
You can't declare a viewmodel the zk tag.

When changing the zk tag to a window I have acces to the viewmodel but of course still not going right.

So I added some JQuery in the getter to get it fixed.

Zul :

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestVM')" xmlns:h="native">
        <h:a id="anchor" class="example-image-link" data-lightbox="example-1">
            <image id="imgUrl" sclass="example-image" src="@load(vm.url)" width="100px" height="100px"/>


private String url = "http://www.quicksprout.com/images/foggygoldengatebridge.jpg";

public String getUrl() {
    Clients.evalJavaScript("jq('#anchor')[0].href='" + url + "';");
    return url;

Working fiddle found here.

Duplicated question on SO

Greetz chill.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2015-09-24 06:03:48 +0800

Seen: 35 times

Last updated: Sep 24 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More