• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     zing-grid[loading] {
    10.       height: 646px;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body>
    16.   <zing-grid caption="Gifs in Grids" data='[
    17. 		    {
    18. 		      "day": "Thursday",
    19. 		      "imageUrl": "https://media.giphy.com/media/1ecRID74uAe5i/giphy.gif",
    20. 		      "description": "Weather is looking bleak"
    21. 		    },
    22. 		    {
    23. 		      "day": "Friday",
    24. 		      "imageUrl": "https://media.giphy.com/media/W7dBXzbnEpOBG/giphy.gif",
    25. 		      "description": "Weather is uplifting today"
    26. 		    },
    27. 		    {
    28. 		      "day": "Saturday",
    29. 		      "imageUrl": "//media.giphy.com/media/Ov5NiLVXT8JEc/giphy.gif",
    30. 		      "description": "Weather is looking stormy"
    31. 		    },
    32. 		    {
    33. 		      "day": "Sunday",
    34. 		      "imageUrl": "https://media.giphy.com/media/5scVaYq4hKA7u/giphy.gif",
    35. 		      "description": "Weather is sunny!"
    36. 		    }
    37. 		  ]'>
    38.     <zg-colgroup>
    39.       <zg-column index="day"></zg-column>
    40.       <zg-column index="description"></zg-column>
    41.       <zg-column index="imageUrl" type="image" alt="missing cat giph" width="300px"></zg-column>
    42.     </zg-colgroup>
    43.   </zing-grid>
    44.   <script>
    45.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    46.   </script>
    47. </body>
    48.  
    49. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid caption="Gifs in Grids" data='[
    12. 		    {
    13. 		      "day": "Thursday",
    14. 		      "imageUrl": "https://media.giphy.com/media/1ecRID74uAe5i/giphy.gif",
    15. 		      "description": "Weather is looking bleak"
    16. 		    },
    17. 		    {
    18. 		      "day": "Friday",
    19. 		      "imageUrl": "https://media.giphy.com/media/W7dBXzbnEpOBG/giphy.gif",
    20. 		      "description": "Weather is uplifting today"
    21. 		    },
    22. 		    {
    23. 		      "day": "Saturday",
    24. 		      "imageUrl": "//media.giphy.com/media/Ov5NiLVXT8JEc/giphy.gif",
    25. 		      "description": "Weather is looking stormy"
    26. 		    },
    27. 		    {
    28. 		      "day": "Sunday",
    29. 		      "imageUrl": "https://media.giphy.com/media/5scVaYq4hKA7u/giphy.gif",
    30. 		      "description": "Weather is sunny!"
    31. 		    }
    32. 		  ]'>
    33.     <zg-colgroup>
    34.       <zg-column index="day"></zg-column>
    35.       <zg-column index="description"></zg-column>
    36.       <zg-column index="imageUrl" type="image" alt="missing cat giph" width="300px"></zg-column>
    37.     </zg-colgroup>
    38.   </zing-grid>
    39. </body>
    40.  
    41. </html>
    1.  
    1.