Ok so I know this is not Adobe specific but in my experience there are lots and lots of clever people about on this forum so I am hoping someone can help me out.
Basically I have built a photo gallery using JQuery (which is outside of my comfort zone - so have basically just robbed something from the net - legally I might add lol).
In IE 7 the last image in the thumbnail strip is wrapping itself around to the bottom of the strip and looks out of sequence.
Anyway here is the code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome to The White Lion Alvanley</title>
<link href="style/screen.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.ad-gallery.1.2.4/jquery.ad-gallery.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ad-gallery.1.2.4/jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
$('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
$('img.image1').data('ad-title', 'Title through $.data');
$('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
$('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function() {
if(!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
</script>
<style type="text/css">
select, input, textarea {
font-size: 1em;
}
h2 {
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
border-bottom: 1px dotted #dedede;
}
h3 {
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
}
.example {
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
}
ul {
list-style-image:url(list-style.gif);
}
pre {
font-family: "Lucida Console", "Courier New", Verdana;
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
}
code {
font-family: "Lucida Console", "Courier New", Verdana;
margin: 0;
padding: 0;
}
#gallery {
padding: 30px;
background: #502100;
}
#descriptions {
position: relative;
height: 50px;
background: #EEE;
margin-top: 10px;
width: 640px;
padding: 10px;
overflow: hidden;
}
#descriptions .ad-image-description {
position: absolute;
}Ï
#descriptions .ad-image-description .ad-description-title {
display: block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>The White Lion at Alvanley - Village Pub & Dining</h1>
</div>
<div id="navigation">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="history.html">HISTORY</a></li>
<li><a href="foodanddrink.html">FOOD & DRINK</a></li>
<li><a href="garden.html">GARDEN</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="coal_business.html">COAL BUSINESS</a></li>
<li><a href="location.html">LOCATION</a></li>
</ul>
</div>
<div id="mainarea">
<div id="container">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/1.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE01.jpg" width="92" height="62" class="image2" >
</a>
</li>
<li>
<a href="images/2.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE02.jpg" width="92" height="62" class="image2" >
</a>
</li>
<li>
<a href="images/3.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE03.jpg" width="92" height="62" class="image2">
</a>
</li>
<li>
<a href="images/4.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE04.jpg" width="92" height="62" class="image2">
</a>
</li>
<li>
<a href="images/5.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE05.jpg" width="92" height="62" class="image2" >
</a>
</li>
<li>
<a href="images/6.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE06.jpg" width="92" height="62" class="image2">
</a>
</li>
<li>
<a href="images/7.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE07.jpg" width="92" height="62" class="image2" >
</a>
</li>
<li>
<a href="images/8.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE08.jpg" width="92" height="62" class="image2">
</a>
</li>
<li>
<a href="images/9.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE09.jpg" width="92" height="62" class="image2" >
</a>
</li>
<li>
<a href="images/10.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE10.jpg" width="92" height="62" class="image2">
</a>
</li>
<li>
<a href="images/11.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE11.jpg" width="92" height="62" class="image2" >
</a>
</li>
<li>
<a href="images/12.jpg">
<img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE12.jpg" width="92" height="62" class="image2" >
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<p id="contact">White Lion, Manley Road, Alvanley, Cheshire WA6 9DD<br>Tel: 01928 722 949</p>
<form action="newslettersignup.php" method="post" id="signupfooter">
<h4>Sign up for our Newsletter</h4>
<input name="" type="text" value="Your name">
<input name="" type="text" value="Email Address">
<input name="submittastic" type="submit" id="submittastic" value="Submit">
</form>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
and for extra goodies here is the CSS
.ad-gallery {
width: 850px;
}
.ad-gallery, .ad-gallery * {
margin: 0;
padding: 0;
}
.ad-gallery .ad-image-wrapper {
width: 100%;
height: 400px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.ad-gallery .ad-image-wrapper .ad-loader {
position: absolute;
z-index: 10;
top: 48%;
left: 48%;
border: 1px solid #CCC;
}
.ad-gallery .ad-image-wrapper .ad-next {
position: absolute;
right: 0;
top: 0;
width: 25%;
height: 100%;
cursor: pointer;
display: block;
z-index: 100;
}
.ad-gallery .ad-image-wrapper .ad-prev {
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;
cursor: pointer;
display: block;
z-index: 100;
}
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(non-existing.jpg)\9
}
.ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
background: url(ad_prev.png);
width: 30px;
height: 30px;
display: none;
position: absolute;
top: 47%;
left: 0;
z-index: 101;
}
.ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
background: url(ad_next.png);
width: 30px;
height: 30px;
right: 0;
left: auto;
}
.ad-gallery .ad-image-wrapper .ad-image {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: 9;
}
.ad-gallery .ad-image-wrapper .ad-image a img {
border: 0;
}
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description {
position: absolute;
bottom: 0px;
left: 0px;
padding: 7px;
text-align: left;
width: 100%;
z-index: 2;
background: url(opa75.png);
color: #000;
}
* html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='opa75.png');
}
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title {
display: block;
}
.ad-gallery .ad-controls {
height: 20px;
}
.ad-gallery .ad-info {
float: left;
}
.ad-gallery .ad-slideshow-controls {
float: right;
}
.ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop {
padding-left: 5px;
cursor: pointer;
}
.ad-gallery .ad-slideshow-controls .ad-slideshow-countdown {
padding-left: 5px;
font-size: 0.9em;
}
.ad-gallery .ad-slideshow-running .ad-slideshow-start {
cursor: default;
font-style: italic;
}
.ad-gallery .ad-nav {
width: 100%;
position: relative;
}
.ad-gallery .ad-forward, .ad-gallery .ad-back {
position: absolute;
top: 0;
height: 100%;
z-index: 10;
}
/* IE 6 doesn't like height: 100% */
* html .ad-gallery .ad-forward, .ad-gallery .ad-back {
height: 100px;
}
.ad-gallery .ad-back {
cursor: pointer;
left: -20px;
width: 13px;
display: block;
background: url(ad_scroll_back.png) 0px 22px no-repeat;
}
.ad-gallery .ad-forward {
cursor: pointer;
display: block;
right: -20px;
width: 13px;
background: url(ad_scroll_forward.png) 0px 22px no-repeat;
}
.ad-gallery .ad-nav .ad-thumbs {
overflow: hidden;
width: 100%;
}
.ad-gallery .ad-thumbs .ad-thumb-list {
float: left;
width: 9000px;
list-style: none;
}
.ad-gallery .ad-thumbs li {
float: left;
padding-right: 5px;
}
.ad-gallery .ad-thumbs li a {
display: block;
}
.ad-gallery .ad-thumbs li a img {
display: block;
}
.ad-gallery .ad-thumbs li a.ad-active img {
border: 3px solid #a7907f;;
}
/* Can't do display none, since Opera won't load the images then */
.ad-preloads {
position: absolute;
left: -9000px;
top: -9000px;
}
However after a bit of validation action on the CSS it appears there are a couple of errors although not sure if this is what is effecting the page.
Any thoughts.
G
5
Replies
AdChoices