а

how to show image and the description with lighbox


#1

Hai,

anyone can help please…>?

I still try to learn…, I would try to showed image and description in lightbox when i click the tumbnail image

this part script to show the data

Rp.#Price#

#Name#

#Description#

{common.count()}
{common.state()}

/* this script to call function when i click image by class name */

/onclick event handler for image button (i try to Display in Lighbox)/
$$(“submenu”).on_click[“landscape_img”] = function(e)
{
var id = this.locate(e);
/item object/
var data = this.item(id);
dhx.alert({
title:“Order List”,
message:“Your order has been Show!”,
}
)
return true
};

this event successful to show the alert…but In this Event HOW TO Show the image , and detail likes name, descriptions and ext…IN LIGHTBOX Light jquery lightbox…? or can i used jquery lighbox to show it…?

please help…

thanks…



#2

var data = this.item(id); is data object. So, you may get all item properties and place some of them as lightbox content.

var name = data.name;
var image = data.image;


#3

Thank you. but can you give me sample how to show the variable to show with lighbox ?

i try to show with different way, i try to show with create some form like this

$$(“submenu”).on_click[“landscape_img”] = function(e)
{
var id = this.locate(e);
/item object/
var data = this.item(id);
var name = data.name;
var Desc = data.description;
var image = data.img;
var x=20, y=20;
dhx.ui({
id:“w1”,
view:“window”,
body:“Movable”,
height :600,
width :600,
head:{ view:“toolbar”, type:“SubBar”, data:[
{type:“icon”, icon:“new” , click:“close_modal”, align: ‘right’}
]},
modal:true,
/*body:{ view:“calendar”, navigation: true, timeSelect: false, weekHeader: false, weekNumber: false, date: new Date(2010, 1,14) }, */

			body : {
			         view:"dataview",
					type:{template:"<span class='dhx_strong'>name</span>name<span class='dhx_light'>desc</span>"	},
					drag:false,						
					datatype:"xml"
					},
			top:y, left:275,			
			move:true
		});
		x+=150; y+=150;						
		this.refresh(id); 
				
		return true 
		};

but variable not show ?, what i mistake ?

thanks


#4

how to show that variable name,desc in windows …

many thanks…


#5

I don’t see where you are using name, Image and Desc in your code …

here type:{template:“namenamedesc” }, is an incorrect template. It should be:
type:{template:"#name##name##desc#" },

If you need to use fixed variables here, you may use another approach:

type:{template:""+name+""+name+""+desc+"" },

But I do not undertand why…

Moreover, dataview should have some data. You may load data from xml or json file.


#6

this the full code where i took from sample ipad menu restaurant , i try to show the big image in difference windows when i click the content image (like when i’am attack picture at the top ). i’d have change the body to show the template like u ask before

type:{template:""+name+""+name+""+desc+"" },

but data still not showed …

many thanks//

Final page
 <!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
});
</script>
&nbsp

#Name#

#Description#

Rp.#Price#

#Name#

#Description#

{common.count()}
{common.state()}

#Name#

