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

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

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

Снимок экрана, чтобы вы поняли, что я имею в виду

<?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 -->

image php html jquery uploader
person Richard Barrett    schedule 16.04.2015    source источник
comment
Спасибо за редактирование, строгое при публикации, а: p   -  person Richard Barrett    schedule 16.04.2015
comment
Так у вас слайдер не работает, или в чем проблема?   -  person Naruto    schedule 16.04.2015
comment
все работает, НО когда я загружаю свои изображения, я хочу, чтобы они были в отдельных файлах, в данный момент все рядом друг с другом есть 3 разных изображения, которые я хочу на отдельных слайдах   -  person Richard Barrett    schedule 16.04.2015
comment
может быть это не точно count = $(#slider › img).size();   -  person Richard Barrett    schedule 16.04.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы повторяете теги <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++;
        }
    }
person Loopo    schedule 16.04.2015
comment
‹?php $imageDisplay = ; $images = скандир (загрузки); $игнорировать = массив(.,..); $я = '1'; foreach($images as $file){ if(!in_array($file, $ignore)){ $imageDisplay .= '‹img style=display:none id='.$i.' src=uploads/'.$file.' граница=0/›'; $я++; } } эхо($imageDisplay); ?› - person Richard Barrett; 16.04.2015
comment
все исправлено, я неправильно связал свой jQuery, я неправильно набрал - person Richard Barrett; 16.04.2015