點選圖片 彈出大圖
阿新 • • 發佈:2019-02-03
<div class="box-body table-responsive no-padding"> <table class="table table-hover"> <tr> <th>編號</th> <th>圖片</th> <th>釋出時間</th> </tr> @forelse($imagetext as $imagetexts) <tr> <td>{{ $imagetexts['id'] }}</td> <td > <style> .hidden{display:none} .msKeimgBox { margin: 0px auto; width: auto; overflow: hidden; position: relative; height: 50px; float: left} .mskelayBox { height: auto; width: auto; margin-top: -251px; margin-left: -494px; position: fixed; left: 50%; top: 50%; border: 7px solid lightgrey; z-index: 20; background: beige; display: none; _display:none!important } .mskeImgBg { height: 57px; width: 100%; position: absolute; left: 0px; bottom: 0px; } .mskeClaose { position: absolute; top: -17px; right: -17px; cursor: pointer; } </style> <script> jQuery(function(){ $(".mskeLayBg").height($(document).height()); $(".mskeClaose").click(function(){$(".mskeLayBg,.mskelayBox").hide()}); $(".msKeimgBox").click(function(){$(".mske_html").html($(this).find(".hidden").html());$(".mskeLayBg").show();$(".mskelayBox").fadeIn(1000)}); $(".mskeTogBtn").click(function(){$(".msKeimgBox").toggleClass("msKeimgBox2");$(this).toggleClass("mskeTogBtn2")}); }) </script> <div class="mskelayBox"> <div class="mske_html"></div> <img class="mskeClaose" alt="" src="{{ asset ("/assets/img/mke_close.png") }}" > </div> @foreach($imagetexts['image'] as $value) <div class="msKeimgBox"> <img src="{{$value}}" alt="" width="50px" height="50px"> <span class="hidden"> <img src="{{$value}}" alt=""> <div class="mskeImgBg"></div> </span> </div> @endforeach </td> <td>{{ $imagetexts['created_at'] }}</td> </tr>
<pre name="code" class="html"> @empty <tr> <td colspan="9" class="text-center">暫無資料</td> </tr> @endforelse </table> </div>