Rp.#Price#
{common.count()}
{common.state()}
#Description#
<script type="text/javascript" charset="utf-8">

	/*type properties that both 'landscape'and 'portrait' types have */
	pagelist_type = {
		css:"content",
		margin: 5,
		padding:5,
		state:function(obj){
			if(obj.Count>0){
				return "<div class='buy_dec_outside'><div class='buy_dec_inside'>&nbsp;</div></div>";
			}
			return "";
		},
		count:function(obj){
			if(obj.Count>0){
				return obj.Count;
			}
			return "+";
		}
	}
	/*properties of the 'landscape' type that are not included in pagelist_type object*/
	landscape_type = {
		name:"landscape",
		template:"html->dhx_type_landscape_container",
		height: 150,
		width: 749
	}
	/*adding elements from pagelist_type to landscape_type*/
	dhx.extend(landscape_type,pagelist_type);
	/*properties of the 'portrait' type that are not included in pagelist_type object*/
	portrait_type = {
		name:"portrait",
		template:"html->dhx_type_portrait_container",
	    height: 210,
	    width: 492
	}
	/*adding elements from pagelist_type to portrait_type*/
	dhx.extend(portrait_type,pagelist_type);
	/*adding new types to pagelist component*/
	dhx.Type(dhx.ui.pagelist,landscape_type);
	dhx.Type(dhx.ui.pagelist,portrait_type);
	/*adding the new type to dataview*/
	dhx.Type(dhx.ui.dataview,{
 		name:"menu",
       	template:"html->dhx_type_menu_container",
        height: 120,
		width: 255,
        margin: 5,
		padding: 0
    });
    /*function is called on 'Save' button click*/
	function saveOrder(){
		dhx.alert({
			title:"Saved",
			message:"Your order has been successfully saved!",
			callback:function(){
				$$("submenu").load("xml/content.xml");
				$$("Save").parse({total:0});
				
			}
		})
	};
	
	function ShowOrder(){
	/*function is called on  Popup 'Order' button click*/
		dhx.ui({
			view:"popup",
			id:"Menu1",
			body:{
				view:"list",
				url:"order.xml", datatype:"xml",
				select:true, yCount:9
			}
		}).Hide();
		};
		
	function close_modal(){
	this.getParent().close();
	x-=50; y-=50;
	}		
		/*
		dhx.alert({
			title:"Order List",
			/*message:"Your order has been Show!",*/
			
		/*	,
			callback:function(){
				$$("submenu").load("xml/content.xml");
				$$("Save").parse({total:0});
				
			}
		})
		}; */
	
	
	/*layout initialization*/
	dhx.ready(function(){
		dhx.ui(
		
			{
			id:"layout",
			type:"clean",
			cols:[
				{
					type:"clean",
					width:275,
					rows:[
						{
							view:"template",
							id:"Save",
							css:"order_row",
							template:function(obj){
								var str = '<h3 class="order_container_header">Total: <span id="Save" style="color:#ffc937;">'+obj.total+'  Rp.</span></h3>  ';
								str += '<a href="javascript:void(0)" class="order_container_button" onclick="saveOrder();">Save</a>';
								
								return str;
							},
							data:{
								total:0
							},
							height:100
						},
						
						{
							view:"template",
							id:"orderlist",
							css:"order_row",
							template:function(obj){
								var str = '<a href="javascript:ShowOrder()" class="order_container_button" onclick="ShowOrder();">Order</a>' ;						
								return str;
							},								
							height:60
						},

						{
							view:"dataview",
							type:"menu",
							id:"menu",
							url:"xml/menu.xml",
							datatype:"xml"
						}
					]
				},
				{
					view:"pagelist",
					id:"submenu",
					layout:"y",
					type:"landscape",
					url:"xml/content.xml",
					datatype:"xml",
					select:false
				}
				
			]		
		});
		
		/*setting default select item -'Pizza'*/
		$$("menu").attachEvent("onXLE",function(){
			this.select(1);
		})
		
		/*linking menu and submenu*/
		var dp = new dhx.DataProcessor({
			master:$$('menu')
		});
		dp.link($$('submenu'), function(master, linked){
			return linked.Group==master.Name;
		});
		
		/*onclick event handler for click image  (i try to Display in new windows)*/
		$$("submenu").on_click["landscape_img"] = function(e)
			{
				var id = this.locate(e);										
				/*item object*/					
				var data = this.item(id);	
				var nama = data.name;
				var Desc = data.description;
				var Bigimage = data.Bimg;		
								
		var x=20, y=20;
		/* this to show new windows with var  data */				
		dhx.ui({
			
			view:"window",	
			body:"Movable",	
			height :600,
			width  :1024,
			head:{ view:"toolbar", type:"MainBar", data:[
				{type:"icon", icon:"new" , click:"close_modal", align: 'right'},
				{type:"label", label:"windows"+data.name}					
			]},
			modal:true, 
			body : {
			view:"dataview",				
			type:{template:"<span class='dhx_strong'>#img#</span>#name#<span class='dhx_light'>#desc#</span>" },  /* this not show in windows when i click then image to show only this data id */
			drag:false,	
			datatype:"xml"
			},								
					
			top:y, left:275,			
			move:true
		}); 
					
			
		x+=150; y+=150;						
		 this.refresh(id); 
				
				
			/*	dhx.alert({
				title:"Order List",
				message:"Your order has been Show!",				
				})*/
			 return true 
		};
		
		
		
		/*onclick event handler for [+] button (adding an item to an order)*/
		$$("submenu").on_click["buy_outside"] = function(e){
		    /*getting id of the clicked item by event*/
			var id = this.locate(e);
			/*item object*/
			var data = this.item(id);
			/*incresing number of ordered items*/
			if (data.Count == 99){
				return;
			} else {
				i = parseInt(data.Count,10);
				data.Count = i+1;
			}
			/*increasing the total price of the order*/
			var currentOrder = $$("Save").data;
			$$("Save").data.total += parseInt(data.Price,10);
			$$("Save").render();
			
			/*If an item is already ordered, redraw it (apply count). In the other case, the item is selected (selection causes redrawing)*/
			if (this.isSelected(id))
				this.refresh(id);
			else
				this.select(id, true);
			return true
		};
		/*onclick event handler for [-] button (removes an item from an order)*/
		$$("submenu").on_click["buy_dec_outside"] = function(e){
			 /*id of the clicked item by event*/
			var id = this.locate(e);
			/*decrease number of ordered items*/
			var data = this.item(id);
			data.Count --;
            /*changing total price*/
			var currentOrder = $$("Save").data;
			$$("Save").data.total -= parseInt(data.Price,10);
			$$("Save").render();
	        /*If the last instance of the item is removed from an order, its selection is cleared. In the other case, it is refreshed*/
			if (!data.Count)
				this.unselect(id);
			else
				this.refresh(id);
		};
		
		/*adjusting submenu to the orientation of a display */
		function orientation(){
		    /*changing submenu type*/
			var orientation = window.orientation;
			if (orientation === 0 || orientation === 180){
				$$("submenu").define("type","portrait");
			}
			else if (orientation === 90 || orientation === -90){
				$$("submenu").define("type","landscape");
			}
			/*appling the new type to submenu*/
			$$("submenu").render();
			/*layout resizing*/
			$$("layout").resize();
		};
		dhx.event(window, "orientationchange", orientation);
		orientation();
	});
