ADD 'NEXT PAGE' TO GALLERY?

[hendrix940]

Thanks in advance.

I’m trying to add a ‘NEXT PAGE’ to our portfolio gallery. I want to include perhaps 12 – 16 images per page, then the user would have to click a ‘NEXT PAGE’ button that would automatically load the next 12 – 16 images in that portfolio category. I would the ‘NEXT PAGE’ button to only load images from the same portfolio category.

Any help is greatly appreciated. Our test site: http://66.90.76.122/~hendrixt/cms/portfolio

[jurotek]

I suppose you could use tabbed navigation with tabs mark up below the gallery content in your html. Then you could cycle through 12 or 16 different images enclosed within each tab ID tag on the same page.

[jurotek]

Here is quick and simple example I put together during lunch break

[hendrix940]

Yes! That’s a great idea! Do you know if it would automatically fill over into the second and third pages or did you have to set it like – images 1-6 are on page 1. images 6-7 are on page 2, etc. ? Thanks!

[jurotek]

The answer lies in by looking at the html mark up

[hendrix940]

Very good. Yes I understand. Thank you. Sir, from your vantage point do you think it would be possible to apply your example to the gallery found on our test portfolio?
http://66.90.76.122/~hendrixt/cms/portfolio

[jurotek]

Of course you can do it.

<div id="page1" class="tab-content">
<div class="thumbs masonry">
your images
</div>
</div>
<div id="page2" class="tab-content">
<div class="thumbs masonry">
your images
</div>
</div>
<div id="page3" class="tab-content">
<div class="thumbs masonry">
your images
</div>
</div>
<ul id="tabs">
<li><a href="#page1">Next Page</a></li>
<li><a href="#page2">Next Page</a></li>
<li><a href="#page3">Next Page</a></li>        
</ul>
</div>

The wording in navigation should be more like 1st Page, 2nd Page, 3rd Page and so on

[hendrix940]

Interesting. I’m going to study this and wrap my head around where exactly to implement this into the existing code. Thank you for the great suggestion and feedback sir.

[jurotek]

welcome

[hendrix940]

@jurotek, sir with out taking too much of your time… can you offer another small suggestion as to where I begin to place your code into our sample page? I’m confused as to where to begin. Thank you very much.

[Author]

Posts