1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Bilder aus Ordner in einer Gallery wie unten ausgeben :-(?

Dieses Thema im Forum "PHP" wurde erstellt von Bluefire, 13. Dezember 2016.

  1. Bluefire

    Bluefire Grünschnabel

    Kann mir wer hierbei Helfen?

    Ich habe eine Bidergallery und wollte aus einem Ordner mit bis zu 12 Bildern pro Ordner diese Automatisch Auslesen lassen, die Bilder heißen immer 01.jpg - 12.jpg aber es sind nicht immer 12 sondern auch mal 1 oder 3....

    das Auslesen lassen in PhP ist kein Prob. aus einem Ordner..

    nur wie bekomme ich diese in die Ansicht wie in der Gallery...

    <html><head><title>Bilderanzeige</title></head>
    <body
    <?PHP
    //einfache Bilderanzeige eines Verzeichnisses, das nur Bilder enthält
    //Code aus (C)artmedic Diashow, stark gekürzt auf das Nötigste
    $verz = opendir('.');
    while($file = readdir($verz))
    {
    $info = @getimagesize($file);
    if($file != "." && $file != ".." && !is_dir($file) && $file != "bildanzeige.php")
    {
    echo "<img src=\"".$file."\" border=\"0\"><br><br>";
    }
    }
    closedir($verz);
    ?>
    </body></html>


    aber die Galery welche ich verwenden möchte benötigt immer einen Pfad :( ahhhhhhhh

    muss das für die Schule hinbekommen und bin leider allen meinen Klassenkammeraden 1 Jahr hinterher ..
    Habe mir die Gallery ausgesucht... komm aber nicht drauf wie ich das verlinken kann

    Lerne erst php ..
    <!-- // START // RESPONSIV GALLERY 2016 // START //-->
    <div id="dut-cssgal-box">
    <ul class="dut-slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="dut-slide-container">
    <div class="dut-slide">
    <img src="/bildanzeige.php" />
    </div>
    <div class="dut-galNav">
    <label for="img-6" class="prev">&#x2039;</label>
    <label for="img-2" class="next">&#x203a;</label>
    </div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="dut-slide-container">
    <div class="dut-slide">
    <img src="/2.JPG" />
    </div>
    <div class="dut-galNav">
    <label for="img-1" class="prev">&#x2039;</label>
    <label for="img-3" class="next">&#x203a;</label>
    </div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="dut-slide-container">
    <div class="dut-slide">
    <img src="/3.JPG" />
    </div>
    <div class="dut-galNav">
    <label for="img-2" class="prev">&#x2039;</label>
    <label for="img-4" class="next">&#x203a;</label>
    </div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="dut-slide-container">
    <div class="dut-slide">
    <img src="/4.JPG" />
    </div>
    <div class="dut-galNav">
    <label for="img-3" class="prev">&#x2039;</label>
    <label for="img-5" class="next">&#x203a;</label>
    </div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="dut-slide-container">
    <div class="dut-slide">
    <img src="/5.JPG" />
    </div>
    <div class="dut-galNav">
    <label for="img-4" class="prev">&#x2039;</label>
    <label for="img-6" class="next">&#x203a;</label>
    </div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="dut-slide-container">
    <div class="dut-slide">
    <img src="/6.JPG" />
    </div>
    <div class="dut-galNav">
    <label for="img-5" class="prev">&#x2039;</label>
    <label for="img-1" class="next">&#x203a;</label>
    </div>
    </li>

    <li class="dut-galNav-dots">
    <label for="img-1" class="dut-galNav-dot" id="img-dot-1"><img src="/bildanzeige.php"/></label>
    <label for="img-2" class="dut-galNav-dot" id="img-dot-2"><img src="/2.JPG"/></label>
    <label for="img-3" class="dut-galNav-dot" id="img-dot-3"><img src="/3.JPG"/></label>
    <label for="img-4" class="dut-galNav-dot" id="img-dot-4"><img src="/4.JPG"/></label>
    <label for="img-5" class="dut-galNav-dot" id="img-dot-5"><img src="/5.JPG"/></label>
    <label for="img-6" class="dut-galNav-dot" id="img-dot-6"><img src="/6.JPG" /></label>
    </li>
    </ul>
    </div>
    <!-- // END // RESPONSIV GALLERY 2016 // END // -->
     
  2. Yaslaw

    Yaslaw n/a Moderator

    Bitte den Code formatiert in Code-Tags setzen.

    Ich habe auch die Frage nicht wirklich verstanden.
    Du hast ja schon alles was du brauchst.
     
  3. Bluefire

    Bluefire Grünschnabel

    die Frage war, wie ich das zusammen füge...

    die Gallery erstellen war einfach aber die Aufgabe besteht darin dies Automatisch zu machen ohne die einzelnen Bilder Pfade anzugeben.
    Ich dachte mir mit php geht das ja einfach, alle Bilder auslesen aber wie ich das nun zusammen füge leider kein plan...
    hab gestern alles möglich prob. aber ich glaub bei mir steht wer auf der Leitung... meine Klassen freunde lachten mich aus und meinten nur ich habe ja alles ich solle mich nicht so anstellen.. tolle hilfe
     
  4. Yaslaw

    Yaslaw n/a Moderator

    Du hast ja bereits eine Schleife über alle vorhanden Bilder.
    Code (PHP):
    1. <?PHP
    2. //einfache Bilderanzeige eines Verzeichnisses, das nur Bilder enthält
    3. //Code aus (C)artmedic Diashow, stark gekürzt auf das Nötigste
    4. $verz = opendir('.');
    5. while($file = readdir($verz)){
    6.     $info = @getimagesize($file);
    7.     if($file != "." && $file != ".." && !is_dir($file) && $file != "bildanzeige.php"){
    8.         echo "<img src=\"".$file."\" border=\"0\"><br><br>";
    9.     }
    10. }
    11. closedir($verz);
    12. ?>
    Und den Block für die Ausgabe
    Code (PHP):
    1. <input type="radio" name="radio-btn" id="img-2" />
    2. <li class="dut-slide-container">
    3.     <div class="dut-slide">
    4.         <img src="/2.JPG" />
    5.     </div>
    6.     <div class="dut-galNav">
    7.         <label for="img-1" class="prev">&#x2039;</label>
    8.        <label for="img-3" class="next">&#x203a;</label>
    9.    </div>
    10. </li>
    Jetzt musst du das nur noch kombinieren
    Code (PHP):
    1. <?PHP
    2. //einfache Bilderanzeige eines Verzeichnisses, das nur Bilder enthält
    3. //Code aus (C)artmedic Diashow, stark gekürzt auf das Nötigste
    4. $verz = opendir('.');
    5. $nr = 0;    //Ein Zähler einbauen
    6. while($file = readdir($verz)){
    7.     $info = @getimagesize($file);
    8.     if($file != "." && $file != ".." && !is_dir($file) && $file != "bildanzeige.php"){
    9.         //Dateinummer ermitteln
    10.         $nr++;
    11.         ?>
    12.         <input type="radio" name="radio-btn" id="img-<?php echo $nr; ?>" />
    13.         <li class="dut-slide-container">
    14.             <div class="dut-slide">
    15.                 <img src="/<?php echo $file; ?>" />
    16.             </div>
    17.             <div class="dut-galNav">
    18.                 <label for="img-1" class="prev">&#x2039;</label>
    19.                 <label for="img-3" class="next">&#x203a;</label>
    20.             </div>
    21.         </li>
    22.         <?php
    23.     }
    24. }
    25. closedir($verz);
    26. ?>
    Besonders hübsch ist es nicht. Darum würde ich es auch so lösen:
    Code (PHP):
    1. <?PHP
    2. $pictureTmpl = <<<TMPL
    3. <input type="radio" name="radio-btn" id="img-%d" />
    4. <li class="dut-slide-container">
    5.     <div class="dut-slide">
    6.         <img src="/%s" />
    7.     </div>
    8.     <div class="dut-galNav">
    9.         <label for="img-1" class="prev">&#x2039;</label>
    10.         <label for="img-3" class="next">&#x203a;</label>
    11.     </div>
    12. </li>
    13. TMPL;
    14.  
    15. //einfache Bilderanzeige eines Verzeichnisses, das nur Bilder enthält
    16. //Code aus (C)artmedic Diashow, stark gekürzt auf das Nötigste
    17. $verz = opendir('.');
    18. $nr = 0;    //Ein Zähler einbauen
    19. while($file = readdir($verz)){
    20.     $info = @getimagesize($file);
    21.     if($file != "." && $file != ".." && !is_dir($file) && $file != "bildanzeige.php"){
    22.         //Dateinummer ermitteln
    23.         $nr++;
    24.         echo sprintf($pictureTmpl, $nr, $file);
    25.     }
    26. }
    27. closedir($verz);
    28. ?>
    Aber das nicht einfach kopieren. Es ist nicht getestet. Versuche zu verstehen, was ich gemacht habe. Ansonsten lernst du gar nix.
     
  5. Bluefire

    Bluefire Grünschnabel

    danke nochmal,

    wie schon geschrieben hier ein anderes Prob.
    ich würde gerne das ganze in ein DropDown Menü Packen.

    bsp: Lokaer Ordner Skan, das ergebniss soll in einem Dropdown auswählbar sein, wenn ich eine Auswahl getroffen habe, ein neues Drop Down feld mit den darin enthaltenen ergebnissen und das immer weiter bis es keine Ordner mehr giebt.

    das hier hatte ich mir gebastelt um einen Ordner den ich per pfad angebe scanne und das ergebniss in mein Template ausgebe...
    Funktuniert ganz gut. Nur muss ich im Formular jeden Pfad angeben das das gab gleich mal 3 Noten schlechter. aua...

    PHP:
    1. <?php
    2.  
    3. /**
    4. * Responsive Gallerie
    5. */
    6.  
    7. function scanimage($path, $template)
    8. {
    9.     $files = array();
    10.     for ($i = 1; $i < 13; $i++) {
    11.         $check = @file_get_contents($path . '/' . $i . '.JPG');
    12.         if (FALSE !== $check) {
    13.             $files[] = $check;
    14.         } else {
    15.             $check = @file_get_contents($path . '/' . $i . '.jpg');
    16.             if (FALSE !== $check) {
    17.                 $files[] = $check;
    18.             }
    19.         }
    20.     }
    21.     // return $files; // vor direktem template parsen
    22.     $template = scanmainimage($path, $files, $template);
    23.     $template = scansubimage($path, $files, $template);
    24.     return $template;
    25. }
    26.  
    27. function scanmainimage($path, $files, $template)
    28. {
    29.     $filecount = count($files);
    30.     $i = 1;
    31.     foreach ($files as $file) {
    32.         if (1 == $i) {
    33.             $prev = '<label for="img-' . $filecount . '" class="prev">&#x2039;</label>';
    34.         } else {
    35.             $prev = '<label for="img-' . ($i - 1) . '" class="prev">&#x2039;</label>';
    36.         }
    37.         if ($filecount == $i) {
    38.             $next = '<label for="img-1" class="next">&#x203a;</label>';
    39.         } else {
    40.             $next = '<label for="img-' . ($i + 1) . '" class="next">&#x203a;</label>';
    41.         }
    42.  
    43.         $html .= '<input type="radio" name="radio-btn" id="img-' . $i . '" checked />
    44.            <li class="dut-slide-container">
    45.            <div class="dut-slide">
    46.            <img src="' . $path . '/' . $i . '.jpg" /></div>
    47.            <div class="dut-galNav">' . $prev . $next .' </div>
    48.            </li>';
    49.         $i++;
    50.     }
    51.     return str_replace("%bildergross%", $html, $template);
    52. }
    53.  
    54. function scansubimage($path, $files, $template)
    55. {
    56.     $filecount = count($files);
    57.     $i = 1;
    58.     foreach ($files as $file) {
    59.         $html .= '<label for="img-' . $i . '" class="dut-galNav-dot" id="img-dot-' . $i . '"><img src="' . $path . '/' . $i .'.jpg"/></label>';
    60.         $i++;
    61.     }
    62.     return str_replace("%bilderklein%", $html, $template);
    63. }
    64. ?>
    65. <!-- //  START  // RESPONSIV GALLERY 2016 //  START  //-->
    66. <?php
    67.  
    68. if (isset($_POST['template'])) {
    69.         $template = file_get_contents('./' . $_POST['template'] . '.html');
    70.     }else {
    71.         $template = file_get_contents('./template.html');
    72.     }
    73.     $path = $_POST['pfad'] . $_POST['template'] . '/' .  $_POST['category'] . '/'.  $_POST['artnr'];
    74.     $final_template = scanimage($path, $template);
    75.  
    76. ?>
    77. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    78. <html xmlns="http://www.w3.org/1999/xhtml">
    79. <head>
    80.  
    81. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    82. <title>GIS © by Hock</title>
    83. <style type="text/css">
    84.  
    85. </style>
    86. <script type="text/JavaScript">
    87. <!--
    88. function MM_swapImgRestore() { //v3.0
    89.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    90. }
    91.  
    92. function MM_preloadImages() { //v3.0
    93.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    94.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    95.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    96. }
    97.  
    98. function MM_findObj(n, d) { //v4.01
    99.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    100.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    101.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    102.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    103.   if(!x && d.getElementById) x=d.getElementById(n); return x;
    104. }
    105.  
    106. function MM_swapImage() { //v3.0
    107.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    108.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    109. }
    110. //-->
    111. </script>
    112. </head>
    113.  
    114. <body>
    115. <table width="976" border="1" bordercolor="#C60929" align="center" cellpadding="0" cellspacing="0">
    116.   <tr>
    117.     <th scope="col"><table width="976" border="0" cellspacing="0" cellpadding="0">
    118.       <tr>
    119.         <th scope="col"><div align="right"><img src="../gross.jpg" width="976" height="105" alt="" /></div></th>
    120.       </tr>
    121.       <tr>
    122.         <td bgcolor="#666666">
    123.             <script src="clipboard.js"></script>
    124.     <textarea name="parsed" style="width:500px" style="hight:500px" id="parsed"> <?php echo $final_template; ?></textarea>
    125.     <p><input type="button" value="Kopieren" onclick="clipboard.copy(document.getElementById('parsed').textContent)"/></p>
    126.     <form action="input_button.htm">
    127. <p>
    128. <input type="button" name="Verweis" value="Zurück"
    129. onClick="self.location.href='./Bilder/template/formular.html'">
    130. </p>
    131. </form>
    132.           <table width="976" border="0" cellspacing="0" cellpadding="0">
    133.          
    134.           </table></td>
    135.       </tr>
    136.    
    137.     </table></th>
    138.   </tr>
    139. </table>
    140. </body>
    141. </html>
    142.  
    143.  
    144. <!-- // END //  RESPONSIV GALLERY 2016  // END // -->


    und hier das Formular
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3.  
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <title>test</title>
    6. <style type="text/css">
    7.  
    8. <script type="text/JavaScript">
    9. <!--
    10. function MM_swapImgRestore() { //v3.0
    11.  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    12. }
    13.  
    14. function MM_preloadImages() { //v3.0
    15.  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    16.    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    17.    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    18. }
    19.  
    20. function MM_findObj(n, d) { //v4.01
    21.  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    22.    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    23.  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    24.  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    25.  if(!x && d.getElementById) x=d.getElementById(n); return x;
    26. }
    27.  
    28. function MM_swapImage() { //v3.0
    29.  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    30.   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    31. }
    32. //-->
    33. </head>
    34.  
    35. <table width="976" border="1" bordercolor="#C60929" align="center" cellpadding="0" cellspacing="0">
    36.   <tr>
    37.     <th scope="col"><table width="976" border="0" cellspacing="0" cellpadding="0">
    38.       <tr>
    39.         <th scope="col"><div align="right"><img src="" width="976" height="105" alt="" /></div></th>
    40.       </tr>
    41.       <tr>
    42.         <td align="center" bgcolor="#666666">
    43.      
    44. <form action=".../action.php" method="post">
    45.  
    46.             <!-- Bildpfad bei Bedarf hier anpassen //-->
    47.             <input type="hidden" name="pfad" value="./Bilder/"/>
    48.             <!-- Template //-->
    49.             <p>Hauptordner:
    50.                 <select name="template" style="width:350px" size="1">
    51.                     <option value="test1">Standard</option>
    52.                     <option value="test2">Standard</option>
    53.                  
    54.                 </select>
    55.             </p>
    56.             <!-- Unterordner //-->
    57.             <p> UnterOrdner:
    58.                 <select name="category" style="width:350px" size="1">
    59.                     <option value="test1">test1</option>
    60.                     <option value="test1">test2</option>
    61.                  
    62.                 </select>
    63.             </p>
    64.          
    65.  
    66. <p><input type="submit" /></p>
    67. </form>
    68.  
    69.     </td>
    70.       </tr>
    71.    
    72.     </table></th>
    73.   </tr>
    74. </body>
    75. </html>
     
Die Seite wird geladen...