User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Two Galleries with Specific Options and Event Handlers

Hello,

I am trying to devise a way of displaying two galleries simultaneously on the same page, each one with a specific aspect and event handler. A test page can be seen here:

http://www.alterlittera.com/al_htm/oldt ... r_test.htm

I think I have managed to solve every important issue except for just one: When images from the bottom-gallery are expanded, the top-gallery (a simple autoplay slideshow) still remains running. This has two important drwbacks: (1) the slideshow images are displayed on top of the expanded bottom images, and (2) the user can interact with the slideshow. I would like to disable (freeze) completely the slideshow gallery (but not the rest of the links on the page) as long as at least one of the bottom-gallery images remains expanded. I have managed to stop the slideshow, but it remains active anyway. Ideally, the page should work as follows:

1. As soon as an image from the bottom-gallery is expanded, the top-gallery (slideshow) stops and the user can't interact with it at all.
2. The user can expand as many bottom images as desired, as well as click on any standard link on the page.
3. When all of the expanded bottom images are closed (and only then), the slideshow resumes normally.

Any advise will be greatly appreciated. Regards.
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

I think I just managed to solve every issue (live test page from first post updated), except for the slideshow controls remaining clickable when the slideshow is below other expanders. I would like to deactivate those controls or, ideally, to make them disappear and reappear only when the slideshow is the only active expander.

Any advise will be greatly appreciated. Regards.
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

Live test page updated. Same problems. Any clue out there?

Thanks in advance.
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

Well, this is my last try on this topic. I would be very grateful if any member of the Highslide JS support team could answer my questions.

Thank you.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

The only way I can think of to make the controls for the top gallery disappear/reappear, is with jQuery.

Add this line after the included highslide-full.js file:

Code: Select all

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
See the two highlighted lines for how to hide/show the controlbar:

Code: Select all

// Set different options, counters and actions for top-slideshow (show) and bottom-sample (smpl) expanders
hs.Expander.prototype.onInit = function() {

    if (this.slideshowGroup == 'show') {
        hs.captionOverlay.position = 'below';
        hs.lang.number = 'Alter Headletter - Poster No. %1 of %2';
        hs.lang.restoreTitle = "";
        hs.lang.previousTitle = "Previous";
        hs.lang.nextTitle = "Next";
        hs.lang.playTitle = "Play";
        hs.lang.pauseTitle = "Pause";
        hs.transitionDuration = 1000;

        that = this;
    }
    else {
        hs.captionOverlay.position = 'below';
        hs.lang.restoreTitle = "Click or [ESC] to Close - Click and Drag to Move";
        hs.lang.focusTitle = "";
        hs.transitionDuration = 0;

        atleastoneinstance = 1; /* Update flag     */
        instances = instances + 1; /* Update counter  */
        that.slideshow.pause(); /* Pause slideshow */
        [hilight]$('.top-gal .highslide-controls').hide(); /* hide the controls */[/hilight]
    }
};

Code: Select all

// End focus mod and re-initialize top-slideshow gallery
hs.Expander.prototype.onFocus = function() {
    if (/top-gal/.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;
        }
    }
    if (this.slideshowGroup == 'show') {
        if (instances == 0 && atleastoneinstance) {
            this.slideshow.play();
            atleastoneinstance = 0;
            [hilight]$('.top-gal .highslide-controls').show(); /* show the controls */[/hilight]
        }
    }
};
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

I prefer not to use jQuery. I wonder if the same functionality can be achieved by making appropriate changes in the highslide-full.js file. I am already using a customized highslide-full.js file which adds some functionality to the original script (such as resizing expanded images from both bottom-right and top-left corners, and restoring moved/resized expanded images to their original position/size), so I don't worry about customizing it further.

Thanks again.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

You canÔÇÖt achieve this by making changes in highslide-full.js - this must be added to the onInit and onFocus events, and to the correct if statements in these two events, to take effect according to the flag/counter you have created.

I used jQuery for this becuase, in my opinion, jQuery is the easiest to use when I need to target class names like I had to in this case: the wrapperClassName for the gallery .top-gal + .highslide-controls
But you can use any method you want as long as you are using these two class names (.top-gal .highslide-controls). The clue is to set .top-gal .highslide-controls to display: none; in the onInit event and set .top-gal .highslide-controls to display: block; in the onFocus event.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

Thanks for the explanation. I'm afraid I'm not skillful enough with Javascript to implement your last suggestion, so I think I will go ahead with jQuery after all. It works perfect, and the small jQuery .js file requiered doesn't seem to increase page load times significantly. Here is a link to the final test page: http://www.alterlittera.com/al_htm/oldt ... r_test.htm

Thank you very much for your support. I wish you the best.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

I have bookmarked you website in my fonts folder. Im a little fontaholic :)
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

I would be very happy, as a way to say thank you for your support, if you accepted a complimentary copy of any of Alter Littera fonts. If so, please e-mail to [email protected] stating which font you prefer and it will be sent to you right away.

Best wishes.
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

Live test pages have been removed from alterlittera.com. You can see some final implementations of "Two Galleries with Specific Options and Event Handlers" here, here, and here (just to list a few).

Thanks again for your support.
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Two Galleries with Specific Options and Event Handlers

Some updated final implementations of "Two Galleries with Specific Options and Event Handlers" can be seen here, here and here (just to list a few). Note the tiny thumbstrip below the expander.

Thanks again for your support.

Return to “Highslide JS Usage”