Canvas Support

Portfolio Navigation when Filtered

4 replies · opened Apr 11, 2018

Mmighty-cleverApr 11, 2018

Good morning,

On my portfolio, when someone filters the portfolio, and then click on a single project, I would like them to be able to navigate to the next item in the category without having to go back and re-filter. I have it currently set up so that when the portfolio is filtered by a category, when someone clicks on a single project, it opens the page associated with that project. This works fine, but I'm trying to enhance user experience, because if they want to see the next project in the category, they have to go back to the portfolio and re-filter, and click on the next project.

What I would like to have happen is when the filtered portfolio item is clicked, a modal pops up, containing that item's details. Then from there, the user can click "forward" or "previous" buttons to navigate to the next item within the category they selected.

This seems complicated in my mind, and I'm not a JS programmer by any stretch, so I would appreciate any help you could provide. I noticed that the portfolio single pages have a Previous and Next button already added; perhaps there's a way already built into the template to program these, but I couldn't figure out how.

My website is in production at http://mightyclever.com/portfolio.php

Thanks for any help!!

SSemicolon WebSTAFFApr 17, 2018

Hello,

Unfortunately, the Functionality you have mentioned is currently not supported since Canvas is a HTML5/CSS3 Template and the navigation arrows on the Portfolio Single Page is provided only for Design Purposes. The functionality for it to work properly needs to be implemented manually.

You can use this Template: http://themes.semicolonweb.com/html/canvas/portfolio-ajax-in-modal.html for showing the Portfolio Details in a Modal. It is also possible to use this as a Gallery with Forward/Backward Buttons (but without the filter), so if need the codes for this, let us know and we will provide you with the same shortly.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Mmighty-cleverMay 1, 2018

Thank you for getting back to me. Yes, I would love to see the code to implement the Portfolio Details in a Modal, with Forward/Back buttons within the Modal. Thanks for your help with this!

Mmighty-cleverMay 15, 2018

Good afternoon! I've taken your advice and have used the above template to re-work my portfolio and it's basically working as it should. I do have a slight issue, however. When you click on a portfolio item, and the modal window pops up, clicking the modal's previous and next buttons advances the gallery to the next link in the code, not necessarily the next item in the portfolio. Can you provide some feedback on how I can tweak the behavior of the buttons to take the user to the previous our next ITEM in the gallery (which I supposed would technically be the previous or next article)?

Here's an example of some code I'm using in my portfolio. I've got an image, which is a link, an overlay which is also a link, then a category, which is also a link. If someone clicks on any of these links, then clicks "next" or "previous" to navigate the gallery, it loads up the next link, rather than the next portfolio item:


	

	
		[
![attachment](images/mightyclever/portfolio/pro-web-masonry_1200x900.jpg)
](portfolio/pro-web-details.html)
		[
			
				
					Digital](portfolio/pro-web-details.html)
				
			
		
	

	
		[
![attachment](images/mightyclever/portfolio/tmr-logo-masonry_1200x900.jpg)
](portfolio/tmr-branding-details.html)
		[
			
				
					Branding](portfolio/tmr-branding-details.html)

Hope this makes sense; let me know if you have any questions.

Thank you!
Amanda

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard