csebasti
Posts: 12
Joined: Tue Dec 09, 2008 6:54 am

Gallery: "next image" button call first image on next page?

I have set up a website to show my photos, and am using highslide. Everything is working great, but I'd like to add another feature and can't find info on if it can be done.

First, here is the site in question: http://bc-sebastian.com/chris/Landscape_p1.php (the server seems to be having some intermittent problems. I apologize if you can't get the site to load.)

That is the first page of my landscape gallery, and as you can see, there are 3 more pages. When viewing the images in the gallery, when you get to the last one and hit the "next" button or the right arrow key, the expander closes as it should. I would like to know if it is possible to, rather than just closing the expander, have page 2 load, and the first image in that gallery expand. I tried searching for info on this, but didn't have any luck finding anything.

Thanks for the help.

Chris
Last edited by csebasti on Thu Aug 13, 2009 12:19 am, edited 1 time in total.
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Gallery: "next image" button call first image on next pa

Nice prev/next tweak Chris!

There's no multipage navigation built into Highslide, but you can create one yourself.

1) Add the class name 'last' to the last image in your page.
2) Instead of calling hs.next directly in the nav-next, call this function:
hs.nextOrFlip = function(el) {
var exp = hs.expander(el);
if (exp.a.className == 'last') window.location.href = 'page2.php?autoload=thumb1';
else hs.next();
}
3) See http://highslide.com/studies/querystrin ... oad=thumb1 for how to autoload the first image on the next page.


The above info is outdated. Please see this post: http://highslide.com/forum/viewtopic.php?p=20273#p20273
Torstein Hønsi
CTO, Founder
Highsoft
csebasti
Posts: 12
Joined: Tue Dec 09, 2008 6:54 am

Re: Gallery: "next image" button call first image on next page?

Thanks for the quick response.

I think I pretty much understand what you said, but I'm having some trouble making it work. I've got the autoload thing down, so no problem there. Thanks for that link.

My problem is with implementing the function to load the next page. I added the function in the head section of the page (well, actually in the header) and changed the function call in the nav-next.

1) I'm not even close to being a web design expert, so excuse my ignorance here. You say to add class name 'last' to the last image. All of the images already have a class name of 'highslide' so do I change it to 'last'? Obviously doing that makes it lose its css styles, so I copied the '.highslide img' style to a new one called '.last img ' so it would retain its style. But as I've also lost the 'zoom in' cursor, I think I've missed something. Would it work to leave the class as is, and give it an id of 'last' instead?

2) With the way it is, when I click on the next button, all it does is scrolls to the top of the page, regardless of which image I have expanded, instead of loading the next page. Maybe I missed something...

3) When I use the right arrow key on the keyboard, it functions as it did before making these changes. How do I get the arrow key to also call hs.nextOrFlip instead of hs.next? I tried finding it in the .js file, but couldn't.

Thanks for your help!

Chris
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Gallery: "next image" button call first image on next page?

Chris,

I made a live example for you and for the sake of future reference. This question has been asked before, so a live demo is useful. See http://highslide.com/studies/cross-page-1.html . I did some changes compared to what I told you above. For example to allow keyboard listening I override the hs.previousOrNext function instead of making a custom next function.
Torstein Hønsi
CTO, Founder
Highsoft
csebasti
Posts: 12
Joined: Tue Dec 09, 2008 6:54 am

Re: Gallery: "next image" button call first image on next page?

Thanks so much for the example! You're awesome!

I've got it working now, with a couple little changes so that the page name isn't hard coded since I need to do this for different galleries on my site. It took a little time to figure out since I know basically nothing about javascript, but I've got it working, so I'm happy.

Just one thing I can't figure out now. Take a look at the site: http://bc-sebastian.com/chris/Landscape_p1.php

