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