Image Slideshow from database php/jquery

[jpknoob]

Hi, i recently created a bit of script to pull images from a database and display them horizontally using a scroll bar. i have now decided to try and integrate it with jquery to give it a bit of life. At first, i use the jquery plugin to use 5 sample images and it worked fine. However, when i tried to add php code to the script, the previous and next buttons don't show and the slideshow doesn't work. CAn anyone tell me what i am doing wrong?

My php script;

<div id="slideshow">
  	<div id="slidesContainer">
	   <div class="slide">
	     <?php
			error_reporting(E_ALL);
			
			$query = "SELECT id, path, name FROM images";
			$result = mysql_query($query);
			$num = mysql_num_rows($result);
									
			while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
			echo "<img src=\"$row[path]\" title=\"$row[name]\" alt=\"\" />";
											}
			?>
	   </div>
	 </div>
	</div>

and the java code;

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});

I don't normally work with java/jquery, but would appreciate any help or advice.
Thanks

[twiss]

It's not java, but javascript, but never mind. Did you check the source, are the image tags okay? What does your dummy thing look like (are there any differences other than source and title)?

[jpknoob]

There are no problems when i run the php script by itself, the images are pulled from the database and displayed correctly. Since adding the javascript, the images are not displayed. Have i gone about this the wrong way?

[diafol]

var slides = $('.slide');
  var numberOfSlides = slides.length;

Is this supposed to relate to the number of <div class="slide"> tags as opposed to the children? I'm no brain when it comes to js, but are you referencing the wrong node?

[jpknoob]

Good spot Ardav! The .slide refers to the div class around the image, all i had to do was move the div from out side the php and put it in the echo, like so;

<div id="slideshow">
  	<div id="slidesContainer">
	     <?php
			error_reporting(E_ALL);
 
			$query = "SELECT id, path, name FROM images";
			$result = mysql_query($query);
			$num = mysql_num_rows($result);
 
			while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
			echo "<div class=\"slide\"><img src=\"$row[path]\" title=\"$row[name]\" alt=\"\" /></div>";
											}
			?>
	 </div>
	</div>

Works a treat now!

[spotlight87]

can u plz upload complete files after you have solved the problems because i am facing the same prob.

tnx

[r20041]

thank for u code .works great ...!

while($row = mysqli_fetch_array($result))
  {

array_push($rows, $row);
}

foreach ($rows as $key => $row) {
  # code...
    echo'<img src="images/'.$row['img_src'].'" />';
}

[Mike_33]

What would I need to do to change this from a click to a dely type function, so the image or slides would move automatically after say 5 seconds. And then once the last slide is reached, how do you make it go back to the first image?

thanks for any help!