Twiiter Bootstrap carrousel rendre dynamique avec PHP
Je suis en train de faire un carrousel qui utilise Twitter Bootstrap par défaut de JavaScript et de CSS, mais les images doivent être récupérées à partir de la base de données MySQL.
Le code HTML du carrousel que je suis en train de faire dynamique avec php comme ceci:
<div class="carousel-inner">
<div class="active item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Le résultat final pour les fichier PHP que j'attends, c'est comme cela
<div class="carousel-inner">
<?php renderAds(); ?>
</div>
La fonction PHP que j'ai écrit, c'est comme cela :
function renderAds(){
$query = queryAds();
$query_exe = mysql_query($query);
if(mysql_num_rows($query_exe) == 0){
echo '<img src="images/sampleAd.jpg" >';
}else{
$numb =1;
$flag =1;
while($fetched_data = mysql_fetch_array($query_exe)){
if($numb == 1){
if($flag == 1){
echo '<div class="active item">';
}else{
echo '<div class="item">';
}
}elseif($numb == 4){
echo '<a href="'.$fetched_data['url'].'" class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
echo '</div>';
$numb =0;
}else{
echo '<a href="'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
}
$numb++;
$flag++;
}
echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
}
}
Ici, en s'en distinguant par défaut carrousel de twitter bootstrap, j'ai fait chaque diapositive avec 4 images, je m'attends à ce que chaque transition des diapositives contient 4 images plutôt qu'en tant que par défaut l'image unique pour une diapositive. En HTML, il fonctionne mais quand je le remplace par ma fonction PHP première diapositive fonctionne, mais si je appuyez sur la flèche suivant carrousel ensemble de la div s'effondre.
Comment puis-je le faire fonctionner ?
Remarque : Ici, la Dernière image doit contenir la classe marginLast, et la
d'autres devraient avoir marginTop et tirez-gauche classes.
Ce que j'attends d'être rendu en html, c'est comme cela:
<div class="carousel-inner">
<div class="active item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<div class="item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<div class="item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Comment puis-je faire de ma fonction PHP pour afficher le résultat de balisage, comme ci-dessus?
Edit : La Sortie j'obtiens, c'est comme ceci:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<a href="xx2" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
<a href="xx" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
<a href="sample.com" class="pull-left marginLast" ><img src="images/sampleAd.jpg"></a>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!-- end carousel-inner -->
</div><!-- myCarousel -->
Selon balisage cela devrait fonctionner, mais il ne le fait pas, la flèche par défaut si il n'y a plus de diapositive que l'on doit être désactivé, mais il est cliquable.
- Le problème semble être que vous êtes la création d' <div> seulement pour engourdir=1 et la création de <a> seulement pour engourdir!=1. Mais la publication de votre sortie de balisage de l'aide 🙂
- J'ai collé la sortie, il n'a pas l'air de fonctionner, mais en fonction de balisage, il doit travailler et il devrait y avoir quatre éléments seulement trois sont là
Vous devez vous connecter pour publier un commentaire.
Avez-vous de requête MySQL retournera qu'un tableau. De cette façon, votre requête réutilisables (qui pourrait alors être faite dans une fonction) et vous pouvez rendre les données mais vous voyez l'ajustement.
Vous aurez évidemment besoin de changer la requête de base de données, ainsi que les valeurs utilisées dans le
foreach
boucle. J'ai aussi utilisé lemysqli
fonctions, comme lamysql
fonctions sont maintenant obsolètes en faveur de MySQLi (MySQL améliorée).Je pense que j'en suis sorti avec la réponse à ma propre question, même si toutes les réponses ci-dessus m'a donné beaucoup d'idées. Merci à vous tous
Je l'ai résolu comme :
et ajouter du code JS: