img im 4. ineinander liegenden div's zentrieren


#1
Hallo.

Ich versuch schon seit Tagen in einem im 4. Div liegende Bildern horizontal und vertikal zu zentrieren.

Das ist mein Code:

/
PHP:
<div id="dia_show_rahmen" class="touchslider" style="border:2px solid #888; box-shadow: 4px 4px 4px #4697EC">
<div id="dia_show_rahmen_div" class="touchslider-viewport" style="overflow:hidden"><div>
<div class="touchslider-item">
<img id="dia_show" src="image_uploads/<?php echo $reihe['FILE_NAME'];
    endforeach; ?>">
</div><a style="float:left" class="prev" onclick="switch_image(0)">&#10094;</a>
<a style="float:right" class="next" onclick="switch_image(1)">&#10095;</a></div></div></div>
css:
CSS:
#dia_show_rahmen {
        position: relative;
        clear: both;
        display: table;
        min-width: 150px;
        max-width: 500px;
        width: 100%;
        height: 500px;
        margin:30 auto;
        cursor: pointer
    }
    #dia_show_rahmen_div {
        display:table-cell;
        vertical-align:middle;
        cursor: pointer
        }
    #dia_show {
        display: block;
        max-width: 91%;
        max-height: 91%;
        margin: auto;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
Neu hinzugekommen sind classen (ohne die ich zentrieren kann), mit denen ich eine touchslideshow erzeugen will. (http://touchslider.com/)

Kann jemand helfen?
 

Sempervivum

Erfahrenes Mitglied
#2
in einem im 4. Div liegende Bildern
Rechtschreibung sehe ich nicht unbedingt so verbissen, aber in diesem Fall weiß ich nicht, ob es nun ein Bild ist oder mehrere. Vor allem, weil man da auch noch ein foreach sieht.

Besser wäre es, den generierten Text aus der Quelltextansicht des Browsers zu posten.

Wenn ich das in eine Testdatei eintrage und eines von meinen Bildern nehme, ist es in beiden Richtungen zentriert. Allerdings tut man sich mit Zentrierung viel leichter, wenn man Flexlayout verwendet.
 
#3
Hallo Sempervivum.
Erstmal Danke für die schnelle Antwort.

Ich sollte wohl ergänzen, dass ich

Javascript:
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.touchslider.min.js"></script>
<script>
jQuery(function($) {
    $(".touchslider").touchSlider({/*options*/});
});
</script>
eingebunden habe.

Folgender Code ist aus dem Quelltext:

HTML:
<div id="dia_show_rahmen" class="touchslider" style="border:2px solid #888; box-shadow: 4px 4px 4px #4697EC">
    <div id="dia_show_rahmen_div" class="touchslider-viewport" style="overflow:hidden">
        <div>
            <div class="touchslider-item"><img id="dia_show" src="image_uploads/0Logo.png"></div>
            <a style="float:left" class="prev" onclick="switch_image(0)">&#10094;</a>
                    <a style="float:right" class="next" onclick="switch_image(1)">&#10095;</a></div></div></div>
Beim ansehen des Quelltexts ist mir aufgefallen, dass nur ein Bild gezeigt wird.
Ohne die Classen werden alle (3) Bilder aus der Datenbank angezeigt. (?)
 

Sempervivum

Erfahrenes Mitglied
#4
Hm, in dem Quelltext, den Du jetzt gepostet hast, ist nur 1 Bild zu sehen. Du schreibst, dass ohne die Klassen 3 Bilder angezeigt werden. In der Browseransicht ist das durchaus möglich, aber ich schließe aus, dass sich durch die Zuweisung von Klassen der Quelltext ändert. Es sei denn, Du hast noch etwas anderes am PHP geändert.
 
#5
Wenn ich

Javascript:
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.touchslider.min.js"></script>
<script>
jQuery(function($) {
    $(".touchslider").touchSlider({/*options*/});
});
</script>
raus nehme, funktioniert die Slideshow mit 3 Bildern mit onclick...

Im Quelltext:

HTML:
<div id="dia_show_rahmen" class="touchslider" style="border:2px solid #888; box-shadow: 4px 4px 4px #4697EC">
    <div id="dia_show_rahmen_div" class="touchslider-viewport" style="overflow:hidden">
        <div><div class="touchslider-item"><img id="dia_show" src="image_uploads/0Logo.png">
            </div><a style="float:left" class="prev" onclick="switch_image(0)">&#10094;</a>
                    <a style="float:right" class="next" onclick="switch_image(1)">&#10095;</a></div></div></div>
wird trotzdem nur 1 Bild angezeigt. Aber es funktioniert.
 
#7
Ich habe den touchslider von: TouchSlider — JavaScript slide content

Das ist der 'manuelle' slider:

Javascript:
<script type="text/javascript">
   
var images = new Array(
   
<?php

$statement = $pdo->prepare ("SELECT * FROM auktion_images WHERE ANGEBOT_ID = '{$id}' ");
$statement->execute();  
while($rows = $statement->fetch()) {

?>

  'image_uploads/<?php echo $rows['FILE_NAME'] . "'" . ","; }?>
);

// Aktueller Bildindex (beim Start 0)
var current_index = 0;

// Bilderwechsel durchführen
function switch_image(direction) {
  var count = images.length;
  current_index += (direction ? 1 : -1);
  if (current_index == count) {
    current_index = 0;
  } else if (current_index < 0) {
    current_index = count - 1;
  }
  document.getElementById('dia_show').src = images[current_index];
}
   
    </script>
Und die div's in denen sich img id="dia_show" befindet:

PHP:
<div id="dia_show_rahmen" class="touchslider" style="border:2px solid #888; box-shadow: 4px 4px 4px #4697EC">
    <div id="dia_show_rahmen_div" class="touchslider-viewport" style="overflow:hidden">
        <div><div class="touchslider-item">
            <img id="dia_show" src="image_uploads/<?php echo $reihe['FILE_NAME'];
    endforeach; ?>"></div>
Und die Buttons:

HTML:
<a style="float:left" class="prev" onclick="switch_image(0)">&#10094;</a>
<a style="float:right" class="next" onclick="switch_image(1)">&#10095;</a></div></div></div>
 

Sempervivum

Erfahrenes Mitglied
#8
Jetzt wird mir einiges klar: Die Bilder sind für deinen manuellen Slider in einem Array. Ich empfehle, nicht zweigleisig zu fahren und diesen manuellen Slider wegzulassen, wenn Du auf den Touchslider umstellst. Und dann musst Du auch das HTML für den Touchslider umstellen. In dem HTML, das Du in #5 gepostet hast, steht nämlich nur ein Bild.
Aber dein Ausgangsproblem scheint ja ein Problem mit der Zentrierung zu sein. Um das erkennen und beheben zu können, muss man das Ganze wirklich im Zusammenhang sehen, am besten auf einer vollständigen Seite, die online ist.
 

Sempervivum

Erfahrenes Mitglied
#10
Auf der Seite mit dem Touchslider gibt es folgende Probleme:

Die zahlreichen absoluten Positionierungen verhindern, dass das Bild sichtbar ist. Deaktiviere ich sie, wird es sichtbar, zentriert im Fenster. Allerdings bin ich mir nicht sicher, ob das Touchslider-Skript diese einfügt.

Es gibt nach wie vor nur ein Item für den Touchslider. Du musst für jedes Bild jeweils ein Item generieren.

Ich empfehle, zunächst ein sauberes HTML für den Touchslider zu erzeugen mit mehreren Bildern und nur die Klassen zuzuweisen, die dieser Slider vorsieht.