YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar matthijs Support asked

[tutorial] Show filtered Gallery/Grid by #hash in url

It can often be useful to show the gallery in a certain filtered state depending on the url, so you can link to a certain tag directly.

This can be done fairly easy by adding some javascript to your page. This gets the #hash from the url and filters the gallery accordingly. When the grid is filtered manually, the url will be adjusted, so refreshing the page will show the same filtered state.
You can create direct links to the content with urls like: /my-page#tag-1. Create alias menu items for this.

All you need to do is create the correct mappings from #hash to Tags in the hashMap variable on top and add this script to your Additional scripts:

<script>  
var hash, hashMap = {      
 '#tag-1': 'Tag one',      
 '#another-tag': 'Another tag',      
 '#tag-with-characters': 'Tag with & characters',      
 '#tag4': 'Tag 4'  
};      
UIkit.on('afterready.uk.dom', function () {      
    if (hash) return;      
    var grid =  UIkit.$('[data-uk-grid]').data('grid');      
          hash = document.location.hash;      
    if (hash && hashMap[hash]) {grid.filter(hashMap[hash]);}  
    UIkit.$('[data-uk-filter]').click(function () {      
        var active = UIkit.$(this).attr('data-uk-filter'), activeHash;      
        UIkit.$.each(hashMap, function (hash, title) {if (title === active) {activeHash = hash;}});      
        if (activeHash) {document.location.hash = activeHash;}      
    });      
});  
</script>

Image

  • Widgetkit
  • Tutorial

Edited

15 Answers

1

Avatar gdesign answered

@matthijs: Thank you. I've tried to use the given examples, but without any results.
My question is, if this solution can also be used for the switcher-module (used in the the Chester-Theme). The given examples are all based on the uikit-tabs, but not on the widgetkit switcher module.
Thanks!

1

Avatar huw.roberts answered

Hi I am trying to link a Joomla menu item to open a specific switcher panel - is there any way of identifying the individual switcher links e.g <li id="1"> then using #1 in the link to open that panel?
If not it would be very useful functionality as you can imagine you can put your content into switchers then use joomla dropdown menus to allow users to go into the relevant panels - way quicker than having to make a joomla article , setup the menu item etc etc

I tried this in a joomla article from your codepen tutorial (i am using a yootheme template) but i also added links to the script libraries in the "Additional Scripts" section

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
<script type="text/javascript" src="http://getuikit.com/dist/js/uikit.js"></script>


<h3>Load from url</h3>  
<ul class="uk-tab" data-uk-tab="{connect:'#my-id3'}">  
    <li id="tab1"><a>Tab 1</a></li>  
    <li id="tab2"><a>Tab 2</a></li>  
    <li id="tab3"><a>Tab 3</a></li>  
</ul>  
<ul id="my-id3" class="uk-switcher uk-margin">  
    <li>Content 1</li>  
    <li>Content 2 (first open)</li>  
    <li>Content 3</li>  
</ul>  
<ul class="uk-subnav uk-subnav-line">  
    <li><a href="about-lec.html#tab1">Open with tab 1</a></li>  
    <li><a href="about-lec.html#tab2">Open with tab 2</a></li>  
    <li><a href="about-lec.html#tab3">Open with tab 3</a></li>  
</ul>  
<ul id="my-id3" class="uk-switcher uk-margin">  
    <li>Content 1</li>  
    <li>Content 2</li>  
    <li>Content 3</li>  
</ul>  

It didnt work it acts like an anchor link only - any ideas

Edited

0

Avatar nikolay.chuvikovskiy answered

Hi,
i have confused, could you please explain how can i use it.
As i understand i have to publish script on the page
but i don't understand how should i specify tag for for specific filter position.
please advise in example below, what should be added...
where should i user hashtag ?
Thanks in advance.

<script>      
var hash, hashMap = {          
 '#filter-a': 'Tag one',          
 '#filter-b': 'Another tag',          
 '#tag-with-characters': 'Tag with & characters',          
 '#tag4': 'Tag 4'      
};          
UIkit.on('afterready.uk.dom', function () {          
    if (hash) return;          
    var grid =  UIkit.$('[data-uk-grid]').data('grid');          
          hash = document.location.hash;          
    if (hash && hashMap[hash]) {grid.filter(hashMap[hash]);}      
    UIkit.$('[data-uk-filter]').click(function () {          
        var active = UIkit.$(this).attr('data-uk-filter'), activeHash;          
        UIkit.$.each(hashMap, function (hash, title) {if (title === active) {activeHash = hash;}});          
        if (activeHash) {document.location.hash = activeHash;}          
    });          
});      
</script>    
<ul id="my-id" class="uk-subnav">    
    <li data-uk-filter=""><a href=""></a></li>    
    <li data-uk-filter="filter-a"><a href=""></a>1</li>    
    <li data-uk-filter="filter-b"><a href=""></a>2</li>    
</ul>    

<!-- Dynamic Grid -->    
<div data-uk-grid="{controls: '#my-id'}">    
    <div data-uk-filter="filter-a">123</div>    
    <div data-uk-filter="filter-b">456</div>    

</div>

Edited

0

Avatar matthijs Support answered

That would be

hashMap = {            
 '#filter-a': 'filter-a',            
 '#filter-b': 'filter-b'     
};    

in the hashmap. In url #filter-a opens filter filter-a.

0

Avatar ruta.n answered

Can I use this tutorial with a Widgetkit Switcher? I want to link each tab to a specific URL but I don't know how to add the data-uk-filter to each tab. Cnan anyone please shed me some light with this? Thanks in advance!

0

Avatar gdesign answered

Hi matthijs,

as i understand the given solution to link to the tabs is only usefull with the html tabs.
But is there any way to control the tabs from a widgetkit switcher module?

The Switcher doesn't give you any id's as you can see in my example:

<ul class="tm-switcher-nav uk-flex uk-flex-center " data-uk-switcher="{connect:'#wk-d4f',animation:'fade'}">  

    <li class="uk-flex uk-flex-middle uk-flex-center uk-flex-column uk-active" aria-expanded="true">  
        <a class="uk-position-cover uk-link-reset" href="/"></a>  
        content  
    </li>  

    <li class="uk-flex uk-flex-middle uk-flex-center uk-flex-column" aria-expanded="false">  
        <a class="uk-position-cover uk-link-reset" href="/"></a>  
        content  
    </li>  

    <li class="uk-flex uk-flex-middle uk-flex-center uk-flex-column" aria-expanded="false">  
        <a class="uk-position-cover uk-link-reset" href="/"></a>  
        content  
    </li>  
</ul>

it just adds the class "uk-active" to the li-element and the aria-expand="true".

Thanks in advance!

0

Avatar quartus answered

similar question as gdesign:

How can I access the widgetkit filters from outside (or on the same page)?

For example I have a widgetkit "gutter" with a filter for regions on a page. On top of this widgetkit I would like to display a map (with an image map) and add links/references to the according region filter in the widgetkit beneath.

Ho can I achieve this?

Thank you

0

Avatar greg answered

@matthijs Does this works on on Widgetkit?

Edited

Know someone who can answer? Share a link to this question via email or twitter.