Lightbox for 'Panel Slider', 'Slideshow' and 'Overlay Slider' Yootheme Pro Element

yt_lightbox.html

<!-- Yootheme Pro sliders with lightbox -->

<!--
1. For the 'Overlay Slider' or 'Panel Slider' Element:
-Add Link to the Image which has to be shown in the Lightbox
-Add element Attribute:
uk-lightbox="toggle: .uk-slider-items a"

2. For the 'SlideShow' Element:
-Add Link to the Image which has to be shown in the Lightbox
-Add element Attribute
uk-lightbox="toggle: .uk-slideshow-items a"
-->

<!-- OPTIONAL: -->
<!--
For the 'Overlay Slider' or 'Panel Slider' Element:

If link is set on Panel or Overlay:
-->
<script>
jQuery(function($) { 
    $(".uk-slider-items a").each(function () {
        $(this).attr('data-caption',$(this).find('.el-title').text().trim());
    });
});
</script>

<!-- If link is set on Image, Title or Button -->
<script>
jQuery(function($) { 
    $(".uk-slider-items a").each(function () {
        $(this).attr('data-caption',$(this).parent().parent().find('.el-title').text().trim());
    });
});
</script>
<!-- For the 'SlideShow' Element: -->

<!-- Link is default always on the Button -->
<script>
jQuery(function($) { 
    $(".uk-slideshow-items a").each(function () {
        $(this).attr('data-caption',$(this).parent().parent().find('.el-title').text().trim());
    });
});
</script>

<!-- Optional: We can also get the href of the link and wrap the whole item in a link with the desired data-caption for the Lightbox -->
<script>
jQuery(function($) { 
    $(".uk-slideshow-items a").each(function () {
        $(this).closest('.el-item').wrapInner('<a href="'+$(this).attr('href')+'" data-caption="'+$(this).parent().parent().find('.el-title').text().trim()+'"></a>');
        // add data-caption to button link
        $(this).attr('data-caption',$(this).parent().parent().find('.el-title').text().trim() );
        // hide button if not needed
        $(this).addClass("uk-hidden");
    });
});
</script>