Javascript 显示单个聊天消息Jquery（和php）图像的lightbox

我正试着和拉威尔聊天。我的问题可能不像jquery-ish那样与laravel相关。因此，我让用户在mysql的单个数据字段中存储多个图像。然后我进行json_解码并显示图像：

@foreach($messages as $message)
 {{$message->content}} <br>
 @for($i = 0; $i < count(json_decode($message->images)); $i++)
    <img src="{{Storage::url(json_decode($message->images)[$i])}}" style="max-width: 50px" onclick="openModal(this), currentSlide({{$i.','. $message->id}})" class="hover-shadow slides{{$message->id}}" />
 @endfor
@endforeach

@foreach（$messages作为$message）
{{$message->content}}

@对于（$i=0；$iimages））；$i++）
图像）[$i]}}“style=“max width:50px”onclick=“OpenModel（this），currentSlide（{{{$i.”，'.$message->id}}）”class=“悬停阴影幻灯片{{{{$message->id}”/>
@结束
@endforeach

这为我提供了如下布局：

所以这很好。我的问题是我想点击一个图像并打开一个模式灯箱。我曾尝试在w3schools上使用代码，但遇到了麻烦。我不知道如何从特定的聊天信息中获取图像并将其传输到灯箱。 这就是我现在使用的javascript，显然它不起作用

function currentSlide(n, o) {
  showSlides(slideIndex = n, o);
}

function showSlides(n, o) {

  var i;
  var slides = document.getElementsByClassName("slides"+o);
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
        $('#modal-content').append('
            <div class="mySlides">
            <img src="'+$(slides[i]).attr('src')+'" style="width:100%">
            </div>');
  }
  slides[slideIndex-1].style.display = "block";
}

功能当前幻灯片（n，o）{
放映幻灯片（幻灯片索引=n，o）；
}
功能演示幻灯片（n，o）{
var i；
var slides=document.getElementsByClassName（“幻灯片”+o）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

有人能帮我把个人聊天信息中的图像显示在一个我可以滚动浏览的灯箱中吗？仅供参考，我必须将该示例链接上的html更改为如下所示：

<div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <div id="modal-content">

            </div>

<!-- Next/previous controls -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
</div>

&时代；
❮
❯

我的想法是，我可以为循环中的每个图像在#modal content div中添加一个新的DOM元素

这是聊天项目的页面源输出：

<p class="left clearfix">
    <span class="chat-img1 pull-left">
     <img src="/storage/IzUXSgXNlj0CM0MEEXl1U0rYtED0iMR9y1RdZ5cI.jpeg" alt="User Avatar" class="img-circle" style="width:50px; float:left">
    </span>
<div class="chat-body1 clearfix">
 <p>test with photos <br />
    <div class="imggrp41">
     <img src="/storage/post-images/Dl6FTni406BfzPKSnshxytfrqEzcSb6m4ABdvqaE.jpeg" style="max-width: 50px" onclick="openModal(this), currentSlide(0,41)" class="hover-shadow slides41" />
    </div>
 </p>
<div class="chat_time pull-right" style="float: right;">7 minutes ago</div>
</div>
</p>

用照片测试


7分钟前

对于将来来到这里的人来说，这个插件为我带来了奇迹：。它非常简单，您所要做的就是将相同的“data lightbox”属性应用于希望链接到同一lightbox系列中的每个图像。因此，在遵循注释中@icecub的html更正建议后，这是我的最终代码：

@if($message->images != null)
 <div>
  @for($i = 0; $i < count(json_decode($message->images)); $i++)
   <a href = "{{Storage::url(json_decode($message->images)[$i])}}"   data-lightbox = "message{{$message->id}}" ><img src="{{Storage::url(json_decode($message->images)[$i])}}" style="max-width: 50px; cursor: pointer;" /></a>
  @endfor
 </div>
@endif

@if（$message->images！=null）
@对于（$i=0；$iimages））；$i++）
@结束
@恩迪夫

---

“数据灯箱”属性设置为来自Laravel的消息ID，如果有多个图像，它将获得相同的图像ID，从而使用该聊天消息中的图像专门创建一个灯箱。

我假设每条消息都在其自己的容器中。类似于一个包含图像和文本等的div。因此，您应该在ike

this.parentNode.children

在click事件函数中。这将返回消息容器中的所有元素。之后，只需在检查它们是否为图像元素时对它们进行循环。感谢回复@icecub，您可以给我一个代码示例吗？javascript不是我的强项不幸的是，技巧。没有实际消息的代码示例是不行的。回答问题需要回答问题。我不能这样做，除非我确信它在您的情况下会起作用。您必须使用单个消息的html输出示例编辑您的问题。我问题中的第一个代码块的内容不是您所说的内容g关于？它有我的两个foreach循环，显示消息内容（文本和图像）。不。只需继续聊天。发布消息。右键单击->检查元素。确保复制整个消息部分，而不仅仅是它将显示的单个元素，并将其放入您的问题中。仅此而已