GOALS:
1) Controls-in-heading (top right)
2) Numbers in caption
3) Remove large blank space below thumbstrip when displaying at high resolutions (see comments on following test pages)
TEST 1: Displays fine if numperPosition is 'heading,' but I'm aiming for numberPosition 'caption'. Here's the code with numberPosition in the heading:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<TITLE>Test 1</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.marginTop = 60; // make room for the thumbstrip and the controls
hs.wrapperClassName = 'controls-in-heading';
hs.captionEval = 'this.thumb.alt';
hs.numberPosition = 'heading';
// Change to 'caption' if desired
hs.dimmingOpacity = 0.8;
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.captionOverlay.position = 'rightpanel';
hs.captionOverlay.width = '220px';
hs.captionOverlay.fade = 0;
hs.headingOverlay.fade = 0;
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
return hs.next();
}
// Add the slideshow controller
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
opacity: 1,
position: 'top right',
hideOnMouseOut: false,
offsetX: 220,
offsetY: 0,
relativeTo: 'expander'
},
thumbstrip: {
position: 'top center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
</script>
<style type="text/css">
.controls-in-heading .highslide-heading {
color: gray;
font-weight: bold;
height: 20px;
overflow: hidden;
cursor: default;
padding: 0; /* ORIGINAL WAS 0 0 0 22px; */
margin: 0;
background: none; /* ORIGINAL WAS background: url(graphics/icon.gif) no-repeat 0 1px; */
}
.highslide-caption {
display: none;
font-size: 1em;
padding: 5px;
margin: 10px 5px 10px 5px;
border: 1px solid silver;
background: #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
background: -webkit-linear-gradient(#FFFFFF, #E6E6E6);
background: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
background: -ms-linear-gradient(#FFFFFF, #E6E6E6);
background: -o-linear-gradient(#FFFFFF, #E6E6E6);
background: linear-gradient(#FFFFFF, #E6E6E6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E6E6');
}
</style>
</head>
<body>
<h3>Long caption in 1st image</h3>
<p><strong>Good, if numberPosition is 'heading'</strong></p>
<p>PROBLEM: Display is fine at lower screen resolution like 1024x768. At higher resolutions (e.g. 1280x1024), large space appears between thumbstrip and expander. Is it possible to remove that space, so expander always appear just below thumbstrip, regardless of screen resolution (preferably WITHOUT implementing useBox)?</p>
<div class="highslide-gallery">
<a class="highslide" onclick="return hs.expand(this, {src: 'flower01.jpg', slideshowGroup: 1})">
<img src="flower01_thumb.jpg" alt="Flower 1:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl.
In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse
condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec
mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi.
Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque
nonummy pretium tellus.
Cras interdum accumsan diam. Nam neque neque, feugiat sed, blandit quis, feugiat et, magna.
Etiam ornare cursus eros. Duis gravida. Integer bibendum. Nulla nonummy ante eu est. Mauris
dapibus quam eget orci. Praesent nec metus eget mauris sagittis consequat. Cras rutrum. Etiam
dictum. Cras placerat orci non quam. Suspendisse nec nulla sit amet enim ultricies malesuada.
Nullam lobortis. Ut gravida. Morbi hendrerit. Integer pretium euismod mauris. Duis condimentum
sagittis arcu. Integer est. Nulla ante ligula, auctor sit amet, vulputate in, aliquet in, sem." title=""></a>
<a class="highslide" onclick="return hs.expand(this, {src: 'flower02.jpg', slideshowGroup: 1})">
<img src="flower02_thumb.jpg" alt="Flower 2
" title=""></a>
<a class="highslide" onclick="return hs.expand(this, {src: 'flower03.jpg', slideshowGroup: 1})">
<img src="flower03_thumb.jpg" alt="Flower 3" title=""></a>
</div>
</body>
</html>
TEST 2: Changing the numpberPosition to 'caption' results in poor display of controls, and ability to move image is gone:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<TITLE>Test 2</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.marginTop = 60; // make room for the thumbstrip and the controls
hs.wrapperClassName = 'controls-in-heading';
hs.captionEval = 'this.thumb.alt';
hs.numberPosition = 'caption';
// Change to 'heading' if desired
hs.dimmingOpacity = 0.8;
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.captionOverlay.position = 'rightpanel';
hs.captionOverlay.width = '220px';
hs.captionOverlay.fade = 0;
hs.headingOverlay.fade = 0;
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
return hs.next();
}
// Add the slideshow controller
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
opacity: 1,
position: 'top right',
hideOnMouseOut: false,
offsetX: 220,
offsetY: 0,
relativeTo: 'expander'
},
thumbstrip: {
position: 'top center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
</script>
<style type="text/css">
.controls-in-heading .highslide-heading {
color: gray;
font-weight: bold;
height: 20px;
overflow: hidden;
cursor: default;
padding: 0; /* ORIGINAL WAS 0 0 0 22px; */
margin: 0;
background: none; /* ORIGINAL WAS background: url(graphics/icon.gif) no-repeat 0 1px; */
}
.highslide-number {
font-weight: bold;
color: gray;
font-size: .9em;
margin-bottom: 1em;
}
.highslide-caption {
display: none;
font-size: 1em;
padding: 5px;
margin: 0px 5px 10px 5px;
border: 1px solid silver;
background: #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
background: -webkit-linear-gradient(#FFFFFF, #E6E6E6);
background: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
background: -ms-linear-gradient(#FFFFFF, #E6E6E6);
background: -o-linear-gradient(#FFFFFF, #E6E6E6);
background: linear-gradient(#FFFFFF, #E6E6E6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E6E6');
}
</style>
</head>
<body>
<h3>Long caption in 1st image</h3>
<p><strong>Bad controls appearance if numberPosition is 'caption', and ability to move image is gone</strong></p>
<p>ALSO: Display is fine at lower screen resolution like 1024x768. At higher resolutions (e.g. 1280x1024), large space appears between thumbstrip and expander. Is it possible to remove that space, so expander always appear just below thumbstrip, regardless of screen resolution (preferably WITHOUT implementing useBox)?</p>
<div class="highslide-gallery">
<a class="highslide" onclick="return hs.expand(this, {src: 'flower01.jpg', slideshowGroup: 1})">
<img src="flower01_thumb.jpg" alt="Flower 1:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl.
In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse
condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec
mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi.
Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque
nonummy pretium tellus.
Cras interdum accumsan diam. Nam neque neque, feugiat sed, blandit quis, feugiat et, magna.
Etiam ornare cursus eros. Duis gravida. Integer bibendum. Nulla nonummy ante eu est. Mauris
dapibus quam eget orci. Praesent nec metus eget mauris sagittis consequat. Cras rutrum. Etiam
dictum. Cras placerat orci non quam. Suspendisse nec nulla sit amet enim ultricies malesuada.
Nullam lobortis. Ut gravida. Morbi hendrerit. Integer pretium euismod mauris. Duis condimentum
sagittis arcu. Integer est. Nulla ante ligula, auctor sit amet, vulputate in, aliquet in, sem." title=""></a>
<a class="highslide" onclick="return hs.expand(this, {src: 'flower02.jpg', slideshowGroup: 1})">
<img src="flower02_thumb.jpg" alt="Flower 2
" title=""></a>
<a class="highslide" onclick="return hs.expand(this, {src: 'flower03.jpg', slideshowGroup: 1})">
<img src="flower03_thumb.jpg" alt="Flower 3" title=""></a>
</div>
</body>
</html>
TEST 3: Playing around with the styles didn't help:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<TITLE>Test 3</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.marginTop = 60; // make room for the thumbstrip and the controls
hs.wrapperClassName = 'controls-in-heading';
hs.captionEval = 'this.thumb.alt';
hs.numberPosition = 'caption';
// Change to 'heading' if desired
hs.dimmingOpacity = 0.8;
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.captionOverlay.position = 'rightpanel';
hs.captionOverlay.width = '220px';
hs.captionOverlay.fade = 0;
hs.headingOverlay.fade = 0;
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
return hs.next();
}
// Add the slideshow controller
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
opacity: 1,
position: 'top right',
hideOnMouseOut: false,
offsetX: 220,
offsetY: 0,
relativeTo: 'expander'
},
thumbstrip: {
position: 'top center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
</script>
<style type="text/css">
.controls-in-heading .highslide-controls {
width: 105px;
height: 20px;
position: relative;
margin-top: 20px; /* ORIGINAL WAS margin: 0; */
/* top: -23px; */
left: 7px;
background: none;
}
.highslide-number {
font-weight: bold;
color: gray;
font-size: .9em;
margin-bottom: 1em;
}
.highslide-caption {
display: none;
font-size: 1em;
padding: 5px;
margin: 40px 5px 10px 5px;
border: 1px solid silver;
background: #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
background: -webkit-linear-gradient(#FFFFFF, #E6E6E6);
background: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
background: -ms-linear-gradient(#FFFFFF, #E6E6E6);
background: -o-linear-gradient(#FFFFFF, #E6E6E6);
background: linear-gradient(#FFFFFF, #E6E6E6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E6E6');
}
</style>
</head>
<body>
<h3>Long caption in 1st image</h3>
<strong>Bad scrolling if numberPosition is 'caption', and ability to move image is gone:</strong>
<ul>
<li>Turns blue, sometimes on 1st scroll, sometimes on subsequent scrolls</li>
<li>Attempts at changing 'margin' and 'top' styles for .controls-in-heading results in bad appearance of controls when scrolling (i.e. controls appear inside scrolled area)</li>
</ul>
<p>ALSO: Display is fine at lower screen resolution like 1024x768. At higher resolutions (e.g. 1280x1024), large space appears between thumbstrip and expander. Is it possible to remove that space, so expander always appear just below thumbstrip, regardless of screen resolution (preferably WITHOUT implementing useBox)?</p>
<div class="highslide-gallery">
<a class="highslide" onclick="return hs.expand(this, {src: 'flower01.jpg', slideshowGroup: 1})">
<img src="flower01_thumb.jpg" alt="Flower 1:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl.
In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse
condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec
mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi.
Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque
nonummy pretium tellus.
Cras interdum accumsan diam. Nam neque neque, feugiat sed, blandit quis, feugiat et, magna.
Etiam ornare cursus eros. Duis gravida. Integer bibendum. Nulla nonummy ante eu est. Mauris
dapibus quam eget orci. Praesent nec metus eget mauris sagittis consequat. Cras rutrum. Etiam
dictum. Cras placerat orci non quam. Suspendisse nec nulla sit amet enim ultricies malesuada.
Nullam lobortis. Ut gravida. Morbi hendrerit. Integer pretium euismod mauris. Duis condimentum
sagittis arcu. Integer est. Nulla ante ligula, auctor sit amet, vulputate in, aliquet in, sem." title=""></a>
<a class="highslide" onclick="return hs.expand(this, {src: 'flower02.jpg', slideshowGroup: 1})">
<img src="flower02_thumb.jpg" alt="Flower 2
" title=""></a>
<a class="highslide" onclick="return hs.expand(this, {src: 'flower03.jpg', slideshowGroup: 1})">
<img src="flower03_thumb.jpg" alt="Flower 3" title=""></a>
</div>
</body>
</html>