คลิ๊กลิงค์ที่รูปภาพแล้วจะแสดง photobox ขึ้นมาดังภาพ
<script>
var current=0;
$(function(){
onmotion.gallery("gallery-links",{
'slideshowInterval': 2000,
'transitionSpeed': 200,
});
});
function show_gallery(obj){
$("#blueimp-gallery").removeClass("hidden");
$("#blueimp-gallery").show();
}
function show_link(obj){
var index = $(obj).data("index");
current = parseInt(index) ;
var target = $(".grid a").filter("[data-index^="+current+"]").data("link");
var target_download = $(".grid a").filter("[data-index^="+current+"]").data("download");
$(".show-link").html("<a href="+target+"><button class='btn btn-success'>view</button></a>");
$(".show-download").html("<a href="+target_download+"><button class='btn btn-primary'>download</button></a>");
}
function click_left(){
current -=1;
var target = $(".grid a").filter("[data-index^="+current+"]").data("link");
var target_download = $(".grid a").filter("[data-index^="+current+"]").data("download");
$(".show-link").html("<a href="+target+"><button class='btn btn-success'>view</button></a>");
$(".show-download").html("<a href="+target_download+"><button class='btn btn-primary'>download</button></a>");
}
function click_right(){
current +=1;
var target = $(".grid a").filter("[data-index^="+current+"]").data("link");
var target_download = $(".grid a").filter("[data-index^="+current+"]").data("download");
$(".show-link").html("<a href="+target+"><button class='btn btn-success'>view</button></a>");
$(".show-download").html("<a href="+target_download+"><button class='btn btn-primary'>download</button></a>");
}
</script>
<style>
.blueimp-gallery > .slides {
height:80%;
top:10%;
}
.flex-column{
display:flex;
flex-direction:column;
}
.show-option{
position:absolute;
bottom:10px;
width:100%;
}
</style>
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" style="display:none;">
<div class="slides " id="slider" >
</div>
<h3 class="title"></h3>
<a class="prev" onclick="click_left()">‹</a>
<a class="next" onclick="click_right()">›</a>
<a class="close">x</a>
<a class="play-pause"></a>
<div class="show-option" style="display:flex;flex-direction:row;align-items:center;justify-content:center;">
<div class="show-link" style="margin-right:10px"></div>
<div class="show-download"></div>
</div>
</div>
<ul class='grid effect-1 ' id='gallery-links'>
<?
$path =Yii::getAlias("@ImagePath/uploads/van-go/car_tables/");
$upload_path =Yii::getAlias("@UploadPath/uploads/van-go/car_tables/");;
$all = "";
$i=0;
foreach($model->getReservations()->orderBy('id ASC')->all() as $mr){
if($mr->image_path){
$all.="<a href='".$upload_path.$mr->image_path."'onclick='{{show_link(this)}}' data-download='".$path."' data-index=".$i." class='gallery-item' title='' data-link=''><img src=".$path.$mr->image_path." width=200 height=200></img><a>";
}else{
}
$i++;
}
print $all;
?>
</u>
เน้นว่าให้ตัวลิงค์ที่กดอยู่ระหว่าง tag<ul class='grid effect-1 ' id='gallery-links'></u>