- Ariën - op 18/10/2018 15:39:38
Op een of andere manier kom ik niet weg met dat.
Ik heb het gedownload en probeer het werkend in een pagina te krijgen maar zie niks.
Link gekopieerd
Dan gaat er wat mis, volgens mijn glazen bol die mistig is.
Link gekopieerd
Dit had ik gevonden om te testen.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>
<a href="#divForm" id="btnForm">Load Form</a>
<div id="divForm" style="display:none">
<form action="tbd">
File: <input type="file" /><br /><br />
<input type="submit" />
</form>
</div>
<script type="text/javascript">
$(function(){
$("#btnForm").fancybox();
});
</script>
</body>
</html>
Wilde iets zoeken via google om een table te zien in fancybox wat jij aangaf maar daar vind ik helaas geen voorbeelden van.
Link gekopieerd
Het gaat vooral om de HTML-content. Of je specifiek een afbeelding, tabel of een lap tekst toont is niet van van belang.
Link gekopieerd
@Ariën , ik heb het nu werkend met dat ene voorbeeld van mij met die table vanuit de database, maar als ik in die fancybox op een volgende pagina klik springt hij uit de fancybox, ook als ik iets in dat zoek vak type en bevestig met enter.
Hoe krijg ik dat opgelost? Moet wel even erbij zeggen dat het in een form zit, weet niet of dat er iets toe doet.
Hier is mijn code wat ik als test ben aan het doen, dus het verdiend echt geen schoonheids prijs, wil alleen kijken hoe ik die table werkend krijg in fancybox.
<!DOCTYPE html>
<html lang="en">
<head>
<title>fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Add fancybox3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected] /dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected] /dist/jquery.fancybox.min.js"></script>
<style>
body{width:1100px;font-family:arial;letter-spacing:1px;line-height:10px;}
.tbl-qa{width: 100%;font-size:0.9em;background-color: #f5f5f5;}
.tbl-qa th.table-header {padding: 2px;text-align: left;padding:5px;}
.tbl-qa .table-row td {padding:10px;background-color: #FDFDFD;vertical-align:top;}
.button_link {color:#FFF;text-decoration:none; background-color:#428a8e;padding:10px;}
#keyword{border: #CCC 1px solid; border-radius: 4px; padding: 7px;background:url("demo-search-icon.png") no-repeat center right 7px;}
.btn-page{margin-right:10px;padding:5px 10px; border: #CCC 1px solid; background:#FFF; border-radius:4px;cursor:pointer;}
.btn-page:hover{background:#F0F0F0;}
.btn-page.current{background:#F0F0F0;}
</style>
</head>
<body>
<?php
$search_keyword = '';
if(!empty($_POST['search']['keyword'])) {
$search_keyword = $_POST['search']['keyword'];
}
$sql = 'SELECT * FROM PrepInstelWaarden WHERE Tag LIKE :keyword OR Onderdeel LIKE :keyword ORDER BY id ASC';
/* Pagination Code starts */
$per_page_html = '';
$page = 1;
$start=0;
if(!empty($_POST["page"])) {
$page = $_POST["page"];
$start=($page-1) * ROW_PER_PAGE;
}
$limit=" limit " . $start . "," . ROW_PER_PAGE;
$pagination_statement = $pdo_conn->prepare($sql);
$pagination_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pagination_statement->execute();
$row_count = $pagination_statement->rowCount();
if(!empty($row_count)){
$per_page_html .= "<div style='text-align:center;margin:20px 0px;'>";
$page_count=ceil($row_count/ROW_PER_PAGE);
if($page_count>1) {
for($i=1;$i<=$page_count;$i++){
if($i==$page){
$per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page current" />';
} else {
$per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page" />';
}
}
}
$per_page_html .= "</div>";
}
$query = $sql.$limit;
$pdo_statement = $pdo_conn->prepare($query);
$pdo_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pdo_statement->execute();
$result = $pdo_statement->fetchAll();
?>
<div style="display: none;" id="hidden-content">
<form name='frmSearch' action='' method='post'>
<h3>Instel waarde Preparation</h3>
<div style='text-align:right;margin:20px 0px;'><input type='text' name='search[keyword]' value="<?php echo $search_keyword; ?>" id='keyword' maxlength='25'></div>
<table class='tbl-qa'>
<thead>
<tr>
<th class='table-header' width='15%'>Tag</th>
<th class='table-header' width='30%'>Onderdeel</th>
<th class='table-header' width='15%'>Min. Waarden</th>
<th class='table-header' width='15%'>Max. Waarden</th>
<th class='table-header' width='15%'>Richt Waarden</th>
</tr>
</thead>
<tbody id='table-body'>
<?php
if(!empty($result)) {
foreach($result as $row) {
?>
<tr class='table-row'>
<td><?php echo $row['Tag']; ?></td>
<td><?php echo $row['Onderdeel']; ?></td>
<td><?php echo $row['Min_waarde']; ?></td>
<td><?php echo $row['Max_waarde']; ?></td>
<td><?php echo $row['Grens_waarde']; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<?php echo $per_page_html; ?>
</form>
</div>
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Trigger the fancybox
</a>
</body>
</html>
Link gekopieerd
Kan je niet via de lightbox de URL inladen via AJAX.
Link gekopieerd
Eerlijk gezegd snap ik niet wat je bedoeld.
Link gekopieerd
Jup heb hem werkend op die manier en doet ook zijn werk wat ik hoopte.
Link gekopieerd
@Ariën, klein vraagje hierover nog.
Link gekopieerd
