ClickOn image event?

Suite and Optimus Suite 5
#1

I created a master/details page similar to the Web Application tutorial on the website.
I have a grid on the left side, and a form is populated on the right side from a MySQL database. One of the elements on the form is a template . When I populate the form, it changes into a small thumbnail.
I would like to have a simple function that if somebody clicks on the thumbnail , then a dhtmlx window pops up with a bigger version of the picture. So far I only found click events for buttons on forms. Is it possible to do a click even on other elements?
Csaba

#2

There is “format” property in “template” form item:
docs.dhtmlx.com/doku.php?id=dhtm … template&s[]=template
Please, look at this link:
dhtmlx.com/docs/products/dht … plate.html
Adding of event “onclick” is described here.

It seems like you need something like:
form structure
{type: “template”, label: “Label”, value: “some text”, format:format_a}
function to define this format
function format_a(name, value) {
return “

”;
}
function to show popup
function showPopup(elem) {
//popup initialization
…
}
Popup settings are here:
docs.dhtmlx.com/doku.php?id=dhtm … tom_object
And look samples:
dhtmlx.com/docs/products/dht … index.html
#3

Thank you very much for the suggestions. They seem very straightforward. I will try to implement them and if I have questions, I will come back again.

Csaba

#4

Ok, just try it :slight_smile: You are welcome!

#5

I tried but I got stuck with a javascript error. I hope you can help me with it.
I created two functions according to your suggestions:

[code]function onClickPic(picture) {
var popup_pic = new dhtmlXWindows();
pic_win = popup_pic.createWindow(1, null, null, 500,500);
pic_win.centerOnScreen();
pic_win.attachObject(picture);
}

// Gel picture pop up function
function picture_popup(name, bind) {
return “

”;
}
[/code]
Instead of value, I use the bind property of the template element, which is connected to a mysql query.

The value of the bind variable is a path with the image name, in this case

bind = _images/gel_pictures/Coomassie_Big12_9_11_2013_1378937676.png

The page correctly shows the thumbnail image on the form. However, when I click on the picture, I get an error message:
Uncaught ReferenceError: _images is not defined
onclick
I am sure, it’s something trivial, but I have been busting my head for hours and I am desperate.

Csaba

#6

It seems like incorrect image path.
But to check it we need completed demo.
You can provide it on support@dhtmlx.com with a link to this topic or share with us a direct link to your project.
docs.dhtmlx.com/doku.php?id=othe … leted_demo

#7

The path is ok, since it works in the tags.
I will try to submit a full demo.

Csaba

#8

Ok

#9

Demo sent. :wink:

#10

Have got a demo. How can we reproduce your issue?

#11

If you load the main page (index.html), click on the Antigens on the navigation bar. Select one of the rows on the left side in the grid (you should see two lines in the grid). When you have selected the row, the form on the right should populate. You see two pictures in the form. If you click on the picture you should get the error.
I hope this helps
C

#12

Sorry, but we face some errors in your sample. Could you reduce it to static one-record form with image? It can be just form in a layout cell (you don’t need to create such complex app)

#13

I will try. I agree it’s pretty complicated.

#14

Yep! Almost done, but there is an error :slight_smile:
Will be waiting…

#15

Thanks for the effort. I think I fixed the problem here is the function code:

// Gel picture pop up function function picturePopup(name, bind) { return "<div onclick=onClickPic('" + bind + "')><img src='" + bind + "' width='300' height='150' /></div>"; }

The difference is that I removed the quotation marks from the onClickPic() function call. Now it works nicely.

Thanks again
Csaba

#16

We are happy to hear that :slight_smile: