制表符：单击小图像时全屏显示原始图像

Question

我需要构建一个表格，其中包含一些缩略图图像，当单击它们时，使用某种类型的灯箱以全屏显示原始尺寸的图像。是否可以使用制表符来完成此操作？我没有找到任何有关它的示例或问题。

谢谢， 迈克尔

Answer 1

参见 Html 格式化程序

    const tabledata1 = [
        {image: "<img style='width: 20px;height: 20px' src='https://images.unsplash.com/photo-1581488066397-c5951361126a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'>"},
        {image: "<img style='width: 20px;height: 20px' src='https://images.unsplash.com/photo-1581488066397-c5951361126a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'>"}
    ];



    const table = new Tabulator("#example-table", {
        height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        data: tabledata1, //assign data to table
        layout: "fitColumns", //fit columns to width of table (optional)
        columns: [ //Define Table Columns
            {title: "image", field: "image", formatter:"html"}
        ]
    });

<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<div id="example-table"></div>

Answer 2

Tabulator 只负责创建表格，它不会为您构建灯箱，您需要为此使用单独的库。

在处理点击事件方面，您可以考虑使用 cellClick 或 rowClick 事件来触发灯箱库打开：

var table = new Tabulator("#example-table", {
    rowClick:function(e, row){
        //e - the click event object
        //row - row component

        //trigger a lightbox library
    },
});

Answer 3

        //View Detail
      {title:"Image", field:"imageurl",formatter:"image", formatterParams:{height:"50px",width:"50px"},cellClick:function(e, cell){
                                
                                
                 var getimageurl = cell.getRow().getData().imageurl
                 var getname= cell.getRow().getData().name
                 var getdes= cell.getRow().getData().des     

                 console.log(getimageurl)        

                if (typeof getimageurl !== 'undefined' && getimageurl) {

                  const lightbox = GLightbox({
                                        touchNavigation: true,
                                        loop: true,
                                        autoplayVideos: true
                                            });

                   const myGallery = GLightbox({

                                              elements: [
                                                  {
                                                      'href': getimageurl,
                                                      'type': 'image',
                                                      'title': getname,
                                                      'description': getdes,
                                                  },
                                                  {
                                                      'content': document.getElementById('inline-example') // this will append a node inside the slide
                                                  },
                                              ],
                                              autoplayVideos: true,
                                          });
                              myGallery.open();
                }

                  }},

Answer 4

const glightbox = GLightbox({
  openEffect: "zoom",
  closeEffect: "fade",
  zoomable: true,
});

const tabledata1 = [
    {image: "https://images.unsplash.com/photo-1581488066397-c5951361126a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"},
    {image: "https://images.unsplash.com/photo-1581488066397-c5951361126a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"}
];

const table = new Tabulator("#example-table", {
    height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    data: tabledata1, //assign data to table
    layout: "fitColumns", //fit columns to width of table (optional)
    columns: [ //Define Table Columns
        {title: "image", field: "image", formatter:"image", formatterParams:ImgParamLookup,            cellClick:function(e, cell){ // event is triggered when a user left clicks on the cell.
              glightbox.setElements([
                {
                  'href': cell.getValue(),
                  'type': 'image'
                },
              ]);
              glightbox.open();
          }},
    ]
});

function ImgParamLookup(cell) {
  return {
    height: "100px",
    width: "100px",
    background: "#fff",
  }
}

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/css/glightbox.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.min.js"></script>

<div id="example-table"></div>