HTML/CSS/JS: Bild modal anzeigen

  • HTML

Es gibt 2 Antworten in diesem Thema. Der letzte Beitrag () ist von cl10k.

    HTML/CSS/JS: Bild modal anzeigen

    Hallo Leute,

    ich beschäftige mich gerade mit der Erstellung einer eigenen, sehr einfachen Website. Ich bin aber blutiger Anfänger in HTML/CSS/JS und habe mir daher meinen bisherigen Quellcode aus verschiedenen Quellen, v.a. w3schools.com, zusammengesucht und entsprechend modifiziert.

    Eine Kleinigkeit frisst nun schon mein ganzes Wochenende auf und ich bräuchte etwas Hilfe. Zielsetzung ist:
    1) Bild1 als statisches Thumbnail anzeigen
    2) bei onmouseenter ein anderes Bild2 als Thumbnail (eine GIF Animation von Bild1) anzeigen (eine Art Hoover-Effekt) und bei onmouseleave wieder zurück auf Bild1 schalten
    3) bei onmouseclick ein großes Bild3 modal über die Seite legen

    4) Unabhängig der oben genannten Punkte, frage ich mich ob es möglich ist Bildpfade irgendwo global zu definieren, damit ich bei Veränderungen nicht immer an x verschiedenen Stellen eingreifen muss... (die momentan genutzen Bild-URL sind nur Platzhalter)


    Soweit funktioniert der unten angehängte Quellcode, jedoch wäre es schön wenn jemand mit mehr Verständnis einmal darüber schauen könnte und ein paar Tipps/Verbesserungsvorschläge hätte.

    Vielen Dank
    lg Christian

    PS: Per HTML-Block definierter Code im Beitrag erhält automatisch überall URL-Tags, welche den Quellcode unbrauchbar machen. Kann man das irgendwie abstellen?
    (Damit das Codebeispiel läuft müssen derzeit sämtliche [url] und [/url] Tags manuell entfernt werden)

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    4. <!--Ist es möglich irgendwo (hier?) meine Bildpfade global vorab in Variablen abzulegen?-->
    5. <!--var path ="/files/theme/";-->
    6. <!--var imageThumb="[url]https://www.w3schools.com/images/w3schools_green.jpg[/url]";-->
    7. <!--var imageHoover="[url]https://www.w3schools.com/css/img_smallflower.jpg[/url]";-->
    8. <!--var imageModal="[url]https://www.w3schools.com/css/img_chania.jpg[/url]";-->
    11. <head>
    12. <style>
    13. #myImageThumb {cursor: zoom-in}
    15. /* The Modal (background) */
    16. .modal {display: none; /* Hidden by default */
    17. position: fixed; /* Stay in place */
    18. z-index: 1; /* Sit on top */
    19. padding-top: 100px; /* Location of the box */
    20. left: 0;
    21. top: 0;
    22. width: 100%; /* Full width */
    23. height: 100%; /* Full height */
    24. overflow: auto; /* Enable scroll if needed */
    25. background-color: rgb(0,0,0); /* Fallback color */
    26. background-color: rgba(0,0,0,0.7); /* Black w/ opacity */}
    28. /* Modal Content (image) */
    29. .modal-content {margin: auto;
    30. display: block;
    31. max-width: 768px;
    32. cursor: zoom-out}
    34. /* Caption of Modal Image */
    35. #caption {margin: auto;
    36. display: block;
    37. max-width: 768px;
    38. text-align: left;
    39. color: #ccc;
    40. padding: 25px;}
    42. /* Add Animation */
    43. .modal-content, #caption {-webkit-animation-name: zoom;
    44. -webkit-animation-duration: 0.6s;
    45. animation-name: zoom;
    46. animation-duration: 0.6s;}
    48. @-webkit-keyframes zoom {
    49. from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)}
    50. }
    52. @keyframes zoom {
    53. from {transform:scale(0)} to {transform:scale(1)}
    54. }
    56. /* 90% Image Width on Smaller Screens */
    57. @media only screen and (max-width: 1024px){
    58. .modal-content {
    59. width: 90%;
    60. }
    61. }
    62. </style>
    63. </head>
    65. <body> <img id="myImageThumb" src="[url]https://www.w3schools.com/images/w3schools_green.jpg[/url]"
    66. onmouseenter="this.src='[url]https://www.w3schools.com/css/img_smallflower.jpg[/url]'"
    67. onmouseleave="this.src='[url]https://www.w3schools.com/images/w3schools_green.jpg[/url]'">
    69. <!-- The Modal -->
    70. <div id="myModal" class="modal"> <img class="modal-content" id="myImage">
    71. <div id="caption">
    72. <b>PROJECT: </b>Exampleproject<br>
    73. <b>CONTRACTOR: </b>Examplecontractor<br>
    74. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
    75. commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
    76. et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
    77. felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
    78. consequat massa quis enim. Donec pede justo, fringilla vel, aliquet
    79. nec, vulputate.</p>
    80. </div>
    81. </div>
    83. <script>
    84. //var path ="/files/theme/";
    85. var imageThumb="[url]https://www.w3schools.com/images/w3schools_green.jpg[/url]";
    86. var imageHoover="[url]https://www.w3schools.com/css/img_smallflower.jpg[/url]";
    87. var imageModal="[url]https://www.w3schools.com/css/img_chania.jpg[/url]";
    89. // Get the modal
    90. var modal = document.getElementById('myModal');
    92. // Get the image and insert it inside the modal
    93. var img = document.getElementById('myImageThumb');
    94. var modalImg = document.getElementById("myImage");
    95. //var captionText = document.getElementById("caption");
    97. img.onclick = function(){
    98. myImageThumb.src = imageThumb; //stops myImageThumb animation in the background
    99. modal.style.display = "block";
    100. modalImg.src = imageModal;
    101. }
    103. // When the user clicks on imageModal, close the modal
    104. myImage.onclick = function() {
    105. modal.style.display = "none";
    106. }
    107. </script>
    108. </body>
    109. </html>

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „cl10k“ ()

    Hallo, soweit ich weiss nicht. Ich nutze fuer Webseiten immer gerne PHP, da habe ich die Pfade in einer Konfigurations-Datei, den HTML-Code gebe dann schon passend aus.

    Da du HTML5 verwendest, solltest du dir einmal das Data-* -Attribute mal anschauen, damit hast du die nötigen Daten im Element als Attribut.

    w3schools.com/tags/att_global_data.asp


    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8"/>
    5. </head>
    6. <body>
    7. <img id="myImageThumb" src=""
    8. data-src-normal="https://www.w3schools.com/images/w3schools_green.jpg"
    9. data-src-hovered="https://www.w3schools.com/css/img_smallflower.jpg"
    10. data-src-modal="https://www.w3schools.com/css/img_chania.jpg"/>
    11. <script>
    12. var img = document.getElementById('myImageThumb');
    13. window.onload = function(e){
    14. img.src = img.getAttribute("data-src-normal");
    15. };
    16. img.onclick = function(e) {
    17. this.src = this.getAttribute("data-src-modal");
    18. };
    19. img.onmouseenter = function(e) {
    20. this.src = this.getAttribute("data-src-hovered");
    21. };
    22. img.onmouseleave = function(e) {
    23. this.src = this.getAttribute("data-src-normal");
    24. };
    25. </script>
    26. </body>
    27. </html>


    Edit:
    Du solltest auch unbedingt das Charset, also das Encoding angeben. Wenn du das nicht machst, wird es zu Problemen(fehlerhafte Darstellung) führen wenn du Chars ausserhalb des ASCII-Zeichensatzes verwendest.
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „NoIde“ ()