bwd
Posts: 20
Joined: Mon Dec 17, 2012 8:13 pm

How do I use a gallery AND zoomer on same page?

Hi, I have already set up a Highslide slideshow on one page of a website I have made, and on other pages I use Highslide to zoom (popup) images from thumbnails, but when I tried to put a slideshow on the same page as some of the Highslide thumbnails, the thumbnails somehow got incorporated into the slideshow, which I don't want. Does anybody know how I can fix this?

Also, can I have two or more different sized slideshows on the same page? Some of my images (for the first slideshow), are 930px wide by 500 high, some are 800px wide by 400 high, for the second slideshow. I'm not sure how I override the size for each one.

Many thanks in advance for any help you can give, and I do apologise if this has already been answered, but I did try searching and had no luck.
Windows 8.1 Pro. Firefox 32.0.3 with Firebug.
bwd
Posts: 20
Joined: Mon Dec 17, 2012 8:13 pm

Re: How do I use a gallery AND zoomer on same page?

I have partially fixed it. I set the gallery code to this:

Code: Select all

<a id="thumb1" class="highslide-gallery" href='images/image1a.gif'
onclick="return hs.expand(this, inPageOptions)" title=""> 
<img src='images/image1a.gif' alt=''/></a>

<a class="highslide-gallery" href='images/image1b.gif'
onclick="return hs.expand(this, inPageOptions)" title=""> 
<img src='images/image1b.gif' alt=''/></a>

etc.
and the slideshow now no longer displays the separate, zoomable images, because I changed all of them to say:

Code: Select all

<div class="hsbox">
<a href="images/dblarge.gif" class="highslide" onclick="return hs.expand(this, 
{ slideshowGroup: 'first-group' })"
title="Print screen">
<img src="images/dbsmall.gif"  alt="Print screen" width=200 height=108" />
<span>Enlarge picture</span>
But when I enlarge the zoomable images, they don't zoom out, they just appear immediately as the large image, and they all contain a set of thumbnails of all the other zoomable images on that page, at the top.

So I've sort of improved it, but I'm not quite there yet.
Windows 8.1 Pro. Firefox 32.0.3 with Firebug.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: How do I use a gallery AND zoomer on same page?

Hi,

Can you post a link to your page? I need to see it to be able to help you.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
bwd
Posts: 20
Joined: Mon Dec 17, 2012 8:13 pm

Re: How do I use a gallery AND zoomer on same page?

Hi Roadrash, many thanks for your help, you can view the test page I am working on here:

https://www.bondwebdesign.com/test/

I also noticed that I can pick up the slideshow image and drag it out of its container, it's all a bit odd.
Windows 8.1 Pro. Firefox 32.0.3 with Firebug.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: How do I use a gallery AND zoomer on same page?

Hi,

You need to use highslide-full.js for some of the functions for the in-page gallery to work.

To avoid thumbnails above the images that's not part of the in-page gallery, you need to tie the code for the controllbar/thumbnails (hs.addSlideshow) and the inPageOptions together with the same slideshowGroup. This slideshowGroup must be different than the slideshowGroup for the images that's not part of the in-page gallery.

Please see this demo: http://www.roadrash.no/hs-support/galle ... eries.html
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
bwd
Posts: 20
Joined: Mon Dec 17, 2012 8:13 pm

Re: How do I use a gallery AND zoomer on same page?

Hi Roadrash, I'm sorry but I still don't understand. I did look at the page you linked to, but I still don't get it. Don't you have an example page that just has a slideshow and then three zoomable images, not three popup slideshows as well?
I tried reading the tutorial here: http://www.highslide.com/tutorial
but found it really hard going. I have plenty of HTML and CSS experience, but know very little Javascript.
I tried looking at the example in the Highslide download, 'white-10px.html', but I can't work it out. It would be really, really helpful if the examples included something the same as what I am trying to do - surely there are plenty of people making websites with a slideshow and zoomable images on the same page?

Am I right in thinking that the code I need isn't going to be the same as the code on the page you linked to, because I don't have three pop up galleries?
Windows 8.1 Pro. Firefox 32.0.3 with Firebug.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: How do I use a gallery AND zoomer on same page?

Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
bwd
Posts: 20
Joined: Mon Dec 17, 2012 8:13 pm

Re: How do I use a gallery AND zoomer on same page?

