I just installed Lightbox on an html page in a website I am building. Lightbox works when only the lightbox.css page is linked.
But when I link my site's stylesheet, too, the page background turns dark but the image doesn't load.
Here is how the head looks when Lightbox is NOT working:
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet">
<link href="site_css/sjp.css" rel="stylesheet">
<title>Shenandoah Valley Apples</title>
</head>
After examining the lightwindow.css document, I discovered it contained a body element selector with rules applied. All other rules in the lightwindow.css document use class or id selectors. See below.
/* Preload images */
body:after {
content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
display: none;
}
My css page had a body element selector too. Rules applied to my body element selector conflicted with those in the lightwindow.css document.
I solved the problem by removing all of my rules from the element and applying them to a element instead.
Now Lightwindow works as it is supposed to.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다