It is currently Wed Apr 23, 2014 11:54 am Advanced search

Highslide JS, next page on slide show

Technical support, bug reports, feature requests and more.

Highslide JS, next page on slide show

Postby Shturmfogell » Fri Mar 11, 2011 11:41 pm

Hi!

I am trying to implement Highslide JS into phpbb3 based gallery and met a problem with next page. For example I have 1000 pictures which are divided by page pagination. Is there any way to make a slideshow on a play mode to move to a next page of pagination?
User avatar
Shturmfogell
 
Posts: 7
Joined: Fri Mar 11, 2011 11:30 pm
Location: Abkhazia

Re: Highslide JS, next page on slide show

Postby EarlyOut » Sat Mar 12, 2011 12:48 am

It can be done, but it's not easy.

Here's a thread in which this was discussed: viewtopic.php?f=1&t=4311&start=0&st=0&sk=t&sd=a

And a demo page: http://highslide.com/studies/cross-page-1.html
User avatar
EarlyOut
 
Posts: 1705
Joined: Sun Nov 11, 2007 11:22 pm
Location: Sector R

Re: Highslide JS, next page on slide show

Postby Shturmfogell » Sat Mar 12, 2011 7:27 pm

Tnx! Yes, I see but I am ready to go through :)
So far I made id="highslide-first" and id="highslide-last" appear in the first and last images of a loop and made the script pass to a second page. But a first image on the second page doesn't want to autoload and a most tough thing is that I just can't imagine how to insert all pages of pagination in here:
Code: Select all
// Define what pages to loop through
hs.pages = [

];
User avatar
Shturmfogell
 
Posts: 7
Joined: Fri Mar 11, 2011 11:30 pm
Location: Abkhazia

Re: Highslide JS, next page on slide show

Postby Shturmfogell » Sat Mar 12, 2011 7:55 pm

Image on second page loaded! But pagination problem stays...
User avatar
Shturmfogell
 
Posts: 7
Joined: Fri Mar 11, 2011 11:30 pm
Location: Abkhazia

Re: Highslide JS, next page on slide show

Postby RoadRash » Mon Mar 14, 2011 2:46 pm

Shturmfogell wrote:But pagination problem stays...

We need to know a bit more about your problem.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8183
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Highslide JS, next page on slide show

Postby Shturmfogell » Mon Mar 14, 2011 3:07 pm

