So zeigen Sie mehrere hochgeladene Bilder in Zeile an

Ich muss Bilder aus einer Datei hochladen und sie in Zeilen anzeigen. Mein Code unten zeigt Bilder untereinander an, während ich möchte, dass sie in jeder Zeile als 3/4 Bilder angezeigt werden. DieseSo zeigen Sie mehrere hochgeladene Bilder in Zeile an

ist, was ich versucht:

<html> 
<head> 
<title>Images in a Row</title> 
<meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="<?php echo base_url("assets1/css/bootstrap.css"); ?>"> 
</head> 
<body> 
<div class="container"> 
     <p><?php echo $this->session->flashdata('statusMsg'); ?></p> 
     <form enctype="multipart/form-data" action="" method="post"> 
      <div class="form-group"> 
       <label>Choose Files</label> 
       <div id="rowimg"> 
       <input type="file" class="form-control" name="userFiles[]" multiple/> 
       </div> 
      </div> 
      <div class="form-group"> 
       <input class="form-control" type="submit" name="fileSubmit" value="UPLOAD"/> 
      </div> 
     </form> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="thumbnail"> 
     <?php if(!empty($files)): foreach($files as $file): ?> 
       <img src="<?php echo base_url('uploads/files/'.$file['file_name']); ?>" alt="" > 
       <p>Uploaded On <?php echo date("j M Y",strtotime($file['created'])); ?></p><br>    
      <?php endforeach; else: ?> 
      <p>Image(s) not found.....</p> 
      <?php endif; ?> 
        </div> 
    </div> 
    </div> 
    </div> 
</body> 
</html>

ich für einige Lösung in Stackoverflow recherchiert und CSS-Code erhalten, aber es gibt mir die gleiche Leistung alle Bilder untereinander :(

CSS-Datei : bootstrap.css

#rowimg { 
    white-space: nowrap; 
    width: 5000px; 
    height:200px; 
}

Here is an image of my output

Quelle

2017-04-23 Ron Axm

Die Verwendung der Bootstrap-Klasse ohne Bootstrap-CSS ist die erste Lösung –

Ich übersprang die Links der Bootstrap-Klasse beim Einfügen des Codes hier. –

Können Sie gerenderten HTML-Code ab dem 'container'-div. –

entschuldigen Nun mich für meine „Fehler“, wie Sie in Ihrem letzten comment schrieb, aber sie waren nicht meine Fehler, kann ich nur den Code sehen Sie Beiträge verfassen, und in Ihrer ursprünglichen Frage gab es keine Bootstrap CSS, und dann, nachdem Sie es bearbeitet haben, bemerkte ich, dass Sie eine schließende </a> ohne eine übereinstimmende <a> Tag hatte.

Nach dieser passiv-aggressiven Einführung, lassen Sie sich auf den Code zurück :)

Was mit Ihrem aktuellen Code falsch? Derzeit erstellen Sie eine einzelne column innerhalb einer row, und unter dieser Spalte erstellen Sie eine einzelne thumbnail und fügen Sie an sie alle Bilder an. Dies führt dazu, dass die Bilder horizontal statt vertikal angezeigt werden.

Wie sollte es behoben werden? Sie müssen Ihre Thumbnails in Stücke von X-Elementen spucken. Für jeden Chunk benötigen Sie eine separate Zeile, und für jeden Artikel benötigen Sie eine separate Spalte.

Sie haben die folgenden:

<div class="row"> 
    <div class="col-md-4"> 
     <!-- HTML --> 
    </div> 
</div>

Daraus schließe ich, dass Sie in jeder Zeile 3 Miniatur setzen wollen (3 * 4 == 12). Sie müssen also Ihr Thumbnail-Array in Chunks mit 3 Thumbnails auf jedem Chunk aufteilen. Sie tun es array_chunk mit:

$thumbnails = array_chunk($files, 3);

Jetzt sind Sie in $thumbnails ein mehrdimensionales Array haben, wobei jede Dimension 3 Thumbnails hat.

Als nächstes müssen Sie über die $thumbnails mehrdimensionalen Array zu durchlaufen, und Ihre HTML-Struktur aufbauen richtig:

<?php if(!empty($files)) { 
    foreach($thumbnails as $files) { ?> 
     <div class="row"> 
      <?php foreach($files as $file) { ?> 
       <div class="col-md-4"> 
        <div class="thumbnail"> 
         <img src="<?php echo base_url('uploads/files/'.$file['file_name']); ?>" alt="" > 
         <p>Uploaded On <?php echo date("j M Y",strtotime($file['created'])); ?></p> 
        </div> 
       </div> 
      <?php } ?> 
     </div> 
    <?php } ?> 
<?php } else { ?> 
    <p>Image(s) not found.....</p> 
<?php } ?>

Was der obige Code funktioniert über jedes Stück von Thumbnails zu durchlaufen ist und erstellen Sie eine Verpackung <div class="row"></div> für die Vorschaubilder. Als nächstes iteriere ich über die Vorschaubilder und drucke jedes in einem Container von 1/3 der Zeilenbreite (class="col-md-4"), und in diesem Container pint die Struktur des Thumbnails selbst.

Quelle

2017-04-23 17:57:41

Thnx für Ihre Hilfe zu ändern –

Haben Sie versucht, die .thumbnail Klasse css auf display:inline-block; oder float:left; einzustellen?

Oh, und Sie verwenden die Bootstrap col-md-4 Klasse falsch.

Um Ihre Inhalte in Spalten die divs zu teilen, die die Bootstrap-Klasse col-md-* Notwendigkeit für die col-md-* haben 12 auf insgesamt Wenn Sie 4 Spalten wollen, dann sollten Sie den Code wie folgt aussehen.

<div class="col-md-3"> 
    <img> 
</div> 
<div class="col-md-3"> 
    <img> 
</div> 
<div class="col-md-3"> 
    <img> 
</div> 
<div class="col-md-3"> 
    <img> 
</div>

Quelle

2017-04-23 16:41:27

So zeigen Sie mehrere hochgeladene Bilder in Zeile an

Antwort

Verwandte Themen