Загрузка изображения и слайдер

Question

Все мои изображения загружаются рядом друг с другом, а не отдельными изображениями. Как исправить?

У меня есть 500 х 300 пикселей ящика

ScreenShot so u can see what i mean

<?php 
    if(isset($_FILES['ImageUpload'])){ 
     // if the form has been submitted 
     $imageName = $_FILES['ImageUpload']['name']; 
     $imageTemp = $_FILES['ImageUpload']['tmp_name']; 
     $imageType = $_FILES['ImageUpload']['type']; 
     // filter image name 
     $imageName = preg_replace("#[^a-z0-9.]#i","",$imageName); 

     // error handling 
     if(!$imageName){ 
      echo("Please select a file to upload"); 
     }else{ 
      move_uploaded_file($imageTemp, "uploads/$imageName"); 
     } 
    } 

?> 

<style type="text/css"> 
    #slider{ 
     width:500px; 
     height:300px; 
     overflow:hidden; 
     margin:30px auto; 
     border:2px solid grey; 
    /* background-image:url(images/Progress.gif); */ 
     background-repeat:no-repeat; 
     background-position:center; 
    } 

</style> 

<script type="text/javascript" src="includes/js/jquery.js"></script> 

<script type="text/javascript"> 
    sliderInt = 1; 
    sliderNext = 2; 

    $(document).ready(function() { 
     $("#slider > img#1").fadeIn(300); 
     startSlider(); 
    }); 

    function startSlider(){ 
     count = $("#slider > img").size(); 
     loop = setInterval(function(){ 

      if(sliderNext > count){ 
       sliderNext = 1; 
       sliderInt =1; 
      } 

      $("#slider > img").fadeOut(300); 
      $("#slider > img#" + sliderNext).fadeIn(300); 

      sliderInt = sliderNext; 
      sliderNext = sliderNext +1; 

     }, 3000)  
    } 


</script> 


<form action="slider_custom.php" id="uploadsForm" method="POST" enctype="multipart/form-data"> 

    <input type="file" name="ImageUpload"/> Select a file to upload... <br/><br/> 

    <input type="submit" value="Upload"/> 

</form> 


<div id="slider"> 


    <?php 
     $imageDisplay = ""; 
     $images = scandir("uploads"); 
     $ignore = array(".",".."); 
     $i = '1'; 
     foreach($images as $file){ 
      if(!in_array($file, $ignore)){ 
       $imageDisplay .= '<img id="1" src="uploads/'.$file.'" border="0"/>'; 
       $i++; 
      } 
     } 

     echo($imageDisplay); 
    ?> 
</div><!-- end .slider --> 

Answer 1

Вы вторя <img> тегов в слайдер <div id="slider">. Они все внутри этого div и отображаются.

Вы можете добавить стиль, чтобы сначала скрыть их, а затем создать цикл jquery один за другим.

Кроме того, вы, вероятно, хотите увеличить идентификатор на каждой итерации.

Что-то вроде:

$i = 1; // no need for quotes here 
foreach($images as $file){ 
     if(!in_array($file, $ignore)){ 
      $imageDisplay .= '<img style="display:none" id="'.$i.'" src="uploads/' 
          .$file.'" border="0"/>'; 
      $i++; 
     } 
    }