A thousand thanks, Roadrash, that's almost perfect, but I have a close button on the top right of the slideshow image, and can't work out how to get rid of it. (Odd, because it doesn't appear on the example you gave, and I copied the Javascript exactly.) Also, when you load the page on my test site, the first slideshow image descends from the top of the screen and lands in the slideshow!
(I am currently developing the site on my PC using XAMP, so I can't send you the full version to look at, but I am going to be uploading it to my server tomorrow night, and could send you the link via PM, as it isn't quite ready yet, and I don't want it to be publicly disclosed anyway.)
Windows 8.1 Pro. Firefox 32.0.3 with Firebug.
bwd
Posts: 20
Joined: Mon Dec 17, 2012 8:13 pm

Re: How do I use a gallery AND zoomer on same page?

ps for some strange reason the slideshow isn't crossfading (which is vital to me, as I'm showing transitions between elements of a program). I'm using the following code, which has hs.transitions = ['expand', 'crossfade']; in it:

Code: Select all

<script type="text/javascript">
//<![CDATA[
// in-page gallery + plain image popups without controlbar

hs.graphicsDir = '/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.align = 'center';
hs.captionEval = 'this.a.title';
hs.dimmingOpacity = 0.6;
hs.wrapperClassName = 'borderless';

//close button 
    hs.registerOverlay({
    html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
    position: 'top right',
    fade: 2
});

// Add the slideshow providing the controlbar and the thumbstrip for the in-page gallery
hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 4000,
	repeat: true,
	useControls: true,
	overlayOptions: {
		position: 'bottom right',
		offsetX: -7,
        offsetY: 23
	},
	thumbstrip: {
		position: 'above',
		mode: 'horizontal',
		relativeTo: 'expander'
	}
});

// Options for the in-page gallery
var inPageOptions = {
	slideshowGroup: 'group1',
	outlineType: null,
	dimmingOpacity: 0,
	allowSizeReduction: false,
	wrapperClassName: 'in-page controls-in-heading',
	thumbnailId: 'gallery-area',
	useBox: true,
	width: 920,
	height: 350,
	targetX: 'gallery-area 10px',
	targetY: 'gallery-area 10px',
    numberPosition: 'caption',
    autoplay: true
};

// Open the first thumb on page load with a small delay
setTimeout(function () {
    try {
        document.getElementById('thumb1').onclick();
    } catch (e) {}
}, 1000);

// 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;
};

// in-page focus mod - prevent in-page gallery to focus above other expanders
hs.Expander.prototype.onAfterExpand = function() {
    if (/in-page/.test(this.wrapper.className) && this.slideshow && this.slideshow.zIndex === undefined) {
        this.slideshow.zIndex = this.wrapper.style.zIndex;
    }
};
hs.Expander.prototype.onFocus = function() {
    if (/in-page/.test(this.wrapper.className)) {
        if (this.slideshow && this.slideshow.zIndex) {
            this.wrapper.style.zIndex = this.slideshow.zIndex;
        }
        if (this.outline) {
            this.outline.table.style.zIndex = this.slideshow.zIndex - 1;
        }
    }
};

// Neccessary for dynamic zIndex mod
hs.expandDuration = (this.slideshowGroup == 'group1') ? 0 : 250;
hs.transitionDuration = (this.slideshowGroup == 'group1') ? 500 : 0;

// Dynamic dimmer zIndex mod:
hs.dim = function (exp) {
    if (!hs.dimmer) {
        hs.dimmer = hs.createElement('div', {
            className: 'highslide-dimming highslide-viewport-size',
            owner: '',
            onclick: function () {
                if (hs.fireEvent(hs, 'onDimmerClick')) hs.close();
            }
        }, {
            visibility: 'visible',
            opacity: 0
        }, hs.container, true);
    }
    hs.dimmer.style.zIndex = exp.wrapper.style.zIndex - 2;
    hs.dimmer.style.display = '';
    hs.dimmer.owner += '|' + exp.key;
    if (hs.geckoMac && hs.dimmingGeckoFix) hs.setStyles(hs.dimmer, {
        background: 'url(' + hs.graphicsDir + 'geckodimmer.png)',
        opacity: 1
    });
    else hs.animate(hs.dimmer, {
        opacity: exp.dimmingOpacity
    }, hs.dimmingDuration);
};

// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
    var i, exp;
    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);
        }
    }
}); 
//]]>
</script>
Windows 8.1 Pro. Firefox 32.0.3 with Firebug.

Return to “Highslide JS Usage”