Ik ben bezig met een imagegallery. Ik gebruik hiervoor een geweldige javascript applicatie GalleryView (http://spaceforaname.com/galleryview).
Dit is het script (minimaal):
<html>
<head>
<title>Galleryview 2.0 Example // appleton.me</title>
<script src="http://appleton.me/wp-content/themes/appleton.me 1.6/js/jquery.js"></script>
<script src="http://appleton.me/wp-content/themes/appleton.me 1.6/js/jquery.galleryview-2.0-pack.js"></script>
<script src="http://appleton.me/wp-content/themes/appleton.me 1.6/js/jquery.timers-1.1.2.js"></script>
<script src="http://appleton.me/wp-content/themes/appleton.me 1.6/js/jquery.easing.1.3.js"></script><!-- This is optional !-->
<link rel="stylesheet" href="http://appleton.me/wp-content/themes/appleton.me 1.6/css/galleryview.css" type="text/css" />
<script>
$(document).ready(function(){
$('#gallery').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 50,
frame_height: 50,
transition_speed: 350,
easing: 'easeInOutQuad',
transition_interval: 0
});
});
</script>
</head>
<body>
<h1>Gallery View 2.0 Example Page</h1>
<p>This page provides an example of the markup required to implement version 2.0 of the jQuery "<a href="http://plugins.jquery.com/project/galleryview">Gallery View</a>" plugin.</p>
<p>The plugin was created by <a href="http://spaceforaname.com/">Jack Anderson</a>.</p>
<ul id="gallery">
<li><span class="panel-overlay">This is an overlay</span><img src="http://appleton.me/wp-content/themes/appleton.me 1.6/images/01.jpg" /></li>
<li><span class="panel-overlay">This is another overlay</span><img src="http://appleton.me/wp-content/themes/appleton.me 1.6/images/02.jpg" /></li>
<li><span class="panel-overlay">This is yet another overlay</span><img src="http://appleton.me/wp-content/themes/appleton.me 1.6/images/03.jpg" /></li>
<li><span class="panel-overlay">This is an overlay too</span><img src="http://appleton.me/wp-content/themes/appleton.me 1.6/images/04.jpg" /></li>
</ul>
<p>Example provided by Andrew Appleton</p>
<p><a href="http://appleton.me/">← Back to appleton.me</a></p>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-2317601-3");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Ik zit alleen met een probleem: Ik wil mijn images welke staan opgeslagen in een mysql db tonen. Maar dit lukt me niet.
Dit heb ik geprobeerd te veranderen/toe te voegen:
<?php
$sql = "SELECT id,wk_nr,strip_nr,img_url FROM rs_cartoon_de_rechter ORDER BY id DESC";
$rs = mysql_query($sql);
while($row = mysql_fetch_array($rs)) {
print '<li><span class="panel-overlay">'.$row['strip_nr'].'</span>';
print '<img src="'.$row['img_url'].'" />';
print '</li>';
}
?>
Mijn vraag: is het uberhaupt mogelijk om hier d.m.v. mysql en php de afbeeldingen te tonen?
