I've setup highslide to work in a fairly customized way on my wordpress portfolio website. It is setup so that after a user has clicked on a thumbnail, and that image is shown in the highslide overlay, they can click on the image again and it expands to it's full size (larger than the window) and centers it in the window, whereupon the user can use the cursor to move the image around to see more of it or click on it again to return it to it's original size.
All this works as intended on a desktop, but on mobile I am running into what looks like a conflict with how the device interprets swipe motions from left to right (see more of the left side of the image) and top to bottom (see more of the top of the image). When an image is expanded to full size, the user can move the image to reveal more of the right or bottom sides of it without any problem, but when they try to move it to reveal the left or top of the image, the image doesn't move. It seems that both actions instead trigger functions of either the mobile device or the the mobile browser: Left just doesn't move at all (though, on my LG-G4 I get a graphic overlay which is common to the device that seems intended to indicate that there isn't another screen to swipe to in that direction), while top activates a browser function to reload the page (though sometimes if you scroll in a different direction first you can then scroll top and it will allow you to scroll all the way to the top).
A workaround that I could implement is to detect the device type and, on mobile, align the top-left corner of the image with the top-left corner of the browser window, but this is less than ideal. I'm wondering if someone here might be able to suggest a way to keep the image centered upon full expansion and enable the user to pan it in all directions, as it works on a desktop.
Check out this page (or any other on my site) as an example: http://the7thbough.com/portfolio-item/kharaha/
Below, I've pasted the custom code from my highslide config file. Note that it references variables pertaining to the site directory that are stored elsewhere:
Code: Select all
jQuery(document).ready(function() {
//The graphics directory must be set first
hs.graphicsDir = siteHighslideGraphicsURL;
/*
**************************************************************************************************
Variables
**************************************************************************************************
*/
//set cursor sources
var hsCursorImgOpen = 'zoomCursorsV04_Open.cur';
var hsCursorImgExpand = 'zoomCursorsV04_Expand.cur';
var hsCursorImgContract = 'zoomCursorsV04_Contract.cur';
//variables to hold the expander size before it is expanded to full-image size
var hsImgPreExpandWidth = 0;
var hsImgPreExpandHeight = 0;
//Set margins around featured image
var hsFeaturedImageMarginRight = 100;
var hsFeaturedImageMarginTop = 15;
//Set the class name that distinguishes custom gallery groups. If only one group is required, enclose all groups inside it
var hsCustomGalleryGroupClass = 'fbbHighslide_GalleryGroup';//Gallery groups make it so that only a given set of images are displayed as thumbnails in the pop-up viewer. To create a custom group simply enclose the given images within a div that has this class name. Note that each group also needs a unique id. If you are using wordpress galleries or something like it you must make sure that images which you want to be treated as separate groups are split into separate galleries so that you can enclose each gallery within it's own div.
var hsCustomGalleryGroupChecker = 0;
var hsGroupByWpGallery = false;//Set to true if you want to create a highslide gallery group for each Wordpress gallery. This only takes effect if no custom gallery groups have been created on the page.
var hsGalleryImageLinkPath = '.fbb_GalleryWrap a';//Use this when using Next-Gen Galleries. Formerly '.ngg-gallery-thumbnail a'
//var hsGalleryImageLinkPath = '.gallery-item a';//Use this when using standard Wordpress galleries
//var hsGalleryImageLinkPath = '.fbbHighslideGallery a';//Use this when creating custom galleries. This class name should be on a div enclosing the images you wish to be part of a gallery. Note that these containers must be sub-containers to any Gallery Group containers.
var hsGalleryImageLinkClass = 'highslide';//'highslide' is the required value of this variable. It should not be changed unless you are also making the required changes to the plugin's core files.
/* ************* For Centering ************* */
// get window scroll positions
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// set arbitrary offsets
var imgOffsetToCenterXAdjust = -1;
var imgOffsetToCenterYAdjust = -9;
/*
**************************************************************************************************
Standard settings customizations
**************************************************************************************************
*/
//lang strings
hs.lang.restoreTitle = 'Usage Tips: Arrow keys for next and previous images. LMB-click to expand and contract image. LMB-click-and-drag to move image. LMB-click outside of image to close the viewer.';
hs.lang.fbbNote = '<div class="fbbContent" style=""> <span class="fbbHighlight01" style="">Usage Tips:</span> View full resolution image with the <img class="fbbExpanderGraphic" src="' + hs.graphicsDir +'FBBnote_ExpandButton.png"/> button (top-right corner), or "f" hotkey. LMB click-and-drag to move the image. Arrow keys for next/prev.</div>';
//
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.wrapperClassName = 'FBB_highslide-custom01 borderless';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.95;
hs.dimmingDuration = 0;
hs.marginRight = hsFeaturedImageMarginRight; // make room for the thumbstrip and the controls
hs.marginTop = hsFeaturedImageMarginTop;
hs.numberPosition = 'null';
hs.showCredits = false;
hs.creditsTarget = '_blank';
hs.expandDuration = 0;
hs.restoreDuration = 0;
hs.transitionDuration = 0;
hs.allowMultipleInstances = false;
hs.numberOfImagesToPreload = 5;
hs.headingOverlay.position = 'top center';
/*
**************************************************************************************************
Add slideshow controller
**************************************************************************************************
*/
if(window.innerWidth >= window.innerHeight){
hs.addSlideshow({
//Note: slideshow groups are being handled by the "For Gallery" section below.
interval: 3000,
repeat: true,
useControls: true,
fixedControls: true,
overlayOptions: {
className: 'FBB_highslide-ControlsOuterWrap',
opacity: .8,
position: 'top right',
relativeTo: 'expander',
offsetX: -5,
offsetY: 10,
hideOnMouseOut: false,
},
thumbstrip: {
mode: 'vertical',
position: 'top right',
relativeTo: 'viewport',
offsetX: -10,
offsetY: 0,
}
});
}else{
hsFeaturedImageMarginRight = 0;
hsFeaturedImageMarginTop = 100;
hs.addSlideshow({
//Note: slideshow groups are being handled by the "For Gallery" section below.
interval: 3000,
repeat: true,
useControls: true,
fixedControls: true,
overlayOptions: {
className: 'FBB_highslide-ControlsOuterWrap',
opacity: .8,
position: 'top right',
relativeTo: 'expander',
offsetX: -5,
offsetY: 10,
hideOnMouseOut: false,
},
thumbstrip: {
mode: 'horizontal',
position: 'top left',
relativeTo: 'viewport',
offsetX: 0,
offsetY: 40,
}
});
}
/*
**************************************************************************************************
Add the "highslide" class name to each gallery image on a page and
control the application of highslide gallery groups
**************************************************************************************************
*/
jQuery('.' + hsCustomGalleryGroupClass).each(function(){
hsCustomGalleryGroupChecker++;
return false;
});
if (hsCustomGalleryGroupChecker > 0){
jQuery('.' + hsCustomGalleryGroupClass).each(function(i, $item) {
var grpID = $item.id;
jQuery('#' + grpID + ' ' + hsGalleryImageLinkPath).addClass(hsGalleryImageLinkClass).each(function() {
this.onclick = function() {
return hs.expand(this, {
slideshowGroup: grpID
});
};
});
});
} else {
jQuery(hsGalleryImageLinkPath).addClass(hsGalleryImageLinkClass).each(function() {
this.onclick = function() {
//if the flag is true sent an object with the property else an empty object
return hs.expand(this, hsGroupByWpGallery ? {
slideshowGroup: this.parentNode.parentNode.parentNode.id
} : {});
};
});
};
/*
**************************************************************************************************
For Single Images
**************************************************************************************************
*/
hs.onSetClickEvent = function(sender, e) {
e.element.onclick = function() {
return hs.expand(this, singleConfig);
}
return false;
};
var singleConfig = {
slideshowGroup: 'single-image',
outlineType: 'drop-shadow',
wrapperClassName: 'borderless',
numberPosition: null,
dimmingOpacity: 0
};
hs.registerOverlay({
slideshowGroup: 'single-image',
html: ' <div onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2
});
hs.Expander.prototype.onAfterExpand = function(){
/*
********************************************************************
Center the image
*/
// get window scroll positions
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// calculate full expander offsets to center it to the screen
var imgOffsetToCenterX = (Math.floor((window.innerWidth - hsFeaturedImageMarginRight - this.x.size) / 2) + scrollLeft + imgOffsetToCenterXAdjust);
var imgOffsetToCenterY = (Math.floor((window.innerHeight - hsFeaturedImageMarginTop - this.y.size) / 2) + scrollTop + hsFeaturedImageMarginTop + imgOffsetToCenterYAdjust);
// center the expander
hs.getExpander().moveTo(imgOffsetToCenterX, imgOffsetToCenterY);
};
/*
**************************************************************************************************
Control the expansion and contraction of the image between full-size-image and full-screen sizes,
and control the cursor in these stages
**************************************************************************************************
*/
//default cursor settings
hs.expandCursor = hsCursorImgOpen;
hs.restoreCursor = hsCursorImgExpand;
hs.Expander.prototype.onImageClick = function() {
/*
********************************************************************
Operations when the image is being displayed at less than it's full size
*/
if ((this.x.full > (this.x.imgSize || this.x.size)) || (this.y.full > (this.y.imgSize || this.y.size))) {
//store the image's pre-full-expand width and height
hsImgPreExpandWidth = this.x.size;
hsImgPreExpandHeight = this.y.size;
//set the expander to full image size
//hs.getExpander().doFullExpand();
hs.getExpander().resizeTo(this.x.full, this.y.full);
//discard cursor settings so they can be handled via the following code
hs.expandCursor = '';
hs.expandCursor = '';
//set cursor for the fully expanded image
document.getElementById(hs.lang.fbbCurrentImageName).style.cursor = "url(" + hs.graphicsDir + hsCursorImgContract + "), auto";
}
/*
********************************************************************
Operations when the image is currently being displayed at it's full size
*/
else {
if((window.innerWidth < (this.x.imgSize || this.x.size)) || (window.innerHeight < (this.y.imgSize || this.y.size))){
// rescale the expander to it's original full-screen dimensions
hs.getExpander().resizeTo(hsImgPreExpandWidth, hsImgPreExpandHeight);
// re-set the image's pre-full-expand width and height values to default
hsImgPreExpandWidth = 0;
hsImgPreExpandHeight = 0;
//discard cursor settings so they can be handled via the following code
hs.expandCursor = '';
hs.expandCursor = '';
//set cursor for the full-screen size image
document.getElementById(hs.lang.fbbCurrentImageName).style.cursor = "url(" + hs.graphicsDir + hsCursorImgExpand + "), auto";
}
}
/*
********************************************************************
Center the image
*/
// get window scroll positions
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// calculate full expander offsets to center it to the screen
var imgOffsetToCenterX = (Math.floor((window.innerWidth - hsFeaturedImageMarginRight - this.x.size) / 2) + scrollLeft + imgOffsetToCenterXAdjust);
var imgOffsetToCenterY = (Math.floor((window.innerHeight - hsFeaturedImageMarginTop - this.y.size) / 2) + scrollTop + hsFeaturedImageMarginTop + imgOffsetToCenterYAdjust);
// center the expander
hs.getExpander().moveTo(imgOffsetToCenterX, imgOffsetToCenterY);
/*
********************************************************************
Other
*/
//keep the image from being closed when clicked on
return false;
};
/*
**************************************************************************************************
Re-set the expander cursor settings to their defaults after the expander closes
**************************************************************************************************
*/
hs.Expander.prototype.onAfterClose = function(){
hs.expandCursor = hsCursorImgOpen;
hs.restoreCursor = hsCursorImgExpand;
};
});