2

Joomla 3.9.10

I am using this template. I would like to create a link on my home page that when clicked, will take the user to the portfolio page and display a pre-selected tab..

For example my link would be 'Branding Portfolio', when clicked this should go to http://demo2.joomshaper.com/2019/indigo/index.php/portfolio and the 'Branding' tab should be pre-selected, and the items already filtered.

Is this possible?

I've spoken with the developers JOomshaper but they've said it required additional development and they don't offer / support that.

I'm thinking I could somehow use and anchor and jquery?

Any advice is appreciated.

3

By "anchor and jquery" you mean like the way bootstrap tabs work - ie. by letting the uri's fragment hit the id of the tab. But these tabs aren't set up like that. You can of course use jquery to trigger a click on the tab you want (via the fragment if that is useful) but that will trigger the animation that goes along with it. If you don't care about that then the following js might do...

Example link with a fragment: http://demo2.joomshaper.com/2019/indigo/index.php/portfolio#branding

Example script to run after everything else has run:

var hash = location.hash.replace('#', '');
jQuery('.sp-simpleportfolio-filter li[data-group="' + hash + '"] a').trigger('click');
  • Thanks @jamesgarrett this sounds promising, but I tried it and it didn't work. I added your script to the 'custom js' section of the template settings, this loads after all other scripts. Then I visited my url example.com/portfolio#city-one but nothing happens. I have checked the data-group value of the tab and it is data-group='city-one' Am I doing this correctly? – jonboy Aug 9 at 8:55
3

I found the answer, thanks for the help @jamesgarrett

The tabs were using shuffle.js so I needed to edit the page builder js file.

jQuery(function($) {

    var $container = $('.sp-simpleportfolio-items');

    $(window).load(function() {
        var $sizer = $container.find('.shuffle__sizer');

        $container.shuffle({
            itemSelector: '.sp-simpleportfolio-item',
            sequentialFadeDelay: 150,
            sizer: $sizer
        });

        // ADD - get the url hash
        var hash = location.hash.replace('#', '');
        // ADD - shuffle based on the hash
        $container.shuffle( 'shuffle', hash );
        // ADD - highlight the tab
        $('.sp-simpleportfolio-filter li[data-group="' + hash + '"] a').trigger('click');

    });

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.