Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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" />
<div>
<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" />
</h:a>
</div>
<script src="lightbox-plus-jquery.js"></script>
</zk>
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" />
</h:a>
Thanks in advance !
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.
<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestVM')" xmlns:h="native">
<div>
<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"/>
</h:a>
</div>
</window>
private String url = "http://www.quicksprout.com/images/foggygoldengatebridge.jpg";
public String getUrl() {
Clients.evalJavaScript("jq('#anchor')[0].href='" + url + "';");
return url;
}
Greetz chill.
Asked: 2015-09-24 06:03:48 +0800
Seen: 35 times
Last updated: Sep 24 '15