G'day Criminals,
Voor mijn website ben ik bezig met een content slider,
Het enige probleem is dat ik die aan een database wil koppelen maar ik zou niet weten hoe en of dat kan.
Hebben jullie een idee?
Script:
PHP
<?php
include('connect.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Slider</title>
<link rel="stylesheet" type="text/css" href="jqueryui/css/smoothness/jquery-ui-1.7.2.custom.css">
<link rel="stylesheet" type="text/css" href="slider.css">
</head>
<body>
<div id="sliderContent" class="ui-corner-all">
<h2>Some well known galactic nebulae and their vital statistics</h2>
<div class="viewer ui-corner-all">
<div class="content-conveyor ui-helper-clearfix">
<div class="item">
<h2>Omega Nebula</h2>
<img src="images/omega.jpg" alt="Omega Nebula">
<dl class="details ui-helper-clearfix">
<dt>Distance from Earth:</dt><dd>5000 - 6000 lightyears</dd>
<dt>Diameter:</dt><dd>15 Lightyears</dd>
<dt>Mass:</dt><dd>800 solar masses</dd>
<dt>Catalogue number:</dt><dd>M17 / NGC6618</dd>
<dt>Discovered in:</dt><dd>1764</dd>
<dt>Discoverer:</dt><dd>Philippe Loys de Chéseaux</dd>
</dl>
</div>
<div class="item">
<h2>Crab Nebula</h2>
<img src="images/crab.jpg" alt="Crab Nebula">
<dl class="details ui-helper-clearfix">
<dt>Distance from Earth:</dt><dd>$info</dd>
<dt>Diameter:</dt><dd>11 lightyears</dd>
<dt>Mass:</dt><dd>10 solar masses</dd>
<dt>Catalogue number:</dt><dd>M1 / NGC1952</dd>
<dt>Discovered in:</dt><dd>1731</dd>
<dt>Discoverer:</dt><dd>John Bevis</dd>
</dl>
</div>
</div>
</div>
<div id="slider"></div>
</div>
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));
//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));
//config
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
slide: function(e, ui) {
conveyor.css("left", "-" + ui.value + "px");
}
};
//create slider
$("#slider").slider(sliderOpts);
});
</script>
</body>
</html>Hope you can help me!
