In the members-only forum a user asks:
I love the PagePiling.js tutorial you do here:
Full Screen Scrolling Sections in Genesis using PagePiling.jsWhat I would like to do is use that Page Piling effect to go between portfolio items, where each change shows a different portfolio entry. Is there a way to link up PagePiling.js with the portfolio post type plugin so that a new portfolio item is shown every time you swap pages?
Thanks!
In this article we shall create a template for Portfolio Custom Post Type archive page such that 5 entries appear per page with each entry appearing full screen. The featured image will appear as background with title, excerpt and read more button overlayed in the middle. Visitors can go to next portfolio entry either by swiping down or pressing down arrow or right arrow keys or clicking the navigation circle at the right. The stacking effect is achieved using PagePiling jQuery script.
At the top of the screen, header will be set to appear in fixed position and near the bottom, archive pagination.
Screencast:
Screenshot:
In case an entry does not have a featured image, a pre-set image shall be used as fallback. A linear gradient from top to bottom shall be added on top of the background featured images to make the overlayed content legible.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Ensure that Portfolio CPT is present either by adding code in functions.php or using a custom functionality plugin or via a plugin in the repo. In this example, I am using Portfolio Post Type.
Add Portfolio items and for each, ensure that featured image is set. Use large featured images (like 1600 x 1050) since these will be used as the full screen backgrounds.
Step 2
Add the following in child theme's functions.php:
Hi,
Hoping someone can help, i added this to the Parallax Pro Theme an i am seeing a vertical bar on the left side of the page, not sure what the issue is?
Works a treat but I’am using the Portfolio Post Type plugin and would like to be able to change the permalinks has anybody got a clue how i could achieve the below
FROM: http://www.mywebsite.com/portfolio_category/acategory/
TO: http://www.mywebsite.com/products/acategory/
You should be able to do this using the
portfolioposttype_category_argsfilter.See https://github.com/devinsays/portfolio-post-type/issues/16#issuecomment-48450684 for an example.
That did it thanks for the reply and the tutorial Sridhar great work as usual
Once the screen size hits 1024px and below, it all seems to break the pagePiling any ideas on how to fix to make responsive
Thanks in advance Alistair