Our support has moved

Instead of continuing the battle against spammers, we decided to close the forum for new users and topics. But don't worry, there are still plenty of ways to reach us. Most notably, we will move our attention to Stack Overflow, where we will monitor questions under the tags [highcharts], [highstock] and [highslide].

For other ways of getting in touch with us, see Highcharts Support or Highslide Support.

Torstein Hønsi, CTO, 2013-01-29

Highslide gallry to be refreshed after each slideshow

Help for using the Highslide Editor, the visual way of setting up Highslide.
Post a reply

Highslide gallry to be refreshed after each slideshow

Postby merlin » Sat Apr 16, 2011 3:37 am

Hi,

Please help.

I am using highslide gallery and I need to refresh the page after completing each slideshow.(Images are dynamically added to the image folder) Currently I have added the page refresh code at highslide-full.js which is highlighted below.But it skips the last image. The issue is in Interner explorer only. Please help me to solve this.

Kindly help.
Code: Select all
checkFirstAndLast: function() {
   
   if (this.repeat || !this.controls) return;
   var exp = hs.expanders[this.expKey],
      cur = exp.getAnchorIndex(),
      re = /disabled$/;
        if (cur == 0)
            {
      this.disable('previous');

            }
   else if (re.test(this.btn.previous.getElementsByTagName('a')[0].className))
      this.enable('previous');
   if (cur == hs.anchors.groups[exp.slideshowGroup || 'none'].length) {
           
                this.disable('next');
                this.disable('play');
               
      location.reload(true); // Page refresh after completion of each loop
         
   }
        else if (re.test(this.btn.next.getElementsByTagName('a')[0].className)) {

      this.enable('next');
      this.enable('play');
   }
},
Last edited by merlin on Wed Apr 20, 2011 2:44 am, edited 1 time in total.
merlin
 
Posts: 5
Joined: Thu Apr 07, 2011 7:05 pm
Top

Re: Highslide gallry to be refreshed after each slideshow

Postby torstein.honsi » Mon Apr 18, 2011 11:34 am

Hi,

With the current code, you are running the reload just as the last image is shown, which is obviously not what you want. Istead, you could start a timer: http://jsfiddle.net/highcharts/uahMW/
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9150
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway
Top

Re: Highslide gallry to be refreshed after each slideshow

Postby merlin » Mon Apr 18, 2011 6:38 pm

I am using a dynamic gallery : The slideshow starts on page load. The page should be refreshed after each slideshow loop. I have modified the code and it works fine in other browsers except intrenet explorer.
The error in IE: The slideshow skips last image in the group. Here is my code.. Please help me to solve this issue.

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta http-equiv="refresh" content="10"/>-->
<title>Highslide JS</title>

<!--
   1 ) Reference to the files containing the JavaScript and CSS.
   These files must be located on your server.
-->

<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->



<!--
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 1;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
   //slideshowGroup: 'group1',
   interval: 5000,
   repeat: false,
   useControls: true,
   overlayOptions: {
      className: 'text-controls',
      position: 'bottom center',
      relativeTo: 'viewport',
      offsetY: -60
   },
   thumbstrip: {
      position: 'bottom center',
      mode: 'horizontal',
      relativeTo: 'viewport'
   }
});



</script>


</head>

<body>

<!--
   3) Put the thumbnails inside a div for styling
-->

<div class="highslide-gallery" style="width: 600px; margin: auto" >


   <a id="autoload" class='highslide' href='../images/thumbstrip02.jpg'  onclick="return hs.expand(this, { autoplay:true })" >
      <img src='../images/thumbstrip02.thumb.png' alt='Windy landscape'/></a>

   <a class='highslide' href='../images/thumbstrip03.jpg' onclick="return hs.expand(this)">
      <img src='../images/thumbstrip03.thumb.png' alt='Sunset in the mountain'/></a>

   <a class='highslide' href='../images/thumbstrip04.jpg' onclick="return hs.expand(this)">
      <img src='../images/thumbstrip04.thumb.png' alt='Resting skier'/></a>

   <a class='highslide' href='../images/thumbstrip05.jpg' onclick="return hs.expand(this)">
      <img src='../images/thumbstrip05.thumb.png' alt='Contemplating dog'/></a>

   <a class='highslide' href='../images/thumbstrip06.jpg' onclick="return hs.expand(this)">
      <img src='../images/thumbstrip06.thumb.png' alt='Cabins'/></a>

   


