My calendar image is positioned below the text box of my datepicker. How can I solve this misalignment.
This is a screenshot of my screen: ! 1: http://i.stack.imgur.com/3uifN.jpg
See the jsfiddle here: jsfiddle.net/njiterry/yNw3C/8477
This is my jsp code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Country Visibility</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var mydata = [
{ Sel: true, Country : "Germany", Capital : "Berlin", Date: "05-09-2014"},
{ Sel: true, Country : "France", Capital : "Paris", Date: "05-09-2014" },
{ Sel: true, Country : "Cameroon", Capital : "Yaounde", Date: "06-09-2014" },
{ Sel: true, Country : "Gabon", Capital : "Libreville", Date: "06-09-2014" },
{ Sel: true, Country : "Holland", Capital : "Amsterdam", Date: "07-09-2014" },
{ Sel: true, Country : "Japan", Capital : "Tokyo", Date: "08-09-2014" },
{ Sel: true, Country : "Italy", Capital : "Rome" , Date: "09-09-2014"},
{ Sel: true, Country : "Spain", Capital : "Madrid" , Date: "09-09-2014"},
{ Sel: true, Country : "England", Capital : "London" , Date: "10-09-2014"},
{ Sel: true, Country : "US", Capital : "Washington D.C." , Date: "12-09-2014"}
];
var grid = jQuery("#pays_grid");
var initDateWithButton = function (elem) {
if (/^\d+%$/.test(elem.style.width)) {
// remove % from the searching toolbar
elem.style.width = '';
}
// to be able to use 'showOn' option of datepicker in advance searching dialog
// or in the editing we have to use setTimeout
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'dd-mm-yy',
showOn: 'button',
changeYear: true,
changeMonth: true,
buttonImageOnly: true,
buttonImage: "images/calendar.gif",
buttonText: "Select date",
onSelect: function (dateText, inst) {
if (inst.id.substr(0, 3) === "gs_") {
grid[0].triggerToolbar();
}
else {
// to refresh the filter
$(inst).trigger("change");
}
}
});
$(".ui-datepicker-trigger").css({
position: "relative",
marginLeft: "1px",
marginTop: "0px",
});
}, 100);
};
grid.jqGrid({ //set your grid id
data: mydata, //insert data from the data object we created above
datatype: 'local',
height: 230,
autoheight: true,
width: 800,
rowNum: 10,
rowList: [1, 5, 10],
colNames:['Sel.','Id','Name', 'Date'], //define column names
colModel:[
{name: 'Sel', align: 'center', sortable: false, width: 25, search: false, editable: true, edittype: 'checkbox',
editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
{name:'Country', index:'Country', key: true, width:50, align:'center'},
{name:'Capital', index:'Capital', width:100, align:'center'},
{name: 'Date', index: 'Date', align: 'center', width: 100}
], //define column models
pager: '#pager', //set your pager div id
sortname: 'Country', //the column according to which data is to be sorted; optional
viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
sortorder: "asc", //sort order; optional
sortname: 'Country',
shrinkToFit: true,
forceFit: true,
caption: "Country Overview", //title of grid
loadComplete: function() {
grid.jqGrid('setColProp', 'Date', {
sorttype: 'date', editable: true,
editoptions: { dataInit: initDateWithButton, size: 11 },
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateWithButton,
// size: 8, // for the advanced searching dialog
// attr: {size: 8} // for the searching toolbar
}
});
grid.jqGrid('filterToolbar', {autoSearch: true});
}
}).navGrid('#truck_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true});
});
</script>
</head>
<body>
<table id="pays_grid"></table>
<div id="pager"></div>
</body>
</html>
I've tried looking at similar questions here on Stack Overflow but I can't get the trigger image to appear inline with the input.
It seems to me that you should use
.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select,
.ui-jqgrid .ui-search-table .ui-search-input > img {
vertical-align: middle;
display: inline-block;
}
See http://jsfiddle.net/yNw3C/8486/
add display inline style to your text box that contains date
then adjust the margin-top of your date picker image to make it look nice and aligned with your text box.
check here: http://jsfiddle.net/saxenaabhi6/yNw3C/8479/
#gs_Date{
display:inline
}
Instead of setting
position='relative'
set
position='absolute'
and adjust top and left accordingly. Here's a fiddle:
http://jsfiddle.net/ey170t1z/1/
in the CSS:
.ui-datepicker-trigger {
vertical-align: top;
height: 24px; /* the same of textbox */
}
Related
i have a requirement to show a confirmation message before editing a cell. User can either choose to use a auto-calculated value or can enter new value in the Col 2. If user chose to use the auto-calculated value, next cell (Col 3) should be put in edit mode.
I am using code shown below, so when user tabs thru Col 1 to Col 2, it displays a confirmation dialog box. When user clicks Cancel on the dialog box, the focus remains in Col 2 and if user clicks on Ok focus is set to Col 3.
The problem here is that, after closing the dialog box, when i try to type in the textbox, the first keystroke is ignored and nothing happens. However subsequent keystrokes work fine.
Strange thing is that, if i click directly in Col 2, everything works fine (first keystroke is not ignored). Issue happens only when i navigate from Col 1 to Col 2 by pressing tab.
Please help me fix this issue.
$(gridId).jqGrid({
colNames: ["Id", "Name", "Col 1", "Col 2", "Col 3"],
colModel: [
{ name: "Id", index: "Id", hidden: true, key: true, formatter: 'text' },
{ name: "Name", index: "Name", width: '165px', align: 'left', resizable: false, editable: false, classes: 'non-editable', formatter: 'text' },
{ name: "Col1", index: "Col1", width: '60px' },
{ name: "Col2", index: "Col2", width: '60px' },
{ name: "Col3", index: "Col3", width: '60px' }
],
hidegrid: false,
rowNum: 50,
rowList: [10, 20, 50, 100],
scroll: true,
loadonce: true,
sortorder: "asc",
height: 370,
datatype: 'json',
viewrecords: true,
mtype: 'GET',
ignoreCase: true,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
url: gridUrl,
editurl: '#',
cellEdit: true,
cellsubmit: 'clientArray',
footerrow: true,
multiselect: false,
//autowidth: true,
cmTemplate: {
//Default col model properties, if not using default, override in the colmodel
resizable: false,
edittype: "text", //for checkbox, override in the colmodel
align: "right",
editable: true,
formatter: 'number', //for text, override in the colmodel
formatoptions: { decimalSeparator: ".", thousandsSeparator: "", decimalPlaces: 1, defaultValue: '', align: "right" },
editrules: { number: true} //Setting numeric validation for all columns as all the editable columns are numbers
},
beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
var grid = $(this);
if (prevCellName != cellname && cellname == "Col2") {
var autoCalculated = 123;
var response = confirm("The Col 2 auto-calculated value is " + autoCalculated + ". Would you like to use this value?");
if (response == true) {
setTimeout(function () {
grid.jqGrid('setCell', rowid, "Col2", autoCalculated);
}, 10);
setTimeout(function () {
grid.jqGrid('editCell', iRow, iCol + 1, true);
}, 20);
}
}
prevCellName = cellname;
}
});
I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. Everything seemed to work perfectly until I wanted to add a row to my grid. One of the columns had a parameter key = true which is my id for the rows. When I try to add new row, the grid changes my id into jpg1. The others columns are fine. Below is the code I'm using:
$("#jqGrid").jqGrid({
datatype: "local",
data: myData,
editurl: "clientArray",
colModel: [
{
label: 'Kod',
name: 'Kod',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Firma',
name: 'Firma',
width: 120,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true,
sorttype: 'string'
},
{
label: 'Adres',
name: 'Adres',
width: 80,
editoptions: {size: 40},
editable: true
},
{
label: 'Miasto',
name: 'Miasto',
width: 80,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true
}
],
height: 'auto',
autowidth: true,
shrinkToFit: false,
forceFit: false,
autoencode: true,
viewrecords: true,
caption: "Title",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
sortname: 'Kod',
sortorder: 'asc',
rowNum: 5,
rowList: [5, 10, 20, "10000:All"],
ondblClickRow: function(rowid) {
$("#jqGrid").jqGrid('editGridRow', rowid,
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
}
});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: false, refresh: true, view: true, cloneToTop: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
reloadAfterSubmit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
zIndex:100
},
// options for the View Dialog
{
width: '100%'
});
I'm attaching a screenshot that shows a problem:
Photo
The data I use is a file parsed into JSON array via Papaparse.js plugin.
EDIT:
I've added the test data if somebody would like to test the code.
var myData = [];
myData.push(
{
Kod: 1.1,
Firma: 'Hutchinson',
Adres: '5th Avenue',
Miasto: 'Wroclaw'
},
{
Kod: 2.1,
Firma: 'BMW',
Adres: '6th Avenue',
Miasto: 'Warsaw'
});
I will be grateful for any help.
If you need the grid only for local editing, you can consider just remove key: true property to solve the problem. It's the way, which I would recommend you. You can include id property in the input data which will be used as value of rowid (id of <tr> elements).
Alternatively you can change the block "options for the Add Dialog" to the following
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
onclickSubmit: function (options, postdata, frmoper) {
// save Kod in some other parameter
return {myKod: postdata.Kod};
},
afterSubmit: function (jqXHR,postdata, frmoper) {
// restore the correct value
postdata.Kod = postdata.myKod;
// inform jqGrid that it was not an error
return [true];
}
},
You still don't would be able to change the id of the row in the way.
By the way you wrote that you use jqGrid 4.7.1. I want remind you that jqGrid 4.7.0 is the last version which is free. It's the reason why I started free jqGrid project which still free. You can get it here (see readme and wiki).
The demo shows an example of the above code fixes using free jqGrid 4.8.
The buttons on my jqGrid won't show (back, forward, first page, last page, search, etc...).
Image:
Code:
<h3><?php echo $title?></h3>
<?php $lastbids = SchedulesData::GetLatestBids(); print_r($lastbids);?>
<link rel="stylesheet" type="text/css" media="screen" href="website/lib/js/jqgrid/css/ui.jqgrid.css" />
<script src="website/lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="website/lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<table id="grid"></table>
<div id="pager"></div>
<br />
<script type="text/javascript">
$("#grid").jqGrid({
url: 'website/schedules/schedulegrid',
datatype: 'json',
mtype: 'GET',
colNames: ['Code', 'Flight Num', 'Departure', 'Arrival', 'Aircraft', 'Distance', 'Route',
'Bid'],
colModel : [
{index: 'code', name : 'code', width: 40, sortable : true, align: 'center', search: 'true', searchoptions:{sopt:['eq','ne']}},
{index: 'flightnum', name : 'flightnum', width: 65, sortable : true, align: 'center', searchoptions:{sopt:['eq','ne']}},
{index: 'depicao', name : 'depicao', width: 60, sortable : true, align: 'center',searchoptions:{sopt:['eq','ne']}},
{index: 'arricao', name : 'arricao', width: 60, sortable : true, align: 'center',searchoptions:{sopt:['eq','ne']}},
{index: 'a.name', name : 'aircraft', width: 100, sortable : true, align: 'center',searchoptions:{sopt:['in']}},
{index: 'distance', name : 'distance', width: 100, sortable : true, align: 'center', searchoptions:{sopt:['lt','le','gt','ge']}},
{index: 'route', name : 'route', width: 100, sortable : true, align: 'center',searchoptions:{sopt:['in']}},
{index: '', name : '', width: 100, sortable : true, align: 'center', search: false}
],
pager: '#pager', rowNum: 25,
sortname: 'flightnum', sortorder: 'asc',
viewrecords: true, autowidth: true,
height: '100%'
});
jQuery("#grid").jqGrid('navGrid','#pager',
{edit:false,add:false,del:false,search:true,refresh:true},
{}, // edit
{}, // add
{}, //del
{multipleSearch:true} // search options
);
function showroute(schedule_id)
{
$('#jqmdialog').jqm({
ajax:'website/schedules/viewmap?type=schedule&id='+schedule_id
}).jqmShow();
}
function addbid(id)
{
$.post("http://website/schedules/addbid", { id: id },
function()
{
$("#grid").trigger("reloadGrid");
}
);
}
function removebid(id)
{
$.post("http://website/schedules/removebid", { id: id },
function()
{
$("#grid").trigger("reloadGrid");
}
);
}
</script>
I looked at some other posts on stack overflow, but none of them seemed to work for me. How can I get the buttons to show up?
You have to include some jQuery UI CSS file. For example:
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
See example in the documentation.
I'm trying to implement a custom button on a jqGrid with hide and show functionalities. I basically want to show the button if the grid is empty otherwise show.
I have implemented it with the "reccount" method from jqGrid to test if the grid is empty. However i'm not sure if i'm doing it right.
to the end of the code is where i declared the reccount. see "var count".
Thanks in advance.
$("#sessioninfoGrid"+row_id).jqGrid({
url:'/starburst/sessioninfoes/jsonlistbylectureoutline/'+row_id,
datatype: "json",
colNames: ['Session No.','Date','Start Time','End Time','Duration/Hours','Session Type','Topic','Room'],
colModel: [
{name:'sessionNumber',index:'SessionNumber', width:40, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'},
{name:'sessionDate',index:'sessionDate', width:100, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text',
editoptions: {
dataInit: function(element) {
$(element).datepicker({dateFormat: 'DD, MM dd, yy'})
}
}
},
{name:'starttime',index:'starttime', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'
},
{name:'endtime',index:'endtime', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'
},
{name:'durationPerSession',index:'durationPerSession', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'
},
{name:'sessionType',index:'sessionType', width:50, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'select',
editoptions:{value:{}}
},
{name:'topic',index:'topic', width:200, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'text',
editoptions: {
dataInit: function(element) {
$(element).width(300)
}
}
},
{name:'room',index:'room', width:35}
],
rowNum:10,
autowidth: true,
pager: sessioninfoPager_id,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
editurl: '<c:url value="/sessioninfoes/update"/>',
caption:"Session Info",
emptyrecords: "Empty Records"
});
$("#sessioninfoGrid"+row_id).jqGrid('navGrid',"#"+sessioninfoPager_id,{edit:false,add:false,del:false,search:true},{ },{ },{ },
{
sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
}
);
$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id,
{
caption:"Add",
buttonicon:"ui-icon-plus",
onClickButton: addSessionInfoRow,
position: "last",
title:"Add New Session Info",
cursor: "pointer"
}
);
$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id,
{
caption:"Edit",
buttonicon:"ui-icon-pencil",
onClickButton: editSessionInfoRow,
position: "last",
title:"Edit Session Info",
cursor: "pointer"
}
);
var count= $("#sessioninfoGrid"+row_id).jqGrid('getGridParam','reccount');
if (count == 0){
$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id,
{
caption:"Load Sessions",
buttonicon:"ui-icon-plusthick",
onClickButton: function(){
$.post('<c:url value="/sessioninfoes/autocreate/"/>'+row_id,function(data){
$("#sessioninfoGrid"+row_id).trigger("reloadGrid");
});
},
position: "last",
title:"Load Session Infos",
cursor: "pointer"
}
);
}
The problem with your code is that the grid is loaded asynchronously, which means your call to reccount can happen before the grid is populated, so it returns 0 even though the grid is filled with data a moment later.
One solution is to dynamically hide your button based on whether any data was populated by a server request. For example:
$("#sessioninfoGrid"+row_id).jqGrid({
...
loadComplete: function() {
var count = jQuery("#sessioninfoGrid"+row_id)
.jqGrid('getGridParam','reccount');
if (count === 0){
jQuery('button[title="Load Session Infos"]').hide();
} else {
jQuery('button[title="Load Session Infos"]').show();
}
},
...
I am trying to use flexigrid plugin for jquery, the problem is that I also want to use the plugin fancybox, and this plugin uses jQuery 1.4.3, but flexigrid doesn't seem to work with that version of jquery.
When I roll back to the old jquery version that comes with flexigrid the grid does work but fancybox doesn't.
This is the code i am using:
$("#grid1").flexigrid
(
{
url: 'php/get.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
{display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
{display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : doAction},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : doAction},
{separator: true},
{name: 'Activate', bclass: 'activate', onpress : doAction},
{separator: true},
{name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'XXX',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
</script>
And the php response looks like this:
{
page: 1,
total: 3,
rows: [
{id:'28',cell:['28','test','test','test','1']},
{id:'27',cell:['27','test','test','test','1']},
{id:'26',cell:['26','etrer','ter','trt','0']}]
}
I am using firebug and it doesn't show any js error.
Is there a way to use flexigid with jquery 1.4.3?
Try rendering your JSON using double quotes, not single quotes.
Both plugins seems to work with v1.3.2
I think I have both plugins working with jQuery 1.6.1. Obviously it depends on both flexigrid and fancybox jQuery plugins and an example JSON file that I have called flexigrid.json. If you download those plugins and make sure the src and href links to the correct locations for the JavaScript and CSS and create a file called flexigrid.json with the following content:
{
"page": 1,
"total": 3,
"rows": [
{"id":28,"cell":[28,"test","test","test",1]},
{"id":27,"cell":[27,"test","test","test",1]},
{"id":26,"cell":[26,"etrer","ter","trt",0]}]
}
Note: The JSON in your example is not valid (as #Josh pointed out already). You can run in through an online parser to see the errors.
Here is the example page with both plugins:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="flexigrid/js/flexigrid.pack.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="flexigrid/css/flexigrid.pack.css"/>
<script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"/>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript">
$(function(){
function doAction() {}
$("#grid1").flexigrid({
url: 'flexigrid.json',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
{display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
{display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : doAction},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : doAction},
{separator: true},
{name: 'Activate', bclass: 'activate', onpress : doAction},
{separator: true},
{name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'XXX',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
});
$("a#example1").fancybox({
'titleShow' : false
});
$("a#example2").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});
$("a#example3").fancybox({
'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<table id="grid1"><tr><td></td></tr></table>
<p>Different animations - 'fade', 'elastic' and 'none'<br />
<a id="example1" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">
<img alt="example1" src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" />
</a>
<a id="example2" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg">
<img alt="example2" src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg" />
</a>
<a id="example3" href="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">
<img alt="example3" src="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a_m.jpg" />
</a>
</p>
</body>
</html>
Note: This will not work locally when testing in Chrome 13 due to the Same origin policy security restriction. You can see the error in the console Origin null is not allowed by Access-Control-Allow-Origin. You will need to serve to the example page and JSON from a proper web server.
Hope this helps.
I am working on the same issue. I found the below links helpful to get started.
Core issue - from groups.google.com
"As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double- quotes. For details on the JSON format, see http://json.org/.
Basically you have to be careful with your json now, and ensure its formatted correctly. I would guess its related to this. Check the json.org site and check your JSON to make sure its correct."
http://simonwillison.net/2006/oct/11/json/
http://jsonformatter.curiousconcept.com/#jsonformatter