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

Avatar sven.grossenbacher asked

[Tutorial] Lightbox UIKIT3

Hi,

I wanted to create a lightbox in Yootheme PRO and could not find the lightbox component however you can make it with the Modal component instead:

<!-- This is the small image inside content -->     
<a href="#sccmon-2" uk-toggle><img src="/images/sccmon-2-data-flow-small.jpg"></a>  

<!-- This is the Lightbox view-->  
    <div id="sccmon-2" uk-modal="center: true">  
         <img src="/images/sccmon-2-data-flow.jpg" class="uk-modal-dialog uk-width-4-5">  
      </div>  
  • UIkit
  • Tutorial
  • YOOtheme Pro

Edited

3 Answers

0

Avatar ali.magomadov answered

I have as you pointed out is not working.
Works like this.

<!-- This is the small image inside content -->     
<a class="uk-button uk-button-danger" href="#ankor" uk-toggle>Zoom</a>

<!-- This is the Lightbox view-->    
<div id="ankor" class="uk-modal-full" uk-modal>  
<div class="uk-modal-dialog">  
    <button class="uk-modal-close-full" type="button" uk-close></button>  
    <div class="uk-grid-collapse uk-child-width-1-1@s uk-flex-middle" uk-grid>  
        <div class="uk-background-cover" style="background-image: url('../images/image.jpg');" uk-height-viewport></div>  
    </div>  
</div>  
</div>

Edited

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