Wie ändert man das Bild dynamisch innerhalb des Bootstrap-Körpers, indem man mit den verschiedenen Bildern in Laravel klickt?

Question

Laravel Ansicht Code:

<div class="modal fade" id="images" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times; 
     </button> 
     <h4 class="modal-title">Upload Images</h4> 
     </div> 
    <div class="modal-body" id="modal-content"> 
    <div class = "row"> 
    <div class="col-sm-12"> 

    <div class = "col-sm-6" align="center"> 
    <div > 
    <a href = "#" class="upload" > 
    <img src="" width="250" 
    height="250" class="someClass"> 
     <button type="button" align="center"><span class="glyphicon 
    glyphicon-upload"></span>Upload photo</button> 
    </a> 
    </div> 
    </div> 
    <div class="col-sm-6"> 
    <h3>Image Guidelines</h3><br/> 
    Remember!! 
    <ul> 
    <li>Upload authentic product photos taken in bright lighting.</li> 
    <li>Use clear color images with minimum resolution of 1100x1100px. 
    </li> 
    <li> Maximum Images supported :- 5</li> 
    <li> Minimum Images required :- 1</li> 
    <li>Minimum Image Resolution :- 1100x1100</li> 
    <li>Image should be having pure white or light grey background. 
    </li> 
    <li>Image shouldn’t be blurred.</li> 
     <li>Product should occupy 80% of space in image.</li> 
    <li>Include all products in primary image (first image).</li> 
    </ul> 

    </div> 
    </div> 
    </div> 
    <div> 

    **<a href="#"> 
    <img src="haghwaylitecontroller.jpg" alt="gemcamera" 
    style="width:150px" class="upload1"> 
    </a> 
    <a href="#"> 
    <img src="lightningswitchmodule.jpg" alt="gemcamera" 
    style="width:150px" class="upload1"> 
    </a> 
    <a href="#" > 
    <img src="videodoorphone.jpg" alt="gemcamera" style="width:150px" 
    class="upload1"> 
    </a>** 
    </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data- 
    dismiss="modal">CANCEL</button> 
     <button type="submit" class="btn btn-default" id="login" 
    onclick="javascript:validate()">SAVE</button> 
    </div> 
    </div> 

</div> 

Das ist mein Bootstrap-Code in Laravel Ansicht. Es enthält thumbails von Bildern, die im Block markiert sind. Beim Klicken mit den Bildern sollte das gleiche Bild im bootsrap-Körper angezeigt werden (dh das angeklickte Bild sollte auf dem Bildquellen-Tag angezeigt werden, das innerhalb des Bootstrap-Körpers den Klassennamen hat) von someclass)

Script-Code:

<script type="text/javascript"> 

$(document).ready(function() { 
$(document).on("click", ".upload1", function() { 
var imageSRC = $(this).attr('src'); 
// alert(imageSRC); 

    $('#images').on('show.bs.modal', function() { 
     $(".someClass").attr("src", imageSRC); 
    }); 

</script> 

Dies ist das Skript Code, den ich für meine Anforderung versucht haben.

Answer 1

Halten Sie nur diese Zeile, wenn Sie den Wert in imageSRC speichern Variable

$(".someClass").attr("src", imageSRC);