Page navigation for Team Header

Site: http://helenhughes.com.au

I'm using but the second page just disappears. I've tried different nested div settings but no go. How do I get the second page to display?

<div class="gkTeam" data-cols="1" data-pages="2">
<div>
<div class="active">
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/photos/Melissa_Quirk-400.jpg" alt="Melissa Quirk" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s">
<h3><a href="team/melissa-quirk">Melissa Quirk</a></h3>
<p>Having made her mark in property management and administration support, Melissa Quirk has become a vital part of the McGrath sales team as a dedicated buyer’s agent for Helen Hughes. </p>
<small></small></figcaption></figure>
</div>
</div>
<div>
<div class="active">
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/photos/Kian_Donaldson-400.jpg" alt="Kian Donaldson" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s">
<h3><a href="team/kian-donaldson">Kian Donaldson</a></h3>
<p>Motivated by a passion for Real Estate and the desire to achieve quality results, Kian Donaldson’s commitment is second to none. With a fresh energetic approach, Kian offers immense enthusiasm and a positive ‘can do’ attitude making him a vital member of Helen Hughes’s team.</p>
<small></small></figcaption></figure>
</div>
</div>
</div>

<div style="clear:both"></div>

thanks
Garth

Could you please be more specific? I see "My Team" module displays correctly.

Cyberek, I have set the page back to two across format for the client to see, however the code I have put in the page is actually two pages of the same data, so when you click the arrow it should slide another set of the same two pictures.

The code that i have pasted in my initial email is for one entry to show and then the other to show when I click the arrow. However it seems to briefly appear for a millisecond and then disappear (fade to white, or skip).

I can't figure out how to create the second page using the div code supplied.

1. Please update your template.
2. Use this code as a base:

Code: Select all

<div class="gkTeam" data-cols="4" data-pages="2">
   <div>
      <div class="active">
         <figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_1.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s"><h3>John Hammond</h3><small>CEO, Creative Director</small></figcaption></figure>
         <figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.2s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_2.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.3s"><h3>Dennis Hawkings</h3><small>Lead Developer</small></figcaption></figure>
         <figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_3.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.5s"><h3>Tom Weerd</h3><small>General manager</small></figcaption></figure>
         <figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.6s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_4.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.7s"><h3>John Doe</h3><small>Webmaster</small></figcaption></figure>
      </div>

      <div>
         <figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_1.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s"><h3>John Hammond</h3><small>CEO, Creative Director</small></figcaption></figure>
         <figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.2s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_2.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.3s"><h3>Dennis Hawkings</h3><small>Lead Developer</small></figcaption></figure>
         <figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_3.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.5s"><h3>Tom Weerd</h3><small>General manager</small></figcaption></figure>
         <figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.6s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_4.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.7s"><h3>John Doe</h3><small>Webmaster</small></figcaption></figure>
      </div>
   </div>
</div>


Your supplied code is what is supplied with the demo. It doesn't work.

And yes, I tried your code and the second page suffers the same problem - a brief flash to show that the second page exists, but then it disappears so the whole are is blank. Which is what happens with my code (supplied).

Code: Select all

<div class="gkTeam" data-cols="2" data-pages="2">
<div>
<div class="active">
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/photos/Melissa_Quirk-400.jpg" alt="Melissa Quirk" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s"><h3><a href="team/melissa-quirk">Melissa Quirk</a></h3><p>Having made her mark in property management and administration support, Melissa Quirk has become a vital part of the McGrath sales team as a dedicated buyer’s agent for Helen Hughes. </p><small>Real Estate Sales Executive</small></figcaption></figure>
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.2s after 0.1s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/photos/Kian_Donaldson-400.jpg" alt="Kian Donaldson" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.2s"><h3><a href="team/kian-donaldson">Kian Donaldson</a></h3><p>Motivated by a passion for Real Estate and the desire to achieve quality results, Kian Donaldson’s commitment is second to none. With a fresh energetic approach, Kian offers immense enthusiasm and a positive ‘can do’ attitude making him a vital member of Helen Hughes’s team.</p><small>Real Estate Sales Executive</small></figcaption></figure>
</div>

<div>
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/photos/Melissa_Quirk-400.jpg" alt="Melissa Quirk" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s"><h3><a href="team/melissa-quirk">Melissa Quirk</a></h3><p>Having made her mark in property management and administration support, Melissa Quirk has become a vital part of the McGrath sales team as a dedicated buyer’s agent for Helen Hughes. </p><small>Real Estate Sales Executive</small></figcaption></figure>
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.2s after 0.1s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/photos/Kian_Donaldson-400.jpg" alt="Kian Donaldson" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.2s"><h3><a href="team/kian-donaldson">Kian Donaldson</a></h3><p>Motivated by a passion for Real Estate and the desire to achieve quality results, Kian Donaldson’s commitment is second to none. With a fresh energetic approach, Kian offers immense enthusiasm and a positive ‘can do’ attitude making him a vital member of Helen Hughes’s team.</p><small>Real Estate Sales Executive</small></figcaption></figure>
</div>

</div>
</div>


I appreciate the replies, but would actually like an answer to my original question as to why the second page disappears, and what code to use to correct it. I can only assume you haven't tested this code i your own template, or your nhouse template includes some code changes that mine doesn't. I downloaded this template on the 30th of April. If there's been some modifications since I am not aware of them.

Please note that because this site is live, so I have put it back to the original format of 2 columns on the page, however I have also included those exact same columns in a second page (which you will see doesn't work).
Thank you
Garth

Is your template up to date?
If the code works on demo and on your site not it is either outdated template or you have some syntax error in your html (missing closing html tag for example).

Ah.. can you believe it. 5 days after downloading this, it's been updated - I now notice quite some differences in the module configuration pages as well... I wonder how much it's going to affect my customisations which are mainly done as overrides.

I think I'll give the update a miss, as this isn't necessary until the client requires it. Deal with it then.
Thanks

ps. you may want to change the 1.92Mb for the Quickstart download filesize on John S.

Yeah, sometimes we release some big changes to templates when we detect some problems with functionalities.
I'll check the package size and forward the info to devteam.