Get image from database and append into slider of bxslider - php

Question

I am using jquery.bxslider.js for sliding my images.
In my html code, I use like this:
<ul class="slide">
<li>
<a href="#">
<img src="../img/pic1.png" id="1" />
</a>
</li>
<li>
<a href="#">
<img src="../img/fish.png" id="2" />
</a>
</li>
<li>
<a href="#">
<img src="../img/dog.jpg" id="3" />
</a>
</li>
By default, I use this three images and then when user click next button, I want to get one more image from database,then I append it into with this ajax request to php file.
function load_image() {
var id=$("ul li img:last-child").attr("id");
var result=$.ajax({
type: "GET",
url: "getImage.php?id="+id,
dataType: "html",
success: function(data){
slider.destroySlider();//clear all old slider structure and then insert one more image in the list
$(".slide").append(data);
loadSlide(); // function to call to bxslider to generate slide
}
});
};
My problem, when I call function loadSlide() , the slider always reload and show the 1st image of the list.
But my purpose is not to reload slide, just show the next image when click on next button and while the slide go to next image, it should load one more image from DB to slider.
Any helps will be appreciated !!!
Best regards,
Sokly

Answer 1

You can use Callback API, for join in new image.

Answer 2

This is an easy way for you to get it done, assuming you want to slide the images by news category id, as implemented below.I simply query using the news category id. just embed your statement between the "bxslider" class. I Guess this help because i just implemented it on a site i am working on and it work fine. you can also fetch the title, or picture description along with the image slide, if you want.
<ul class="bxslider">
<?php
$slider_str="select * from news where newscatid=4";
$i=1;
$result=mysql_query($slider_str);
if(mysql_num_rows($result)>0)
{
while($row=mysql_fetch_assoc($result))
{
if($i%2==1 && $i!=1)
{
}
?>
<li> <div class="slideimagesize"><img src="<?php echo 'extras/'.$row['image'];?>"
width="200" height="150"/></div></li>
<?php
if($i%2==0)
{
}
$i++;
}
}
?>
</ul>
OR You can also achieve this by also using WOWSLIDER, below is the code
//Place this in between the head tag
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
//Closing Head tag
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<?php
$slider_str="select * from news where newscatid=4";
$i=1;
$result=mysql_query($slider_str);
if(mysql_num_rows($result)>0)
{
while($row=mysql_fetch_assoc($result))
{
if($i%2==1 && $i!=1)
{
}
?>
<li><div class="slideimagesize"><a href="news.php?newsid=<?php echo $row['newsid'];?>"><img src="<?php echo 'extras/'.$row['image'];?>" width="350" height="160" alt=" <?php echo $row['subject']; ?>" title="<?php echo $row['subject']; ?>"/>
</a>
</div></li><br>
<?php
if($i%2==0)
{
}
$i++;
}
}
?>
</ul>
</div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>