Well, here it goes ! I am getting an array of images through get request from mysql database ! and displaying it as a slideshow. its working ! but what i am trying to do now is, display same images with Jquery.
<?php require("Connections/db_con.php"); ?>
<?php
$title = "slideshow";
$id = mysql_real_escape_string((int)$_GET['id']);
$query_pic = "SELECT * FROM photos WHERE listing_id = $id ";
$result_pic = mysql_query($query_pic , $db_con);
$num_pic = mysql_num_rows($result_pic);
$row_pic = mysql_fetch_array($result_pic);
if($num_pic != 0) {
$image_set = array();
$result = mysql_query("SELECT name FROM photos WHERE listing_id= $id");
while($images = mysql_fetch_array($result)) {
array_push($image_set, $images['name']);
}
}
?>
<html>
<head>
<title><>php echo $title; ?></title>
<link rel="stylesheet" href="stylesheets/styles/styles.css" media='all'/>
<link href="stylesheets/layout.css" media="all"/>
<link rel="stylesheet" href="stylesheets/styles/slideshow.css" media='all'/>
<script type='text/javascript'>
var photos = new Array(<?php echo "'".implode("','", $image_set)."'"; ?>);
var start = 0; // array index of first slide
var end = <?php echo $num_pic -1; ?>; // array index of last slide
var current = start;
var doplay = true; // do not play show automatically
// skip to first slide
function first() {
current = 0;
change();
}
// advance to next slide
function previous() {
current -= 1;
if(current < start) current = end; // skip to last slide
change();
}
// go back to previous slide
function next() {
current += 1;
if(current > end) current = start; // skip to first slide
change();
}
// skip to last slide
function last() {
current = end;
change();
}
// change slide according to value of current
function change() {
document.photo.src = 'uploads/' + photos[current];
}
// play automatic slideshow
function play() {
if(doplay == true) {
next();
setTimeout(play, 2000); // call play() in 2.5 seconds
}
}
// pause slideshow
function pause() {
doplay = false;
}
</script>
</head>
<body>
<div id='container'>
<div class='form'>
<div id='photobox'>
<img name='photo' src='uploads/<?php echo $image_set[0]; ?>' alt=''/><br /><br />
<?php // echo "Total " . $num_pic . " photo(s) found" ; ?>
</div>
</div>
</div>
</body>
</html>
How can i display the same retrieved images with jquery slideshows rather than the one i am displaying it right now ?.. i tried hard but i fail everytime .. :(
This:
var photos = new Array(<?php echo "'".implode("','", $image_set)."'"; ?>);
should be
var photos = <?php echo json_encode($image_set) ?>;
json_encode will take care of all the formatting/escaping of the PHP array into equivalent Javascript syntax, without the danger of any JS metacharacters in one-or-more of the filenames causing a JS syntax error.
Beyond that, exactly what is the problem with jquery? You should show your jquery code, since that's where the problem is. Showing us the old code is pointless.