Kombination von Zufallsgenerator und Modal in HTML

Question

Hallo lieber SoSci Survey Support,

ich möchte in meiner Befragung zufällig eine von vier möglichen Screenshots einer Website anzeigen lassen. Prinzipiell ist das mit dem Zufallsgenerator und einem PHP-Schnipsel auch nicht so schwer. Da der Screenshot aber auf Desktop aufgenommen wurde und für das Quasi-Experiment auch dieses Format behalten muss, ist eine automatische Anpassung an kleine Bildschirme nicht optimal.

Ich möchte mir mit einem Modal helfen, das mit Klick auf das (im mobilen Modus) kleine Bild ein Vollbild über dem Fragebogen-Layer öffnet. Alleinstehend mit fixer Quellenangabe funktioniert das Modal im HTML-Code ohne Probleme. Meine große Hürde besteht darin, das vom Zufallsgenerator ausgewählte Bild (bzw. die Quellenangabe) in den HTML-Code zu packen.

Ist es möglich den PHP-Code in ein HTML-Fenster einzubinden? Wenn ich den empfohlenen Weg gehe und den HTML-Code im PHP-Fenster einbinde, funktioniert das Modal nämlich nicht mehr.

Hier der PHP-Code:

$code = value('WS01');
$bild = value('WS01', 'label');

Und hier das HTML-Modal:

<!-- Trigger the Modal -->
<img id="myImg" src="$bild" style="max-width: 100%">

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

<!-- Style the Image Used to Trigger the Modal -->

<style>
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 70px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1200px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>

<!--Get the modal-->

<script type="text/javascript">
<!--

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");

img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
//-->
</script>

Es wäre echt klasse, wenn diese technische Hürde noch gemeistert werden könnte. So hätte ich für Probanden aller Bildschirmgrößen eine gute Möglichkeit, das Bild bestmöglich zu lesen.

Danke und viele Grüße
Robin

Answer 1

Meine große Hürde besteht darin, das vom Zufallsgenerator ausgewählte Bild (bzw. die Quellenangabe) in den HTML-Code zu packen.

Sie sind eigentlich schon auf einem guten Weg - nur können Sie keine PHP-Variablen im HTML-Code verwenden. Die einfachste Lösung sind in diesem Fall Platzhalter.

<img id="myImg" src="%bild%" style="max-width: 100%">

Und passend dazu im PHP Code vorneweg

replace('%bild%', 'WS01', 'response');

Comments

Ich merke, dass ich noch nicht so ganz in das Programmieren eingestiegen bin. Vielen, vielen Dank für die schnelle Antwort - es funktioniert und sieht klasse aus!