</div>
</body>
</html>

--------------------------------------------------
in highslide-full.js I hadded the page reload code.
Code: Select all
checkFirstAndLast: function() {
   if (this.repeat || !this.controls) return;
   var exp = hs.expanders[this.expKey],
      cur = exp.getAnchorIndex(),
      re = /disabled$/;
   if (cur == 0)
      this.disable('previous');
   else if (re.test(this.btn.previous.getElementsByTagName('a')[0].className))
      this.enable('previous');
   if (cur + 1 == hs.anchors.groups[exp.slideshowGroup || 'none'].length) {
      this.disable('next');
      this.disable('play');
        location.reload(true); // Page refresh after completion of each loop
   } else if (re.test(this.btn.next.getElementsByTagName('a')[0].className)) {
      this.enable('next');
      this.enable('play');
   }
},
merlin
 
Posts: 5
Joined: Thu Apr 07, 2011 7:05 pm
Top

Re: Highslide gallry to be refreshed after each slideshow

Postby RoadRash » Mon Apr 18, 2011 7:33 pm

As Torstein said, your current code will reload the page just before the last image is shown. Torstein’s timer hack will fix this issue.
Instead of adding the hack directly in the highslide-full.js file, you can add this in a script block in the head section of your page, or in its own javascript file:
Code: Select all
// Hack to reload at the last image
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$/;
    if (cur == 0) this.disable('previous');
    else if (re.test(this.btn.previous.getElementsByTagName('a')[0].className)) this.enable('previous');
    if (cur + 1 == hs.anchors.groups[exp.slideshowGroup || 'none'].length) {
        this.disable('next');
        this.disable('play');

        // Start reload hack
        setTimeout(function() {
            window.location.reload();
        }, this.interval);
        // End reload hack

    } else if (re.test(this.btn.next.getElementsByTagName('a')[0].className)) {
        this.enable('next');
        this.enable('play');
    }
};


Here’s a demo page with your gallery settings and Torstein’s timer hack: http://www.roadrash.no/hs-support/test/10243.html
Hilde
Highslide Support Team

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

Re: Highslide gallry to be refreshed after each slideshow

Postby merlin » Tue Apr 19, 2011 7:56 pm

Hello Torstein & Roadrash,

Thank you so much for help. It works perfect. :D
merlin
 
Posts: 5
Joined: Thu Apr 07, 2011 7:05 pm
Top

Re: Highslide gallry to be refreshed after each slideshow

Postby merlin » Wed Apr 20, 2011 7:03 pm

I always refer ur site. It is very helpful.

Hello one more doubt.
is there any way to show slideshow[ without page refresh] from image folder which updated dynamically.
merlin
 
Posts: 5
Joined: Thu Apr 07, 2011 7:05 pm
Top

Re: Highslide gallry to be refreshed after each slideshow

Postby RoadRash » Fri Apr 22, 2011 7:49 am

Highslide is pure client side script and can't read from a folder, so you need to use a server side script to achieve that.
Hilde
Highslide Support Team

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

Re: Highslide gallry to be refreshed after each slideshow

Postby merlin » Sat Apr 23, 2011 6:59 pm

thank you :)
merlin
 
Posts: 5
Joined: Thu Apr 07, 2011 7:05 pm
Top
Post a reply

Return to Highslide Editor

Who is online

Users browsing this forum: No registered users and 3 guests

Powered by phpBB® Forum Software © phpBB Group