0
Я использую Highslide для отображения некоторых изображений на моем сайте. Посмотрите сюда, чтобы узнать, что я использую: http://highslide.comHIGHSLIDE JS: фиксированное положение галереи
Я использую автозагрузку, потому что хочу просто увидеть всплывающее окно без галереи. Кажется, он работает нормально. Но я хочу, чтобы он остался в том же месте, где бы я ни находился на этой странице.
Как я могу исправить всплывающее окно моей галереи с высоким качеством (например, 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>
I действительно искал в Интернете. Я нашел кое-что, но все на английском, и хотя я немного понимаю, есть много вещей, которые я не понимаю.
Я также видел такую функцию для интеграции, так что targetX & targetY работает, но я действительно не знаю, где.
onclick = "return hs.htmlExpand (this, {contentId: 'highslide-html' targetX: null, targetY 'target 0px', height: 700, width: 480})"
Может кто-нибудь мне помочь?
Я не в состоянии получить точные требования. Можете ли вы объяснить, что именно вы хотите? Вы хотите всплывающее окно или всплывающее окно? Вы также можете заглянуть в эту библиотеку http://jquerytools.org/ –
спасибо за ваш ответ. Я хотел бы использовать всплывающее окно highslide, как div в относительном положении. Ты лучше знаешь, что я хочу сказать? – clR
В моем случае у меня в div на моей веб-странице большое изображение и небольшая галерея всех моих изображений ниже (миниатюр) со следующей и кнопкой предварительного просмотра. Вэнь вы кликаете на одном из них, большое изменение изображения, как миниатюра ниже, где показано выбранное изображение (граница вокруг, маленькая стрелка под выбранным эскизом или что-то в этом роде). Я выбрал highslide, потому что он делает именно то, что я хочу, с эффектами прозрачности и совершенным потоком. Вы видите? – clR