If you scroll down (assuming you don't have a huge monitor that displays the entire page) and click a thumbnail at the bottom, it expands as it should. If you use the keyboard to move to next or previous, it works great. But if you click on one of the overlay buttons, it will scroll to the top of the page for some reason. I assume its an issue with my button overlay, but I don't know what's causing this. Any idea?

Thanks

Chris
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Gallery: "next image" button call first image on next page?

I forgot to return false from the overridden hs.previousOrNext function, so your browser redirected to #. The code in cross-page.js is updated.
Torstein Hønsi
CTO, Founder
Highsoft
csebasti
Posts: 12
Joined: Tue Dec 09, 2008 6:54 am

Re: Gallery: "next image" button call first image on next page?

Great. Works like a charm. Thanks again for all the help!

Chris
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Gallery: "next image" button call first image on next page?

An interesting implementation, and I'm figuring out how to incorporate it! There's one limitation, and I'm wondering if there's a way to overcome it.

If the visitor is on the first page, and launches the slideshow, this technique takes him to page 2 (after those first three images), but then the slideshow stops. So, the question is, is there a way to detect whether the visitor is running the slideshow, and if he is, a way to continue it on the next page?
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Gallery: "next image" button call first image on next page?

Good point EarlyOut! I've added this feature to http://highslide.com/studies/cross-page-1.html .
Torstein Hønsi
CTO, Founder
Highsoft
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Gallery: "next image" button call first image on next page?

Almost there! Things get a little confusing, because for this to work, you must have repeat: true, but that has an odd effect. On the second page, the "loop" at the end of the slide show goes back to first image on the second page. That also means that at the first image of the first page, the back-arrow takes you to the last image on the first page, rather than the last image on the last page.

I'm thinking that a more generalized solution is called for, one in which you can feed the script an array of the names of the index pages you want to string together, and it handles the calls to each subsequent page. In that case repeat: true would mean that you want the tail of the last page hooked to the head of the first.
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Gallery: "next image" button call first image on next page?

I created a more general solution now. The repeat option is now set to false. In fact, setting it to true will stop the crosspage gallery for now. Also, a crosspage option has been added to the slideshow. An array called hs.pages contains the file names. Hard coding the file names will perhaps not be optimal on a PHP or other dynamic script page, but it's a start.

Perhaps it's time for a real PHP script bundled with Highslide. We have the Editor, many users may now benefit from a ready made gallery script with slots for pasting the configuration from the Editor. A PHP script like that could browse a directory, generate thumbnails and cache images for viewing, and provide multi-page slideshows...
Torstein Hønsi
CTO, Founder
Highsoft
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Gallery: "next image" button call first image on next page?

admin wrote:I created a more general solution now. The repeat option is now set to false. In fact, setting it to true will stop the crosspage gallery for now. Also, a crosspage option has been added to the slideshow. An array called hs.pages contains the file names. Hard coding the file names will perhaps not be optimal on a PHP or other dynamic script page, but it's a start.
Very speedy! I was thinking this would be something to add to the "maybe in the next version" list (and I'm hoping that it will be integrated into Highslide JS 4.1.6, which will cut down on the code hacks I need to do to incorporate the changes now!).
admin wrote:Perhaps it's time for a real PHP script bundled with Highslide ... that could browse a directory, generate thumbnails and cache images for viewing, and provide multi-page slideshows...
No need for server-side scripting. Just download Jalbum and the Matrix skin! It already does all that - you tell Jalbum what images you want to use (including the ability to specify entire directory trees), use the Matrix skin settings to decide about all the options, and you're home-free. The skin (next version in beta testing) lets the user choose all sorts of index page options, and to control a raft of Highslide options with simple checkboxes and pull-down menus: caption position and format, expander cross-fading and duration, dimming, outline types, image borders, thumbstrip size and position, controlbar type (including some that aren't in the basic Highslide package), controlbar position, text for controls, slideshow, etc., etc.

Granted, it's not dynamic, but that keeps life simpler. You create the album on your PC and upload it. If you want to incorporate new images or change settings, you make those changes in the saved "project" on your PC, and upload the revised pages. One of the advantages is that you can host your albums just about anywhere - you don't need PHP support. The album is just static HTML pages, plus the excellent Highslide Javascript to create the magic.
cubefree
Posts: 1
Joined: Fri Jul 03, 2009 8:32 pm

Re: Gallery: "next image" button call first image on next page?

Is it possible to make the cross-page example auto expand AND auto start as well?

Thanks I answered my own question besides appending this to the URL:

Code: Select all

?autoload=highslide-first&autoplay=true

From an earlier post, I found these:

Code: Select all

// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
	document.getElementById('highslide-first').onclick();
});

// 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.previousOrNext();
};

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

Re: Gallery: "next image" button call first image on next pa

I'm trying to implement multipage navigation in my site and I'm not sure what file the code listed below needs to go into? I'm fairly new to Highslide and any assistance would be greatly appreciated.

1) Add the class name 'last' to the last image in your page.
2) Instead of calling hs.next directly in the nav-next, call this function:

Code: Select all

hs.nextOrFlip = function(el) {
   var exp = hs.expander(el);
   if (exp.a.className == 'last') window.location.href = 'page2.php?autoload=thumb1';
   else hs.next();
}
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Gallery: "next image" button call first image on next pa

Hi,

The info & code from TorsteinÔÇÖs first post is outdated. In his second post he posted this demo: http://highslide.com/studies/cross-page-1.html which uses totally different code. You also need this js file in addition to the regular highslide files: http://highslide.com/studies/cross-page.js
Study the source code. Note that you need to define your gallery pages in cross-page.js
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide JS Usage”