_____________________________ <!--引入FancyBox CSS--> <link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script> <!--添加自定义CSS来隐藏移动端左右箭头--> <style> /* 针对主要通过手指触摸操作的设备 (手机、各种尺寸的 iPad 等) 隐藏箭头 */ @media (pointer: coarse) { .fancybox__container .fancybox__nav, .fancybox__container .f-button.is-prev, .fancybox__container .f-button.is-next { display: none !important; } } </style> <!--图片画廊容器--> <div class="gallery"> <div class="separator" style="clear: both;"> <a class="fancybox" data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidimeaEse-KLQZbWl-jpBqFMAaymYtXYSWDimYYYsuPsM0PZqDfa7wfrxRcoVxsNo4oT9wC7lEJ8cmZeI0HRyNkCxiwpwrD1Y405RTWLJ_aoLuzs9Pb8Z2SODCFe_NmCLy1Ki-G-r8GnNvUGcC2RbNG5G6d_-mu29TaqUAMBs7n66leuDULhTmREgBoqDe/s1600/C3CEE041-2FA9-4F34-A782-6D7BF155B823_1_105_c.jpeg" style="display: block; padding: 1em 0px; text-align: center;"> <img alt="" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidimeaEse-KLQZbWl-jpBqFMAaymYtXYSWDimYYYsuPsM0PZqDfa7wfrxRcoVxsNo4oT9wC7lEJ8cmZeI0HRyNkCxiwpwrD1Y405RTWLJ_aoLuzs9Pb8Z2SODCFe_NmCLy1Ki-G-r8GnNvUGcC2RbNG5G6d_-mu29TaqUAMBs7n66leuDULhTmREgBoqDe/s1600-rw/C3CEE041-2FA9-4F34-A782-6D7BF155B823_1_105_c.jpeg" /> </a> </div> <div class="separator" style="clear: both;"> <a class="fancybox" data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUDaRpLeUKSHhPk1WrLph7v6D2Kx1572nsy2Bn8Ee6Gjimi9CymaARUNkdOiFIMnV7Ag45B8327trMvrgnBvsrw0ZlI4xoPIO5q9CTUPBVNgE_w1HZvp0PMybhzreZ3ctwV2cqL6xaemvnCoqiBfbnet6-lMNAA4FfbdeFOOYejB8V496NfTfgZdP0EQJT/s1600/2F94296C-02E6-4CBA-8779-C1F267BA68CE_1_105_c.jpeg" style="clear: left; display: block; float: left; padding: 1em 0px; text-align: center;"> <img alt="" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUDaRpLeUKSHhPk1WrLph7v6D2Kx1572nsy2Bn8Ee6Gjimi9CymaARUNkdOiFIMnV7Ag45B8327trMvrgnBvsrw0ZlI4xoPIO5q9CTUPBVNgE_w1HZvp0PMybhzreZ3ctwV2cqL6xaemvnCoqiBfbnet6-lMNAA4FfbdeFOOYejB8V496NfTfgZdP0EQJT/s1600-rw/2F94296C-02E6-4CBA-8779-C1F267BA68CE_1_105_c.jpeg" /> </a> </div> <div class="separator" style="clear: both;"> <a class="fancybox" data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwbFjmpLQSzSSsbO0l-XPCHp7IejpzxFQvWkv8_5CpKOo-fd7OmRc4kvArRjwzrw-0ZvZ-x1dqq9S1mYgofD-kW6O8A76LvKZqevDpaoTIiZjUlMbcKNCNa9UgtH2e7p1GFr-gRGQn_rZM4R7r1Pb7vULj82ab71_mFUdkMfxFrd_6agOwt0uKr2eL-06d/s1600/C03C20CE-D63A-4694-ADFD-0F2BCB7739FC_1_105_c.jpeg" style="display: block; padding: 1em 0px; text-align: center;"> <img alt="" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwbFjmpLQSzSSsbO0l-XPCHp7IejpzxFQvWkv8_5CpKOo-fd7OmRc4kvArRjwzrw-0ZvZ-x1dqq9S1mYgofD-kW6O8A76LvKZqevDpaoTIiZjUlMbcKNCNa9UgtH2e7p1GFr-gRGQn_rZM4R7r1Pb7vULj82ab71_mFUdkMfxFrd_6agOwt0uKr2eL-06d/s1600-rw/C03C20CE-D63A-4694-ADFD-0F2BCB7739FC_1_105_c.jpeg" /> </a> </div> <div class="separator" style="clear: both;"> <a class="fancybox" data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0k6XTEEJ8Hf87TuIGp-QFI5j1pJdWnGnWvVkyhUfpIzB1ErhCUgL5RdeX3pms6F0MU_1a0DbgH49mu0VGADLUAZdPaqUTtBKF-OlWFpEqHUTMkLt_PYB2ZJEs4U7KKoHhzmqokjChBkgQYKW6QdgF_GPCokC3DtwZiZfXWWmg06nER-fFaMGIAis2kXJ/s1600/026BB1D0-2F10-4769-B1F4-43E5D61DD452_1_105_c.jpeg" style="display: block; padding: 1em 0px; text-align: center;"> <img alt="" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0k6XTEEJ8Hf87TuIGp-QFI5j1pJdWnGnWvVkyhUfpIzB1ErhCUgL5RdeX3pms6F0MU_1a0DbgH49mu0VGADLUAZdPaqUTtBKF-OlWFpEqHUTMkLt_PYB2ZJEs4U7KKoHhzmqokjChBkgQYKW6QdgF_GPCokC3DtwZiZfXWWmg06nER-fFaMGIAis2kXJ/s1600-rw/026BB1D0-2F10-4769-B1F4-43E5D61DD452_1_105_c.jpeg" /> </a> </div> <div class="separator" style="clear: both;"> <a class="fancybox" data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dzOYEg5e8tG1NOVq-FCJUaU3El4Oozs59jF160roNpQh_vDZ8MCyc8WD4dXpE3Vzn0GMFNxhhCHGEThYWe09IXq2Zg54azMcnefWrCNJhi8KKfVBGbab7mJI7O0R7Lg9w3l_J47G59BbMfQ6tOO0wWaTbPQp9OyqQG3QhO48usdOegdbNPERSl8Xmdbv/s1600/AD2C32B5-8556-4CD1-A10B-E35D4C6211BC_1_105_c.jpeg" style="display: block; padding: 1em 0px; text-align: center;"> <img alt="" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dzOYEg5e8tG1NOVq-FCJUaU3El4Oozs59jF160roNpQh_vDZ8MCyc8WD4dXpE3Vzn0GMFNxhhCHGEThYWe09IXq2Zg54azMcnefWrCNJhi8KKfVBGbab7mJI7O0R7Lg9w3l_J47G59BbMfQ6tOO0wWaTbPQp9OyqQG3QhO48usdOegdbNPERSl8Xmdbv/s1600-rw/AD2C32B5-8556-4CD1-A10B-E35D4C6211BC_1_105_c.jpeg" /> </a> </div> </div> <script> Fancybox.bind('[data-fancybox="gallery"]', { // 启用缩放和滑动 Thumbs: { autoStart: true, // 显示缩略图导航 }, Toolbar: { display: { left: ["infobar"], middle: [], right: ["slideshow", "thumbs", "zoom", "close"], }, }, }); </script> _____________________________