I must preface this by saying I am a .NET developer by trade, but have recently taken a position with a company using PHP for their applications. It has been a learning experience, so please take it easy on me, and let me know if i have not followed style guidelines for posting a question.
The developer who designed and wrote this code quit recently, and I am currently the only developer we have. I know this is a really poor method for implementing this. It is incredibly poorly designed, and is written 100% inline, with no framework whatsoever. There is also no documentation, at all. I am in the process of straightening it all out and migrating the code to a Symfony platform, but for right now I have to keep this version up and running.
This <a> tag is embedded into the column in a phpGrid, and the fancybox is loaded in functions.php, which is an include from the fancyboxTest.php, which the below code is also in.
As it is written, on click it opens the fancybox as designed, but the autoScale is not working, it opens in a random size, likely because it is set to autosize, inline, and a useless scrollbar is present. I believe I need to adjust the dimensions of the fancybox overlay, but I have not had any luck doing so.
Is there a better way to do this, rather then call my javascript function using jQuery from the <a> tag, or am i simply missing something in the css? I know I cannot override the styles which are written inline, because of the rules of specificity. I have gone through numerous blog posts and articles on
- http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
- http://reference.sitepoint.com/css/specificity
which were notated in quite a few questions on this site, such as Importance of css stylesheet hierarchy
I've used generic variables, for obvious reasons.
This is the column in the grid, which the fancybox is called from:
<?php
include "../include/file1.php";
include "../include/file2.php";
include "../include/file3.php";
$db_conf = array();
$db_conf["type"] = "mysqli";
$db_conf["server"] = DB_HOST;
$db_conf["user"] = DB_USER;
$db_conf["password"] = DB_PASS;
$db_conf["database"] = DB_NAME;
$g = new jqgrid($db_conf);
$col = array();
$col["title"] = "Id";
$col["name"] = "id";
$col["width"] = "40";
$col["hidden"] = false;
$col["editable"] = false;
$col["align"] = "left";
$col["search"] = true;
$cols[] = $col;
$col = array();
$col["title"] = "Description";
$col["name"] = "description";
$col["width"] = "200";
$col["hidden"] = false;
$col["editable"] = false;
$col["align"] = "left";
$col["search"] = true;
$cols[] = $col;
$col = array();
$col["title"] = "Objects";
$col["name"] = "onjects";
$col["width"] = "100";
$col["hidden"] = false;
$col["editable"] = false;
$col["align"] = "left";
$col["search"] = true;
$cols[] = $col;
$col = array();
$col["title"] = "Image";
$col["name"] = "image";
$col["width"] = "20";
$col["hidden"] = true;
$col["editable"] = false;
$col["align"] = "left";
$col["search"] = false;
$cols[] = $col;
$col = array();
$col["title"] = "Equipment";
$col["name"] = "equipment";
$col["width"] = "40";
$col["align"] = "center";
$col["search"] = false;
$col["sortable"] = false;
/** in this column the link opens in fancybox, but is not the proper size **/
$col["default"] = "<a class=\"fancybox fancybox.iframe\" href=\"folder1/file_details.php?id={image}\"><img height=35 src='../../data/folder2/{image}.jpg'></a>";
$cols[] = $col;
/** THIS IS THE COLUMN IN QUESTION **/
$col = array();
$col["title"] = "Location List";
$col["name"] = "locations";
$col["width"] = "35";
$col["align"] = "center";
$col["search"] = false;
$col["sortable"] = false;
/** to override the fancybox inline style I am trying to use jQuery **/
$col["default"] = "<a href=\"#div\"><img height=35 src='image.jpg'>ORDER</a>";
$cols[] = $col;
/** END **/
$grid["sortname"] = 'id';
$grid["sortorder"] = "asc";
$grid["rowNum"] = 300;
$grid["height"] = "";
$grid["width"] = 1000;
$grid["autowidth"] = true;
$g->set_options($grid);
$g->set_actions(array(
"add"=>false,
"inlineadd"=>false,
"edit"=>false,
"delete"=>false,
"rowactions"=>false,
"export"=>true,
"autofilter" => true,
"search" => false
)
);
$g->select_command = "**{my_sql_call}**";
$g->table = "correct_table";
$g->set_columns($cols);
$out = $g->render("list1");
?>
<?php include("file4.php");?>
</head>
<body>
<?php
include("file5.php");
?>
<div class="mainrow">
<div >
<?php echo $out?>
</div>
</div>
<?php
</body>
</html>
the javascript function:
function openFancybox(div) {
$(this).fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href': #div
}).click();
}
and the jQuery:
$('a[href=#div]').each(openFancybox);
I have gone through a dozen or more questions within this forum, very thoroughly. So far the one I found that made the most sense, but ultimately the fix which helped this person was not the key to solving my problem, was Open fancybox from function
I have also looked at http://fancyapps.com/fancybox/ and http://fancybox.net/howto
Neither of which helped me solve this problem, any assistance you could provide will be greatly appreciated!
