I'm trying to set up an in-page highslide gallery on my site. However, I'm experiencing problems with setting the size of the epxander.
The page with the gallery is http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html (wait a moment until the page loads completely)
I want the big image (the expander) to be no more than , say, 300x200 px .
However, right now it is 960x720 .
The annoying thing is that I can't find a place in the code where this 960x720 size is set.
I'm trying to set 300x200 size in my code, but for some reason it does not work:
$gallery = "
hs.align = 'auto';
hs.transitions = ['expand', 'crossfade'];
//hs.width = 200;
//hs.zIndexCounter = 1;
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
//relativeTo: 'viewport',
overlayOptions: {
position: 'bottom center',
offsetY: 50,
offsetX: -5
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander',
//width: '200px', // Must be same with as the width in the inPageOptions
//offsetY: 115
}
});";
$gallery2 = "
// Options for the in-page items
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: false,
wrapperClassName: 'in-page controls-in-heading',
useBox: true,
//minWidth: 200,
//minHeight: 150,
width: 300,
height: 200,
targetX: 'gallery-area 10px',
targetY: 'gallery-area 10px',
captionEval: 'this.thumb.alt',
numberPosition: 'caption'
}
hs.onSetClickEvent = function ( sender, e ) {
// set the onclick for the element, output the group name to the caption for debugging
e.element.onclick = function () {
return hs.expand(this, inPageOptions);
}
// return false to prevent the onclick being set once again
return false;
}
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
//$('a.highslide').hide();
$('a.highslide').first().click();
});
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
if (/in-page/.test(this.wrapper.className)) return hs.next();
}
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
if (/in-page/.test(this.wrapper.className)) 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);
}
}
});";
echo $gallery;
echo $$gallery2;
Any ideas on why it does not work?
Thanks.
In addition to change the width and height for inPageOptions
, you also need to change allowSizeRedution
from false
to true
.
// Options for the in-page items
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: true,
wrapperClassName: 'in-page controls-in-heading',
useBox: true,
//minWidth: 200,
//minHeight: 150,
width: 300,
height: 200,
targetX: 'gallery-area 10px',
targetY: 'gallery-area 10px',
captionEval: 'this.thumb.alt',
numberPosition: 'caption'
};
Your gallery will be placed centered at the top of your page since the #gallery-area
div is missing in your page. If the #gallery-area
div was present, you would need to change the height and width of this div to fit the reduced size of the gallery.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.