HIGHSLIDE JS：画廊的固定位置
我正在使用Highslide在我的网站上显示一些图像。 请看这里，了解我在使用什么： 我使用自动加载，因为我只想看到没有图库的弹出窗口。它似乎工作得很好。但我希望它保持在同一个地方，无论我在页面的哪里 如何修复highslide galery的弹出窗口（如相对位置的div） 我尝试使用targetX&targetY元素，但这仅在加载页面时起作用；当我点击另一个图像时，弹出窗口“跟随”页面的大小 我的网站未联机，但请在此处检查我的代码： 在我的页面标题中：HIGHSLIDE JS：画廊的固定位置,highslide,Highslide,我正在使用Highslide在我的网站上显示一些图像。 请看这里，了解我在使用什么： 我使用自动加载，因为我只想看到没有图库的弹出窗口。它似乎工作得很好。但我希望它保持在同一个地方，无论我在页面的哪里 如何修复highslide galery的弹出窗口（如相对位置的div） 我尝试使用targetX&targetY元素，但这仅在加载页面时起作用；当我点击另一个图像时，弹出窗口“跟随”页面的大小 我的网站未联机，但请在此处检查我的代码： 在我的页面标题中： <head> <!--
<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>
我无法得到您的确切要求。你能解释一下你到底想要什么吗？您想要弹出窗口还是工具提示框？你也可以看看这个图书馆，谢谢你的回答。我想使用一个弹出的幻灯片画廊，就像一个相对位置的div。你更清楚我想说什么吗？在我的情况下，我会在我的网页上的一个div中有一个大的图像和一个小的图片库，其中包含我所有的图像（缩略图），并带有“下一步”和“预览”按钮。如果你点击其中一个按钮，大图像会发生变化，比如下面的缩略图会显示选中的图像（边框、选中缩略图下面的小箭头或类似的东西）。我之所以选择highslide，是因为它的透明效果和完美的流程正是我想要的。你看到了吗？
<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>
onclick = "return hs.htmlExpand (this, {contentId: 'highslide-html' targetX: null, targetY 'target 0px', height: 700, width: 480})"