Twee vragen mbt dynamische jquery slider
Ik ben niet zo ervaren met php waardoor ik nu echt vastzit en ik hoop dat jullie me verder kunnen helpen.
Ik heb een jquery slider (techniek = flexslider) waarvan ik de content dynamisch wil laden.
Dus: knop A geeft afbeeldingen A, knop B geeft afbeeldingen B.
Hierbij loop ik tegen twee problemen aan.
De eerste:
De afbeeldingen haal ik op via een combinatie van ajax en php.
De knop bevat de gallery id (welke foto's) waarde, ajax geeft dit door aan een php script die vervolgens de juiste afbeeldingen ophaalt en in de juiste vorm weer output.
Nu is mijn probleem dat mijn array altijd eindigt met een 0 (zie hieronder de array print). Hoe verwijder/filter ik deze?
Array ( [0] => stdClass Object ( [gid] => 5 [name] => .... "width";i:100;s:6:"height";i:75;}} ) ) 0
Het tweede probleem waar ik tegenaan loop is een klassieke. Hoe/waar initialiseer ik de jquery opnieuw? Als de pagina voor het eerst laadt, werkt de slider. Zodra ik de content wijzig, initialiseert het niet opnieuw.
Hieronder de code:
De HTML:
<div class="flexslider">
<ul class="slides">
Code (php)
1
<?php view_fotos(); ?>
</ul>
</div>
In de footer:
Let op: in de footer probeer ik al het initialiseren op 2 manieren, 1 in de succes van Ajax (zie vierde) en 1 via een speciaal ajax.complete functie.
Beiden zouden de oplossing moeten zijn maar beiden doen het niet. Wat doe ik fout?
jQuery(function() {
jQuery('.but').click(function(){
if(jQuery(this).hasClass('one')) {
var data = {
action: 'view_fotos',
galleryID: 7
};
jQuery.post(ajaxurl, data, function(response) {
jQuery('.flexslider').html(response);
});
} else if(jQuery(this).hasClass('two')) {
var data = {
action: 'view_fotos',
galleryID: 5
};
jQuery.post(ajaxurl, data, function(response) {
jQuery('.flexslider').html(response);
});
} else if(jQuery(this).hasClass('tre')) {
var data = {
action: 'view_fotos',
galleryID: 6
};
jQuery.post(ajaxurl, data, function(response) {
jQuery('.flexslider').html(response);
});
} else {
var data = {
action: 'view_fotos',
galleryID: 8
};
jQuery.post(ajaxurl, data, function(response) {
jQuery('.flexslider').html(response);
jQuery('.flexslider').flexslider({
animation: "slide",
animationLoop: true
});
});
}
jQuery(document).ajaxComplete(function() {
jQuery('.flexslider').flexslider({
animation: "slide",
animationLoop: true
});
});
return false;
});
jQuery('.flexslider').flexslider({
animation: "slide",
animationLoop: true
});
});
De php:
add_action( 'wp_ajax_view_fotos', 'view_fotos' );
add_action( 'wp_ajax_nopriv_view_fotos', 'view_fotos' );
function view_fotos(){
// find site path
if ( !defined('ABSPATH') )
require_once( dirname(__FILE__) . '/../ngg-config.php');
//access wp database
global $wpdb;
// set foto options in var
$ngg_options = get_option ('ngg_options');
//set url in var
$siteurl = site_url();
// get the gallery id from ajax
$galleryID = intval( $_POST['galleryID'] );
//set een default als geen gallery id wordt gegeven
if ($galleryID == null) {
$galleryID = 7;
} else {
$galleryID = intval( $_POST['galleryID'] );
}
// get the pictures
if ($galleryID == 0) {
$thepictures = $wpdb->get_results("SELECT t.*, tt.* FROM $wpdb->nggallery AS t INNER JOIN $wpdb->nggpictures AS tt ON t.gid = tt.galleryid WHERE tt.exclude != 1 ORDER BY tt.{$ngg_options['galSort']} {$ngg_options['galSortDir']} ");
} else {
$thepictures = $wpdb->get_results("SELECT t.*, tt.* FROM $wpdb->nggallery AS t INNER JOIN $wpdb->nggpictures AS tt ON t.gid = tt.galleryid WHERE t.gid = '$galleryID' AND tt.exclude != 1 ORDER BY tt.{$ngg_options['galSort']} {$ngg_options['galSortDir']} ");
}
if (is_array ($thepictures)){
foreach ($thepictures as $picture) {
$picurl = $siteurl."/".$picture->path."/".$picture->filename;
echo '<li>';
echo '<img src="'.$picurl.'" width="800" height="400">';
echo '</li>';
}
}
}
Gewijzigd op 12/03/2013 13:17:44 door Marjolein Boer
Er zijn nog geen reacties op dit bericht.