</script>

#7

hello … can any help my problem…


#8

here is the dataview initialization that from your code:

body : {
view:“dataview”,
type:{template:"#img##name##desc#" }, /* this not show in windows when i click then image to show only this data id */
drag:false,
datatype:“xml”
},

There are no data in this dataview. You need to define xml file with dataview data (the example is “menu” dataview). If you want to show only one data object, you may choose another view type. It could be template:

var data = this.item(id);
var nama = data.name;
var Desc = data.description;
var Bigimage = data.Bimg;

var x=20, y=20;
/* this to show new windows with var data */
dhx.ui({

view:“window”,
body:“Movable”,
height :600,
width :1024,
head:{ view:“toolbar”, type:“MainBar”, data:[
{type:“icon”, icon:“new” , click:“close_modal”, align: ‘right’},
{type:“label”, label:“windows”+data.name}
]},
modal:true,
body : {
template:""+Bigimage+""+name+""+Desc+""
},
top:y, left:275,
move:true
});


#9

thank you alexandra, your explains is very help full but i still have a little problem, why the image still not show… i’d have define the Bimage in my xml this my xml

	<BImg><![CDATA[imgs/pizza/Bdish1.png]]></BImg>	

and i try to show the image in layout like this


body: { view: ‘layout’, type: ‘wide’,
cols:[
{
width: 375,
rows:[
{
template:""+Bigimage+""

								},
								{
									template:"<span class='landscape_body_header'>"+Desc+"</span>",
									height:220
								}
							]
						}
										
					], id: 'layout_3'
			}, position: 'center', width: 800, height: 600, is_popup: '', move: true, id: 'window_2', left: '10', top: '10'				
			});

but why the image not show and only show the image name and folder like this pict ??


#10

thanks for you details information

regards.

apriyanto.


#11

template:""+Bigimage+""+name+""+Desc+""

There is span tag in the template. To show an image, you need to use :

template:""+name+""+Desc+""


#12

thanks you Alexandra… the image is shown and then i try to open this application on my ipad… i used wifi to connect it. but something happen when i click the image the box not shown not like when i run this application on my laptop, why this happened i use safari and other browser to open from my ipad, but the problem still same, the box can not open not like when i run in my laptop (windows OS )

thanks


#13

hanks you Alexandra… the image is shown and then i try to open this application on my ipad… i used wifi to connect it. but something happen when i click the image the box not shown not like when i run this application on my laptop, why this happened i use safari and other browser to open from my ipad, but the problem still same, the box can not open not like when i run in my laptop (windows OS )

thanks

this the code

dhx.ui({
id:“w1”,
view:“window”,
body:“Movable”,
height :600,
width :600,
head:{ view:“toolbar”, type:“SubBar”, data:[
{type:“icon”, icon:“new” , click:“close_modal”, align: ‘right’}
]},
modal:true,
body : {template:""+name+""+Desc+""}

top:y, left:275,
move:true
});
x+=150; y+=150;
this.refresh(id);

return true
};

the box not show when i click the image on IPAD

Regards

Apriyanto


#14

We need the completed demo to reproduce the problem locally:

docs.dhtmlx.com/doku.php?id=othe … leted_demo


#15

thanks alexandra this the completed demo
Completed Demo.rar (1.39 MB)


#16

We have tested your demo on iPad. The window with image is shown when the pizza picture is clicked.


#17

what a browser that you used ?, i used on safary anda why when the pizza picture is clicked the mouse not shown they respond and the window with image not shown too ?

thanks


#18

i used on safary

we used the same. However, there is “x is not defined” error in the line 139 of your sample. Possibly, it relates. But your sample locally works fine.


#19

hi, alexandra
I am also having same issue which is exactly same, but different. can you solve this. Your explanation was really good.