要自定義Lightbox插件的樣式,您可以遵循以下步驟:
custom-lightbox.css
。在這個文件中,您可以編寫自定義的樣式規則。!important
聲明來覆蓋插件的默認樣式。例如,如果您想改變圖片的寬度,可以編寫如下代碼:.my-lightbox .lg-image {
width: 80% !important;
}
其中.my-lightbox
是您為Lightbox插件添加的自定義類名,.lg-image
是插件中用于圖片的類名。
<div class="my-lightbox lightbox-gallery">
<a href="image1.jpg" data-gallery="gallery1">
<img src="image1.jpg" alt="Image 1">
</a>
<a href="image2.jpg" data-gallery="gallery1">
<img src="image2.jpg" alt="Image 2">
</a>
</div>
<head>
部分鏈接了您的自定義CSS文件。例如:<link rel="stylesheet" href="custom-lightbox.css">
em
、rem
、%
等)來確保樣式的響應性。