ik heb een foto-album gemaakt met een gedownload script, het volgende script:
http://webscripts.softpedia.com/script/Image-Galleries/GalleryView-67677.html
De namen van de afbeeldingen haal ik uit een database en met een loop plaats ik de foto's in de slider. Dit geeft geen problemen.
Vervolgens heb ik een listbox geplaatst met hierin alle afbeeldingen.
Nu is het de bedoeling dat bij het maken van een keuze uit de listbox de juiste afbeelding getoond wordt, ik zie alleen niet hoe ik dit voor elkaar kan krijgen.
Hieronder de (werkende) code van de slider en de (correct gevulde) listbox.
Het zal duidelijk zin dat de JavaScript functie selecteren() welke ik aan de listbox-onChange geplakt heb niet werkt.
Wie kan mij helpen om dit laatste linkje werkend te krijgen ?
Alvast bedankt.
http://webscripts.softpedia.com/script/Image-Galleries/GalleryView-67677.html
De namen van de afbeeldingen haal ik uit een database en met een loop plaats ik de foto's in de slider. Dit geeft geen problemen.
Vervolgens heb ik een listbox geplaatst met hierin alle afbeeldingen.
Nu is het de bedoeling dat bij het maken van een keuze uit de listbox de juiste afbeelding getoond wordt, ik zie alleen niet hoe ik dit voor elkaar kan krijgen.
Hieronder de (werkende) code van de slider en de (correct gevulde) listbox.
PHP:
<?php
include_once('../settings.php');
global $db_host, $db_user, $db_passw, $db_name;
mysql_connect($db_host, $db_user, $db_passw) or die(mysql_error());
mysql_select_db($db_name) or die(mysql_error());
$vandaag = date('Y-m-d', time());
mysql_connect($db_host, $db_user, $db_passw) or die(mysql_error());
mysql_select_db($db_name) or die(mysql_error());
$query = 'SELECT * FROM gebruikers WHERE (uit_dienst = "0000-00-00") or (uit_dienst <= "'.$vandaag.'") ORDER BY achternaam';
$smoelen = mysql_query($query) or die(mysql_error());
$aantal = mysql_num_rows($smoelen);
?>
<!-- Second, add the Timer and Easing plugins -->
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Third, add the GalleryView Javascript and CSS files -->
<script type="text/javascript" src="js/jquery.galleryview-3.0-dev.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.galleryview-3.0-dev.css" />
<!-- Lastly, call the galleryView() function on your unordered list(s) -->
<script type="text/javascript">
var boek = $(function(){
$('#myGallery').galleryView({
transition_speed: 1000, //INT - duration of panel/frame transition (in milliseconds)
transition_interval: 2000, //INT - delay between panel/frame transitions (in milliseconds)
easing: 'swing', //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
show_panels: true, //BOOLEAN - flag to show or hide panel portion of gallery
show_panel_nav: true, //BOOLEAN - flag to show or hide panel navigation buttons
enable_overlays: true, //BOOLEAN - flag to show or hide panel overlays
panel_width: 525, //INT - width of gallery panel (in pixels)
panel_height: 400, //INT - height of gallery panel (in pixels)
panel_animation: 'slide', //STRING - animation method for panel transitions (crossfade,fade,slide,none)
panel_scale: 'fit', //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, fit = scale image and preserve original aspect ratio)
overlay_position: 'bottom', //STRING - position of panel overlay (bottom, top)
pan_images: true, //BOOLEAN - flag to allow user to grab/drag oversized images within gallery
pan_style: 'drag', //STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position
pan_smoothness: 15, //INT - determines smoothness of tracking pan animation (higher number = smoother)
start_frame: 1, //INT - index of panel/frame to show first when gallery loads
show_filmstrip: true, //BOOLEAN - flag to show or hide filmstrip portion of gallery
show_filmstrip_nav: true, //BOOLEAN - flag indicating whether to display navigation buttons
enable_slideshow: true, //BOOLEAN - flag indicating whether to display slideshow play/pause button
autoplay: false, //BOOLEAN - flag to start slideshow on gallery load
show_captions: true, //BOOLEAN - flag to show or hide frame captions
filmstrip_size: 7, //INT - number of frames to show in filmstrip-only gallery
filmstrip_style: 'scroll', //STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary)
filmstrip_position: 'bottom', //STRING - position of filmstrip within gallery (bottom, top, left, right)
frame_width: 56, //INT - width of filmstrip frames (in pixels)
frame_height: 80, //INT - width of filmstrip frames (in pixels)
frame_opacity: 0.5, //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
frame_scale: 'crop', //STRING - cropping option for filmstrip images (same as above)
frame_gap: 5, //INT - spacing between frames within filmstrip (in pixels)
show_infobar: true, //BOOLEAN - flag to show or hide infobar
infobar_opacity: 1 //FLOAT - transparency for info bar
});
});
function selecteren(deze) {
var ret = boek.navSearch;
alert(ret);
// boek.setPositions;
}
</script>
<br>
<select class="gv_navSearch" id="keuze" onChange="selecteren(this)">
<?php
while ($smoel = mysql_fetch_array($smoelen)) {
echo'<option id="id_'.$smoel['id'].'" value="'.$smoel['id'].'">'.$smoel['achternaam'].', '.$smoel['voornaam'].'</option>';
}
?>
</select>
<br><br>
<ul id="myGallery">
<?php
mysql_data_seek($smoelen, 0);
while ($smoel = mysql_fetch_array($smoelen)) {
if (($smoel['voornaam'] != '') and ($smoel['achternaam'] != ''))
$naam = $smoel['voornaam'].'<br>'.$smoel['tussenv'].' '.$smoel['achternaam'];
else $naam = $smoel['loginnm'];
if ($smoel['email_zaak'] != '') $mail = $smoel['email_zaak'];
else
if (($smoel['email_prive'] != '') and ($smoel['toon_mail_prive'] == 1))
$mail = $smoel['email_prive'];
else $mail = 'Niet beschikbaar';
if ($smoel['tel_zaak'] != '') $tel = $smoel['tel_zaak'];
else
if (($smoel['tel_prive'] != '') and ($smoel['toon_tel_prive'] == 1))
$tel = $smoel['tel_prive'];
else $tel = 'Niet beschikbaar';
if ($smoel['foto'] == '') $foto = 'default.png'; else $foto = $smoel['foto'];
$description = 'email : '.$mail.'<br>';
$description .= 'telefoon : '.$tel;
echo'
<li><img data-frame="../smoelenboek/'.$foto.'" src="../smoelenboek/thumbs/'.$foto.'" title="'.$naam.'" data-description="'.$description.'" />';
}
?>
</ul>Het zal duidelijk zin dat de JavaScript functie selecteren() welke ik aan de listbox-onChange geplakt heb niet werkt.
Wie kan mij helpen om dit laatste linkje werkend te krijgen ?
Alvast bedankt.
)
