Log in

View Full Version : Lightbox scrolling background color problem


zankai
10-29-2012, 04:12 AM
Hello,

I am using lightbox to view images on my website. If the images are too big and you need to scroll to see the whole picture, the background color overlay of the part you need to scroll for to see is white instead of grey.

Here's a link to my website. You can see the problem when you click on a photo and scroll down. http://www.cassandrasnepvangers.nl

I have no idea how to fix this, can anyone help me?
jscheuer1
10-29-2012, 05:16 AM
Use a standards invoking DOCTYPE and update to jQuery 1.8. Change this:


<html>

<head><title>CassandraSnepvangers.NL - Grimeur, Special Make-up Artist, Wig and Hairstylist</title>

<LINK HREF="css/style.css" REL="stylesheet" TYPE="text/css">

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

</head>

to:


<!DOCTYPE html>
<html>

<head><title>CassandraSnepvangers.NL - Grimeur, Special Make-up Artist, Wig and Hairstylist</title>
<LINK HREF="css/style.css" REL="stylesheet" TYPE="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

</head>

However, you may as well go ahead and validate the entire page:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>CassandraSnepvangers.NL - Grimeur, Special Make-up Artist, Wig and Hairstylist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet">

</head>

<body>

<br>

<h1>CASSANDRA SNEPVANGERS</h1>

<h2>grimeur, special make-up artist, wig and hairstylist</h2>
<hr>
<h3>&nbsp;&nbsp;&nbsp;
<a href="cv.html">CURRICULUM VITAE</a>&nbsp;&nbsp;&nbsp;
<a href="index.html">PORTFOLIO</a>&nbsp;&nbsp;&nbsp;
<a href="contact.html">CONTACT INFO</a>&nbsp;&nbsp;&nbsp;
</h3>

<h5>
<br><br>
<a href="images/anime.jpg" rel="lightbox[pf]" title="Fotograaf: Titus Davidheimann Beek<br>Model: Alina"><img alt="" src="images/animet.jpg"></a>&nbsp;&nbsp;
<a href="images/white.jpg" rel="lightbox[pf]" title="Fotograaf: Titus Davidheimann Beek<br>Model: Alina"><img alt="" src="images/whitet.jpg"></a>&nbsp;&nbsp;
<a href="images/priestess1.jpg" rel="lightbox[pf]" title="Fotograaf: Titus Davidheimann Beek<br>Model: Samira"><img alt="" src="images/priestess1t.jpg"></a>&nbsp;&nbsp;
<a href="images/priestess2.jpg" rel="lightbox[pf]" title="Fotograaf: Titus Davidheimann Beek<br>Model: Samira"><img alt="" src="images/priestess2t.jpg"></a>&nbsp;&nbsp;
<a href="images/priestess3.jpg" rel="lightbox[pf]" title="Fotograaf: Titus Davidheimann Beek<br>Model: Samira"><img alt="" src="images/priestess3t.jpg"></a>&nbsp;&nbsp;
<a href="images/kaya1.jpg" rel="lightbox[pf]" title="Fotograaf: Bas Lammersen<br>Model: Kaya"><img alt="" src="images/kaya1t.jpg"></a>&nbsp;&nbsp;
<a href="images/kaya2.jpg" rel="lightbox[pf]" title="Fotograaf: Bas Lammersen<br>Model: Kaya"><img alt="" src="images/kaya2t.jpg"></a>&nbsp;&nbsp;
<a href="images/kaya3.jpg" rel="lightbox[pf]" title="Fotograaf: Bas Lammersen<br>Model: Kaya"><img alt="" src="images/kaya3t.jpg"></a>&nbsp;&nbsp;
<a href="images/kaya4.jpg" rel="lightbox[pf]" title="Fotograaf: Bas Lammersen<br>Model: Kaya"><img alt="" src="images/kaya4t.jpg"></a>&nbsp;&nbsp;
<a href="images/cbma1.jpg" rel="lightbox[pf]" title="Fotograaf: Ruurd Van Dijk<br>Model: Suzanne"><img alt="" src="images/cbma1t.jpg"></a>&nbsp;&nbsp;
<a href="images/cbma2.jpg" rel="lightbox[pf]" title="Fotograaf: Ruurd Van Dijk<br>Model: Suzanne"><img alt="" src="images/cbma2t.jpg"></a>&nbsp;&nbsp;
<a href="images/horror3.jpg" rel="lightbox[pf]" title="Fotograaf: Hans Thé<br>Model: Bianca"><img alt="" src="images/horror3t.jpg"></a>&nbsp;&nbsp;
<a href="images/horror1.jpg" rel="lightbox[pf]" title="Fotograaf: Hans Thé<br>Model: Bianca"><img alt="" src="images/horror1t.jpg"></a>&nbsp;&nbsp;
<a href="images/gaga.jpg" rel="lightbox[pf]" title="Fotograaf: Hans Thé<br>Model: Jade"><img alt="" src="images/gagat.jpg"></a>&nbsp;&nbsp;
<a href="images/chaise.jpg" rel="lightbox[pf]" title="Fotograaf: Titus Davidheimann Beek<br>Model: Nena &amp; Petra"><img alt="" src="images/chaiset.jpg"></a>&nbsp;&nbsp;
<a href="images/shiva2.jpg" rel="lightbox[pf]" title="Fotograaf: Titus Davidheimann Beek<br>Model: Saskia"><img alt="" src="images/shiva2t.jpg"></a>&nbsp;&nbsp;
<a href="images/shiva1.jpg" rel="lightbox[pf]" title="Fotograaf: Titus Davidheimann Beek<br>Model: Saskia"><img alt="" src="images/shiva1t.jpg"></a>&nbsp;&nbsp;

</h5>
</body></html>
zankai
10-31-2012, 11:33 AM
Thank you very much, it's working properly now!