Add opacity to image

Suite and Optimus Suite 5
#1

Hello all

I have following code and i want to add opacity to image where isHidden value is 1

AF_FIL_DW = new dhtmlXDataView({container:'photolist',type:{template:"<img src='#url_thumb#' style='width:100%;height:100%;'>",height:65,width:65}}); AF_FIL_DW.load('/get/file/all','json',function(a){ json_res = JSON.parse(a); for(var x=0;x<json_res.length;x++) { if(json_res[x]['isHidden'] == '1') { // This image's opacity must be opacity:0.4 } } AF_FIL_DW.refresh(); });

#2

Hello
You need to use the next template:

template:"<img src='#url_thumb#' style='width:100%;height:100%;'>"

=>

template:function(obj){ return "<img src='"+obj.url_thumb+"' style='width:100%;height:100%;"+(obj.isHidden?"opacity:0.4":"")+"'>" }
#3

Dear Darya thanks for reply

I have replaced your code but result is not what i was expecting. Because this time all images have opacity 0.4

Let’s say i have 12 images and only one image’s isHidden value is 1. So i want to make only that image opacity 0.4

Here is Complete code

[code]AF_FIL_DW = new dhtmlXDataView({container:‘photolist’,type:{template:function(obj){ return “”}, height:65, width:65}});
AF_FIL_DW.load(’/get/file/all’,‘json’,function(a){
json_res = JSON.parse(a);
for(var x=0;x<json_res.length;x++)
{
if(json_res[x][‘isMain’] == ‘1’ || AF_FIL_DW.dataCount()==1)
{
var id = AF_FIL_DW.idByIndex(x);
AF_FIL_DW.select(id);
}

// if(json_res[x][‘isHidden’] == 1)
// {
// var id = AF_FIL_DW.idByIndex(x);
// AF_FIL_DW.customize({opacity:0.4});
// AF_FIL_DW.refresh(id);
// }
}
AF_FIL_DW.refresh();[/code]

#4

Try the next:
var imgURL = “…/___img/”
dataView = new dhtmlXDataView({
container:“photolist”,
template:function(obj){ return “”},
drag:true,
type:{
height:65,
width:65
}
});
dataView.parse([{
“id”:“1”, “Text”:“Item 1”, “Image”:imgURL+“_blue.gif”, “isHidden”:0
},{
“id”:“2”, “Text”:“Item 2”, “Image”:imgURL+“_green.gif”, “isHidden”:1
},{
“id”:“3”, “Text”:“Item 3”, “Image”:imgURL+“_red.gif”, “isHidden”:0
},{
“id”:“4”, “Text”:“Item 4”, “Image”:imgURL+“_yellow.gif”, “isHidden”:0
}],“json”);
Result:

#5

Dear Darya
Thanks for your help, i really appreciate.

Your last chunk of code seems static data but mine is dynamic so when user click some event, i load pictures of that event. It means some times it comes up with only one image or sometimes comes up 15 images.

As you might notice that i get images by AF_FIL_DW.load. Any suggestion?

Thank you

#6

Please, provide us completed demo to inspect your issue on support@dhtmlx.com with link of this topic
docs.dhtmlx.com/auxiliary_docs__ … pport.html

#7

Dear Darya

I solved the problem after two days of pure pain and hair loss

Problem was ternary operator you provided.
So, i have changed it as follow

template:function(obj){ return "<img src='"+obj.url_thumb+"' style='width:100%;height:100%;"+(obj.isHidden?"opacity:0.4":"")+"'>" }

into

template:function(obj){ return "<img src='"+obj.url_thumb+"' style='width:100%;height:100%;"+((obj.isHidden == 1) ? "opacity:0.4" : "")+"'>" }

Thanks for help