如何在 Blogger 中建立響應式圖庫？

已發表: 2024-07-14

您是否想為您的 Blogger 網站添加圖片庫並使其具有響應能力，以便在桌面設備、平板電腦和行動裝置上正確加載？

那麼，請依照文章學習如何使用 HTML 和 CSS 在 Blogger 網站中建立響應式圖片庫。

此圖片庫完全響應式，對於大型裝置在單行上顯示 2 張影像，對於行動裝置在單行上自動顯示 1 張影像。

您可以在下面看到圖片庫的桌面視圖

圖片庫桌面視圖

您可以在下面看到圖片庫的移動視圖。

部落格中的行動視圖響應式圖片庫

首先，您需要上傳圖像並獲取這些圖像的來源 URL 。

在 Blogger 複製圖像 url

將連結保存在某處，以便您可以在下面的圖像庫程式碼中使用它們。

然後在 HTML 視圖中開啟要新增圖片庫的貼文或頁面編輯器。

現在您需要將以下程式碼複製並貼上到帖子編輯器中。

 <div class="gallery"> <div class="gallery-item"> <img alt="Image 1" src="https://images.pexels.com/photos/733856/pexels-photo-733856.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </div> <div class="gallery-item"> <img alt="Image 2" src="https://images.pexels.com/photos/5052875/pexels-photo-5052875.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </div> <div class="gallery-item"> <img alt="Image 3" src="https://images.pexels.com/photos/4240606/pexels-photo-4240606.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </div> <div class="gallery-item"> <img alt="Image 4" src="https://images.pexels.com/photos/6469/red-hands-woman-creative.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </div> <div class="gallery-item"> <img alt="Image 5" src="https://images.pexels.com/photos/4240545/pexels-photo-4240545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </div> <div class="gallery-item"> <img alt="Image 6" src="https://images.pexels.com/photos/7964660/pexels-photo-7964660.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </div> <!--Add more gallery items as needed--> </div> <style> .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding: 16px; } .gallery-item { overflow: hidden; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .gallery-item img { display: block; width: 100%; height: auto; border-radius: 8px; } </style>

現在您需要替換自己圖像的圖像來源 URL 並發布頁面。

您已成功將圖片庫新增至您的 Blogger 網站。

此程式碼使用CSS Grid建立一個基本的響應式圖像庫。 grid-template-columns屬性用於建立靈活的網格佈局，而minmax(250px, 1fr)確保每列至少250 像素寬，但如果有額外的可用空間，則可以擴展。

您可以透過使用類別gallery-item添加更多div元素來隨意自訂 HTML，以獲取更多圖像。

具有燈箱功能的進階圖片庫

如果您想將圖像燈箱新增至圖庫中，以顯示所點選圖像的較大版本，請依照下列步驟操作。

部落客中的圖像燈箱

在這裡，用戶可以輕鬆地單擊圖像，將其展開以在燈箱中打開，並以更大的視圖查看其餘圖像。

它將改善網站上的用戶體驗，如果您正在運行圖像網站，那麼您應該啟用此功能。

只需使用下面的程式碼即可在 Blogger 網站上啟用帶有 Lightbox 的圖片庫。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script> <style> .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding: 16px; } .gallery-item { overflow: hidden; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .gallery-item img { display: block; width: 100%; height: auto; border-radius: 8px; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; } .overlay img { max-width: 90%; max-height: 90%; border-radius: 8px; } .close-btn { position: absolute; top: 10px; right: 10px; cursor: pointer; color: #fff; font-size: 24px; } </style> <div class="gallery"> <a href="https://images.pexels.com/photos/733856/pexels-photo-733856.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 1"> <img class="gallery-item" alt="Image 1" src="https://images.pexels.com/photos/733856/pexels-photo-733856.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </a> <a href="https://images.pexels.com/photos/5052875/pexels-photo-5052875.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 2"> <img class="gallery-item" alt="Image 2" src="https://images.pexels.com/photos/5052875/pexels-photo-5052875.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </a> <a href="https://images.pexels.com/photos/4240606/pexels-photo-4240606.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 3"> <img class="gallery-item" alt="Image 3" src="https://images.pexels.com/photos/4240606/pexels-photo-4240606.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </a> <a href="https://images.pexels.com/photos/6469/red-hands-woman-creative.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 4"> <img class="gallery-item" alt="Image 4" src="https://images.pexels.com/photos/6469/red-hands-woman-creative.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </a> <a href="https://images.pexels.com/photos/4240545/pexels-photo-4240545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 5"> <img class="gallery-item" alt="Image 5" src="https://images.pexels.com/photos/4240545/pexels-photo-4240545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </a> <a href="https://images.pexels.com/photos/7964660/pexels-photo-7964660.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 6"> <img class="gallery-item" alt="Image 6" src="https://images.pexels.com/photos/7964660/pexels-photo-7964660.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </a> <!-- Add more gallery items as needed --> </div> <div class="overlay"> <span class="close-btn">×</span> <img class="overlay-img"> </div>

在這裡，我們使用 Lightbox 腳本在燈箱中開啟影像。

如果您擔心使用此燈箱後加載速度緩慢，那麼您可以使用以下程式碼而不是原始程式碼來延遲腳本載入。

 <script> // Add a 3-second delay to the lightbox script setTimeout(function() { var script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js'; document.body.appendChild(script); }, 3000); </script>

結論

我希望您已學會如何在 Blogger 網站上建立響應式圖片庫。 如果您有任何疑問，請在評論部分告訴我。

  • 另請閱讀：如何在 2024 年獲得 Adsense 帳戶批准

如果您閱讀了本文，請訂閱我們的 YouTube 頻道。