我正在使用 Highslide 在我的网站上显示一些图像。看这里知道我在用什么：http: //highslide.com
我使用自动加载是因为我只想看到没有画廊的弹出窗口。它似乎工作正常。但无论我在页面的哪个位置，我都希望它留在同一个地方。
如何修复我的 highslide 画廊的弹出窗口（如相对位置的 div）？
我尝试使用 targetX 和 targetY 元素，但这仅在我加载页面时有效；当我单击其他图像时，弹出窗口“跟随”页面的大小。
我的网站不在线，但请在此处查看我的代码：在我的页面顶部：
<head>
<!--HIGHSLIDE - GALERIE D'IMAGES -->
<script type="text/javascript" src="<?php echo "http://".CHEMIN_HIGHSLIDE."highslide-full.js"; ?>"></script>
<script type="text/javascript" src="<?php echo "http://".CHEMIN_HIGHSLIDE."highslide.config.js"; ?>" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="<?php echo "http://".CHEMIN_HIGHSLIDE."highslide.css"; ?>" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="<?php echo "http://".CHEMIN_HIGHSLIDE."highslide-ie6.css"; ?>" />
<![endif]-->
<script type="text/javascript">
<!--HIGHSLIDE GALERIE-->
//GLOBAL
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.showCredits = true;
hs.outlineType = null;
hs.expandDuration = 0;//ms
hs.outlineWhileAnimating = 1;
hs.padToMinWidth = true;
hs.width = 700;
hs.height = 480;
hs.allowMultipleInstances = false;
hs.blockRightClick = true;
hs.captionOverlay.position = 'above';
hs.headingEval = 'this.thumb.title';
hs.targetX = null; //null dc suit le flux
hs.targetY ='target 5px'; // div="target", 5px à droite
//FRENCH language strings
hs.lang = {
cssDirection: 'ltr',
loadingText: 'Chargement...',
loadingTitle: 'Cliquer pour annuler',
creditsText: 'Propulsé par <i>Highslide JS</i>',
creditsTitle: 'Site Web de Highslide JS',
previousText: 'Précédente',
nextText: 'Suivante',
moveText: 'Déplacer',
playText: 'Lancer',
playTitle: 'Lancer le diaporama (barre d\'espace)',
pauseText: 'Pause',
pauseTitle: 'Suspendre le diaporama (barre d\'espace)',
previousTitle: 'Précédente (flèche gauche)',
nextTitle: 'Suivante (flèche droite)',
restoreTitle: 'Utiliser les touches flèches droite et gauche pour suivant et précédent.'
};
//AUTOLOAD
// Open the first image on page load
hs.addEventListener(window, "load", function() {
// click the element virtually:
document.getElementById("autoload").onclick();
});
// Prevent closing the image when clicking the dimmed background
hs.onDimmerClick = function() {
return false;
}
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
var i, exp;
hs.page = hs.getPageSize();
for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;
// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
// calculate new popup position
x.pos = x.tpos - x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos - y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);
// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function (sender) {
return hs.next();
}
var galleryOptions = {
slideshowGroup: 'group1',
transitions: ['expand', 'crossfade']
};
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 3000,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 0.85,
position: 'bottom center',
relativeTo: 'image',
offsetX: 0,
offsetY: 5,
hideOnMouseOut: true
},
thumbstrip: {
mode: 'horizontal',
position: 'below',
relativeTo: 'image'
}
});
//place for the thumbstrip
hs.Expander.prototype.onInit = function() {
hs.marginBottom = (this.slideshowGroup == 'group1') ? 105 : 15;
};
</script>
<title>Titre</title>
在身体里 ：
<body>
<div id="container">
<div id="content">
<div id="en_tete">
header
</div>
<div id="contenu">
<div id="target">
//target for the place of highslide gallery in the page
</div>
<div class="highslide-gallery">
<?php
//array of images to show (I keep it otherwhere)
$array=array(
array('nom'=>'image 1','lien'=>'link_img_1','txt'=>'Text sup image 1'),
array('nom'=>'image 2','lien'=>'link_img_2','txt'=>'Text sup image 2'),
array('nom'=>'image 3','lien'=>'link_img_3','txt'=>'Text sup image 3')
);
//...
if(isset($array))
{
$nb=sizeof($array);
$i=1;
//HIDDING THUMBNAILS
echo '<div id="highslide-html" class="hidden-container">';
foreach($array as $arr)
{
echo '<a href="'.IGES.'big/'.$arr['lien'].'.png"
id="'.(($i===1) ? 'autoload' : '').'"
class="highslide"
onclick="return hs.expand(this, galleryOptions);">
<img src="'.IGES.'minia/'.$arr['lien'].'.png" alt=""
title="'.mettre_1ere_en_maj($arr['nom']).'"/>
</a>
<span class="highslide-caption">
'.$arr['txt'].'
</span>';
$i++;
}
echo '</div>';
}
?>
</div>
<!--ferm contenu-->
</div>
<!--ferm content-->
</div>
<div id="footer">
<div id="footer_container">
footer
</div>
<!--ferm footer-->
</div>
<!--ferm container-->
</div>
我真的搜索了互联网。我找到了一些东西，但都是英文的，虽然我懂一点，但有很多东西我不明白。
我还看到要集成这样一个功能，以便 targetX 和 targetY 工作，但我真的不知道在哪里。
onclick = "return hs.htmlExpand (this, {contentId: 'highslide-html' targetX: null, targetY 'target 0px', height: 700, width: 480})"
有人可以帮我吗？