This is an example of phpbb3 pagination block in which I need to implement autoclick or something on a (href="{NEXT_PAGE})

Code: Select all
<!-- IF PAGE_NUMBER -->
<div class="topic-actions">
<!-- IF PREVIOUS_PAGE --><a href="{PREVIOUS_PAGE}" class="left-box {S_CONTENT_FLOW_BEGIN}">{L_PREVIOUS}</a><!-- ENDIF -->
<!-- IF NEXT_PAGE --><a href="{NEXT_PAGE}" class="right-box {S_CONTENT_FLOW_END}">{L_NEXT}</a><!-- ENDIF -->
<br><br>
<div class="pagination">
<!-- IF not PAGINATION -->{TOTAL_PICS} &bull; {PAGE_NUMBER}<!-- ELSE -->{TOTAL_PICS} &bull; <a href="#" onclick="jumpto(); return false;" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a> &bull; <span>{PAGINATION}</span><!-- ENDIF -->
</div>
</div>
<!-- ENDIF -->


As I understand I am very close to a solution but I am very weak on a Javascript so still can't figure it out. In the cross-page.js I've found hs.addEventListener function and I see that it's listening whether first or last image loaded but how can i make it click {NEXT_PAGE} and how can I properly remove or rewrite the hs.pages function, i don't know.

Here is my cross-page.js

Code: Select all
/**
* This file demonstrates how a Highslide gallery can be extended to work across pages
*/


hs.graphicsDir = 'http://www.apelsin.travel/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
hs.addSlideshow({
   //slideshowGroup: 'group1',
   crosspage: true,
   interval: 5000,
   repeat: false,
   useControls: true,
   fixedControls: 'fit',
   overlayOptions: {
      opacity: .75,
      position: 'bottom center',
      hideOnMouseOut: true
   }
});

// Define what pages to loop through
hs.pages = [
   'hot.php',
   'hot.php?start=9'
];

// Modify the previousOrNext method to jump to the next page when the last thumb is reached
hs.basePreviousOrNext = hs.previousOrNext;
hs.previousOrNext = function(el, op) {
   var exp = hs.getExpander(el),
      page,
      autoplay = '';

   for (var i = 0; i < hs.pages.length; i++) {
      if (window.location.href.indexOf(hs.pages[i]) != -1) {
         page = i;
         break;
      }
   }
   if (exp) {
      if (exp.slideshow && exp.slideshow.autoplay) autoplay = '&autoplay=true' ;
      if (op == 1 && exp.a.isLast)
         window.location.href = hs.pages[page + 1] +
            '?autoload=highslide-first'+ autoplay;

        else if (op == -1 && exp.a.isFirst)
         window.location.href = hs.pages[page - 1] +
            '?autoload=highslide-last'+ autoplay;

      else return hs.basePreviousOrNext(el, op);
   }
   return false;
}
hs.Slideshow.prototype.checkFirstAndLast = function() {
   /// disable first and last previous and next
   if (this.repeat || !this.controls) return;
   var exp = hs.expanders[this.expKey],
      cur = exp.getAnchorIndex(),
      re = /disabled$/,
      isFirst = (cur == 0),
      isLast = (cur + 1 == hs.anchors.groups[exp.slideshowGroup || 'none'].length);

   // crosspage addition
   if (this.crosspage) {
      // keep previous button on subsequent pages
      if (isFirst && window.location.href.indexOf(hs.pages[0]) == -1) {
         isFirst = false; // do not disable
         exp.a.isFirst = true;
      }
      // keep next button on all pages but the last
      if (isLast && window.location.href.indexOf(hs.pages[hs.pages.length - 1]) == -1) {
         isLast = false; // do not disable
         exp.a.isLast = true;
      }
   }
   // end crosspage addition

   if (isFirst)
      this.disable('previous');
   else if (re.test(this.btn.previous.getElementsByTagName('a')[0].className))
      this.enable('previous');
   if (isLast) {
      this.disable('next');
      this.disable('play');
   } else if (re.test(this.btn.next.getElementsByTagName('a')[0].className)) {
      this.enable('next');
      this.enable('play');
   }
}
// Open a specific thumbnail based on querystring input.
hs.addEventListener(window, "load", function() {
   // get the value of the autoload parameter
   var autoload = /[?&]autoload=([^&#]*)/.exec(window.location.href);
   // virtually click the anchor
   if (autoload) document.getElementById(autoload[1]).onclick();
});

// Pick up and apply the autoplay parameter
hs.Expander.prototype.onInit = function() {
   var autoplay = /[?&]autoplay=([^&#]*)/.exec(window.location.href);
   this.autoplay = (autoplay && autoplay[1] == 'true');
}
User avatar
Shturmfogell
 
Posts: 7
Joined: Fri Mar 11, 2011 11:30 pm
Location: Abkhazia

Re: Highslide JS, next page on slide show

Postby RoadRash » Mon Mar 14, 2011 10:27 pm

The cross-page mod depends on the url of the pages added to hs.pages so you canÔÇÖt remove the hs.pages part of the code. IÔÇÖm not sure if you can use the cross-page mod if you donÔÇÖt have the urlÔÇÖs for the pages.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8183
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Highslide JS, next page on slide show

Postby Shturmfogell » Tue Mar 15, 2011 4:44 am

I did it this way:
Code: Select all
var id = document.getElementById("nextpageg").getAttribute("href");


// Define what pages to loop through
hs.pages = [
   '/',
   id
];


Tnx for your help!
User avatar
Shturmfogell
 
Posts: 7
Joined: Fri Mar 11, 2011 11:30 pm
Location: Abkhazia


Return to Highslide JS Usage

Who is online

Users browsing this forum: No registered users and 5 guests