[HTML/CSS/JS] Bild in Diashow zentrieren

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [HTML/CSS/JS] Bild in Diashow zentrieren

    Hallo zusammen,

    ich hätte folgenden Code:

    Quellcode

    1. <html>
    2. <head>
    3. <meta http-equiv="pragma" content="no-cache" />
    4. <title>Secound Monitor-View - Archery Results</title>
    5. <style type="text/css">
    6. h1 {
    7. text-align:center;
    8. }
    9. #laufschrift_1 {
    10. position:absolute;
    11. top:0px;
    12. height:50px;
    13. font-size:30pt;
    14. z-index:999;
    15. }
    16. #anzeige {
    17. position:absolute;
    18. top:50px;
    19. width:99%;
    20. }
    21. #laufschrift_2 {
    22. position:absolute;
    23. bottom:0px;
    24. height:50px;
    25. font-size:30pt;
    26. z-index:100;
    27. display:none;
    28. }
    29. </style>
    30. <script type="text/javascript" src="templates/jquery-1.9.1.min.js"></script>
    31. <script type="text/javascript">
    32. var ausgabe;
    34. window.onload = function(){
    35. var step = 125;
    36. var old_posi;
    37. window.setInterval(function(){
    38. window.scrollBy(0, step);
    40. if (old_posi == window.pageYOffset)
    41. {
    42. window.scrollTo(0, 0);
    43. }
    45. old_posi = window.pageYOffset;
    48. document.getElementById("laufschrift_1").style = "top:"+window.pageYOffset+"px;";
    49. document.getElementById("laufschrift_2").style = "top:"+(window.pageYOffset + self.innerHeight - 50)+"px;";
    51. }, 3000);
    52. };
    54. $("document").ready(function(){
    55. var info;
    56. var info = new Array();
    57. var ausgabe;
    58. var status_diashow = 0;
    59. var gallery;
    60. var bilder;
    61. var laufschrift = Array();
    63. setInterval(loadInfo, 1000);
    65. function loadInfo() {
    66. var http = null;
    67. if (window.XMLHttpRequest) {
    68. http = new XMLHttpRequest();
    69. } else if (window.ActiveXObject) {
    70. http = new ActiveXObject("Microsoft.XMLHTTP");
    71. }
    73. if (http != null) {
    74. http.open("GET", "templates/sec_moni.txt", true);
    75. http.onreadystatechange = function() {
    76. if (http.readyState == 4) {
    78. ausgabe = http.responseText.split("-;-");
    79. var anzeige = ausgabe[0].split("_");
    81. gallery = ausgabe[1];
    83. gallery = gallery.split(" | ");
    84. bilder = gallery.length;
    86. if ((info[0] != anzeige[0]) || (info[1] != anzeige[1])) {
    87. info = Array();
    88. info[0] = anzeige[0];
    89. info[1] = anzeige[1];
    92. if (info[0] == 1) {
    93. document.bgColor = "black";
    94. document.getElementById("anzeige").innerHTML = "";
    95. status_diashow = 0;
    96. } else if ((info[0] >= 2) && (info[0] <= 4)) {
    97. document.bgColor = "white";
    98. loadSide(info[0],info[1]);
    99. status_diashow = 0;
    100. } else if (info[0] == 5) {
    101. document.bgColor = "black";
    102. status_diashow = 1;
    103. }
    104. }
    106. var laufschrift_check = ausgabe[2].split(" | ");
    108. if (laufschrift_check[0] == 1)
    109. {
    110. laufschrift[0] = laufschrift_check[0];
    111. laufschrift[1] = laufschrift_check[1];
    112. }
    113. else
    114. {
    115. laufschrift[0] = 0;
    116. }
    117. }
    118. };
    119. http.send(null);
    120. }
    121. }
    124. setInterval(delete_cache,5000);
    126. function delete_cache()
    127. {
    128. ausgabe = {0:0, 1:0};
    129. info = {0:0, 1:0};
    130. }
    132. var akt = 0;
    134. setInterval(function ()
    135. {
    136. if (status_diashow == 1)
    137. {
    138. var maxlength = screen.availHeight - 150;
    139. var maxwidth = screen.availWidth - 50;
    140. var left = (screen.availWidth - maxwidth) * 20;
    141. var top = (screen.availHeight - maxlength) / 2;
    143. document.getElementById("anzeige").innerHTML = "<img align="center" style="align:center; max-height:"+maxlength+"px; max-width:"+maxwidth+"px;" src="gallery/"+gallery[akt]+"" />";
    144. document.getElementById("anzeige").style = "left:"+left+"px;";
    145. document.getElementById("anzeige").style = "top:"+top+"px;";
    147. akt = akt+1;
    149. if (akt == bilder) {
    150. akt = 0; }
    152. }
    153. }, 5000);
    156. });
    157. </script>
    158. </head>
    159. <body>
    161. <div id="anzeige">
    162. <center>Seite wird geladen</center>
    163. </div>
    164. </body>
    165. </html>
    Alles anzeigen


    Mein Problem ist jetzt, wenn die Diashow läuft, krieg ich einfach die Bilder nicht zentriert (horizontal und vertikal). Ich habs schon über JS (siehe den Versuch)und CSS versucht, aber die rühren sich nicht aus dem linken oberem Eck raus. Mit Kann mir da bitte jemand helfen?

    LG

    Fipsi

  • Zeile: 143

    Quellcode

    1. "<img align="center" style="align:center; max-height:"+maxlength+"px; max-width:"+maxwidth+"px;" src="gallery/"+gallery[akt]+"" />";


    Wenn ich mich jetzt nicht total irre, kann das Beispiel gar nicht funktionieren, da du vergisst die Doublequotes zu escapen.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Active Record ()

  • Exi schrieb:

    Hast du eben den Link zu einer funktionsfähigen Testseite da?

    Sonst muss ich das erstmal zum laufen so bekommen :P


    Sorry, nein, hab zur Zeit keinen Server und das Script ist eigentlich auch nicht für's WWW gedacht, da keine wirklichen SIcherheitsvorkehrungen im Skript sind.


    Active Record schrieb:

    Zeile: 143

    Quellcode

    1. "<img align="center" style="align:center; max-height:"+maxlength+"px; max-width:"+maxwidth+"px;" src="gallery/"+gallery[akt]+"" />";


    Wenn ich mich jetzt nicht total irre, kann das Beispiel gar nicht funktionieren, da du vergisst die Doublequotes zu escapen.


    Schlag mich, aber in meinem code sind die Doucleqoutes escapt, keine Ahnnung, warum nicht in der Zeile, die du da jetzt rausgezogen hast. Und eine Fehlermeldung krieg ich ja auch nicht.

    stealth_axg schrieb:

    Ich würde dem

    Quellcode

    1. <div id="anzeige">

    mal das CSS

    Quellcode

    1. text-align:center;

    zuweisen


    Auf die Idee bin ich auch schon gekommen, ist aber leider nicht machbar, da, wie man in dem Skript sehen kann (?), auch andere Seiten, mit Text, angezeigt werden können, und die sollen nicht zentriert sein.

    Edit: letzteres hab ich gerade nur mal ausprobiert, das hat eh nicht mal geklappt

  • Fipsi schrieb:


    Sorry, nein, hab zur Zeit keinen Server und das Script ist eigentlich auch nicht für's WWW gedacht, da keine wirklichen SIcherheitsvorkehrungen im Skript sind.

    Dafür gibt es Dienste wie jsfiddle.net/. Grade CSS, HTML und JS aufteilen und den Link hier reinstellen. ;)

  • Hab mir das mal als alert ausgeben lassen:

    Quellcode

    1. <img align="center" style="align:center; max-height:874px; max-width:1230px;" src="gallery/426119_4896002722_799607138_n.jpg" />


    Und am Anfang hatte ich das mal jQuery. Hatte aber irgendwie gesponnen und dann hab ich's wieder so gemacht. Vllt. änder ich das bald wieder.

  • Okay, fang ich mal an..^^

    • Die Seite soll normalerweiße auf Vollbildmodus geschaltet werden (also nicht das Script, sondern das Broswerfenster)
    • Auf der Seite können mehrere Sachen angezeigt werden: Startlisten, Ergebnislisten, Vereinslisten, n schwazer Bildschirm und eben die Diashow
    • Zusätzlich kann unabhängig von allem anderem ein Lauftext am oberen Bildschirmrand (60 px) optional dazu geschalten werden
    • Das Bild der Diashow soll nun auf die verbliebene Höhe und Breite des Bildschirms horizontal und vertikal zentriert sein
    • Die größe der Bilder wird errechnet, bleibt aber proportional.
    • Und ja, die Bild-URL wird aus der Datei gelesen.