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

Avatar josh.terrell asked

Yootheme Pro Lightbox still showing lightening bolt Icon under 1.9


Attempting to use lightbox via UIKIT classes in Yootheme Pro v1.9 and I am still getting the blank screen with the lightening icon in the modal.

You can see what I am talking about by going here.


Scroll down to the gallery and you will see two sets of galleries. The first set is using this code: Basically straight copy from the UIKIT doc:

                        <div class="uk-child-width-1-3@m uk-child-width-1-2@s uk-grid-small" uk-grid uk-lightbox="animation: fade">  
                        {% for image in post.get_field('listing_gallery') %}  
                                <a class="uk-inline" href="{{ TimberImage(image['sizes']['listing_medium']) }}" caption="{{ post.title }}">  
                                    <img src="{{ TimberImage(image['sizes']['listing_medium']) }}" alt="Image for {{ post.title }}">  
                        {% endfor %}  

The second set which does work was created after using the builder to build a gallery and copying the generated code which is quite different than the UIKIT documentation:

                        <div class="uk-margin uk-text-center uk-child-width-1-1 uk-child-width-1-3@m uk-grid-small uk-grid" uk-grid="" uk-lightbox="animation: fade">  
{% for image in post.get_field('listing_gallery') %}  
        <div class="uk-first-column"><div class="el-item uk-inline-clip uk-transition-toggle uk-light">  
            <div class="uk-transition-scale-up uk-transition-opaque el-image uk-inline uk-background-norepeat uk-background-cover" style="background-image: url('{{ TimberImage(image['sizes']['listing_medium']) }}');"><img src="{{ TimberImage(image['sizes']['listing_medium']) }}" alt="" class="uk-invisible" scale="0"></div>  
                <a data-type="image" href="{{ TimberImage(image['sizes']['listing_hero']) }}" class="uk-position-cover" data-caption="<h4 class='uk-margin-remove'>{{ post.title }}</h4>"></a>  
{% endfor %}  


  • UIkit
  • YOOtheme Pro


1 Answer

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