0
我使用Highslide在我的网站上显示一些图像。 看看这里知道我在用什么：http://highslide.comHIGHSLIDE JS：画廊的固定位置
我使用自动加载，因为我只想看到没有画廊的弹出窗口。它似乎工作正常。但是，无论我在页面中的哪个位置，我都希望它保持在同一个地方。
我该如何解决我的highslide galery（像一个相对位置的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>
我真的搜索了互联网。我发现了一些东西，但所有东西都是英文的，虽然我确实懂一点，但有很多东西我不明白。
我也看到这样一个功能被集成，使targetY & targetY工作，但我真的不知道在哪里。
onclick = "return hs.htmlExpand (this, {contentId: 'highslide-html' targetX: null, targetY 'target 0px', height: 700, width: 480})"
有人可以帮我吗？
我不能让你的确切要求。你可以请解释一下你到底想要什么吗？你想要一个Popup或一个工具提示框吗？你也可以看看这个库http://jquerytools.org/ –
谢谢你的回答。我想在相对位置使用一个像高速滑块一样的高速滑动画廊。你更清楚我想说什么？ – clR
在我的情况下，我会在我的网页中的一个div中显示一个大图像和一个包含下一个和预览按钮的所有图像（缩略图）的小画廊。温你在其中之一，大图像变化，像下面的缩略图显示所选图像（周围的边框，所选缩略图下面的小箭头或类似的东西）。我选择了highslide，因为它完全符合我想要的透明效果和完美的流程。你看到了吗？ – clR