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

Avatar ramil.valitov asked

[Tutorial] How to create a custom Widgetkit 2 widget: a slideset with Lightbox effect

Overview

This tutorial shows how to create a custom Widgetkit 2 widget for Joomla. It's a way to enhance standard Yootheme's widgetkit functionality. To make this tutorial useful let's solve a practical problem with the standard Yootheme's slideset widget which doesn't support Lightbox effect. Out task will be to create a new Slideset widget that will have Lightbox effect: when you click a thumbnail - a larger image will appear with Lightbox effect. Creating a new widget is a good approach because in this case we can:
1) keep original Yootheme's Widgetkit source files
2) preserve original Yootheme's functionality
3) safely do updates to Yootheme's files (download new versions of Widgetkit 2), keeping our new widget (modifications won't be overwritten during update process)

Our new widget will be available in administrator's user interface:
Image

I have updated the code for this widget adding some nice features, but I didn't update this tutorial, because for educational purposes this tutorial is fine and correct. If you want the final widget, please see the download section below.

Creating a new "sample" widget

Basic files

The process of creating a new widget is based on Widgetkit 2 documentation: http://yootheme.com/widgetkit/documentation/customizing/custom-widget-plugin and https://yootheme.com/widgetkit/documentation/customizing/where-to-store-your-customizations

So, let's call our new widget slidesetlightbox. We won't modify the system folder where the usual Widgetkit 2 files are located: /administrator/components/com_widgetkit/plugins/widgets . Instead we will place our new widget here THEME-NAME/widgetkit/widgets/slidesetlightbox Creating a new widget from scratch is not an efficient approach. So it's better to choose an existing widget as a donor for the source code. In our case we will create a new custom widget based on the standard Yootheme Slideset widget. We need to copy the entire contents of the folder /administrator/components/com_widgetkit/plugins/widgets/slideset to THEME-NAME/widgetkit/widgets/slidesetlightbox In my case, I'm using Warp 7 Vida theme, so I need to copy the files into directory /templates/yoo_vida/widgetkit/widgets/slidesetlightbox

Initial setup

Now we need to adjust the source files to set some basic changes: correct widget name, label, path, logo, etc.

1. Let's set correct name and path.

Such modification are done in file /templates/yoo_vida/widgetkit/widgets/slidesetlightbox/plugin.php
The new plugin.php will look like the following (the portions of code that are different from the "original" Yootheme's Slideset widget have comments):

<?php  
return array(  
    'name' => 'widget/slidesetlightbox',//Name of our widget  
    'main' => 'YOOtheme\Widgetkit\Widget\Widget',  
    'config' => array(  
        'name'  => 'slidesetlightbox',//Name of our widget  
        'label' => 'Slideset Lightbox',//Name of our widget visible to the user  
        'core'  => true,  
        'icon'  => 'plugins/widgets/slidesetlightbox/widget.svg',//Path for the icon  
        'view'  => 'plugins/widgets/slidesetlightbox/views/widget.php',//Path for the view  
        'item'  => array('title', 'content', 'media'),  
        'settings' => array(  
            'nav'                => true,  
            'slidenav'           => 'above',  
            'slidenav_align'     => 'center',  
            'slidenav_contrast'  => false,  
            'filter'             => 'none',  
            'filter_position'    => 'top',  
            'filter_align'       => 'left',  
            'filter_all'         => false,  
            'animation'          => 'fade',  
            'duration'           => '200',  
            'autoplay'           => false,  
            'interval'           => '3000',  
            'autoplay_pause'     => true,  
            'gutter'             => 'default',  
            'columns'            => '1',  
            'columns_small'      => 0,  
            'columns_medium'     => 0,  
            'columns_large'      => 0,  
            'columns_xlarge'     => 0,  
            'panel'              => 'blank',  
            'panel_link'         => false,  
            'media'              => true,  
            'image_width'        => 'auto',  
            'image_height'       => 'auto',  
            'media_align'        => 'teaser',  
            'media_border'       => 'none',  
            'media_overlay'      => 'icon',  
            'overlay_animation'  => 'fade',  
            'media_animation'    => 'scale',  
            'title'              => true,  
            'content'            => true,  
            'social_buttons'     => true,  
            'title_size'         => 'panel',  
            'text_align'         => 'center',  
            'link'               => true,  
            'link_style'         => 'button',  
            'link_text'          => 'Read more',  
            'badge'              => true,  
            'badge_style'        => 'badge',  
            'badge_position'     => 'panel',  
            'link_target'        => false,  
            'class'              => ''  
        )  
    ),  
    'events' => array(  
        'init.site' => function($event, $app) {  
           //$app['scripts']->add('uikit-slideset', 'vendor/assets/uikit/js/components/slideset.min.js', array('uikit')); We don't need this code  
        },  
        'init.admin' => function($event, $app) {  
            $app['angular']->addTemplate('slidesetlightbox.edit', 'plugins/widgets/slidesetlightbox/views/edit.php', true);  
        }  
    )  
);  
?>

The code above doesn't need any comments, all changes are quite obvious.

2. Let's set our custom logo.

We must create (or modify existing image) and overwrite the file /templates/yoo_vida/widgetkit/widgets/slidesetlightbox/widget.svg For creating svg images I suggest using a nice online tool http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html It allows creating svg files from scratch or modify existing files (by inserting content of the svg file).

That's all. We have a copy of Yootheme's Slideset widget that is called Slideset Lightbox.

Creating Lightbox effect

Now we need to modify our new widget to give it a Lightbox effect. We will need to modify a file /templates/yoo_vida/widgetkit/widgets/slidesetlightbox/views/widget.php A link with lightbox effect looks like this:

<a href="..." class=".." title="**...**" data-lightbox-type="image" data-uk-lightbox="{group:'**...**'}">...</a>

The text with dots (...) is some text. The url for href is generated dynamically according to images used in the slideset, title is generated dynamically, too, and is used as a caption for the Lightbox. The data-lightbox-type and data-uk-lightbox are static (fixed). We need to generate an id for the group which is used for grouping the Lightbox images (you may go forward and backward between images in Lightbox mode). Such id must be unique. I couldn't find a way to get id of the widgetkit (number that you may see in Widgetkit's administration), so I suggest the following code to create id for the group:

$groupcode=$widget->getConfig('name').time();

or alternative solution:

$groupcode = $widget->id.'-'.uniqid();

Then we need to change code in two places:
1) replace old line:

$overlay = '<a class="uk-position-cover" href="' . $item->escape('link') . '"' . $link_target . '></a>';

with new line:

$overlay = '<a class="uk-position-cover" title="'.htmlspecialchars($item['title']).'" data-lightbox-type="image" data-uk-lightbox="{group:\''.$groupcode.'\'}" href="' . $item->get('media') . '"' . $link_target . '></a>';  

2) replace old lines:

<?php if ($item['link'] && $settings['panel_link']) : ?>  
<a class="uk-position-cover uk-position-z-index" href="<?php echo $item->escape('link'); ?>"<?php echo $link_target; ?>></a>  
<?php endif; ?>

with new line:

<a class="uk-position-cover uk-position-z-index" title="<?php echo htmlspecialchars($item['title']);?>" data-lightbox-type="image" data-uk-lightbox="{group:'<?php echo $groupcode;?>'}" href="<?php echo $item->get('media'); ?>"<?php echo $link_target; ?>></a>

That's all!:) And we have the desired functionality.

Using Guide

This section provides some tips for the settings of the widgetkit in the Joomla administration interface. The code has been tested and works correctly with the following source types for content: "Joomla", "Folder", "Custom".

  • If you use "Joomla" as a source for the images (media) you need to put your images as article's Intro or Full text image.
  • The "Show Title" option controls if the title is displayed under the thumbnails. The title is always displayed under the image when the Lightbox opens. If you don't want to show the title in the lightbox you can add CSS code like "uk-modal-caption{display: none;}" for the title class which is "uk-modal-caption". To make such modification to a single widget you may add unique custom class to the widget - it can be done using the setting "General->HTML Class". And then add the CSS code above to this class.

Compatibility information

The code above has been tested with Joomla 3.4.1 - 3.4.5 (it should work with Joomla 3.4.x actually) and Widgetkit 2.4.1 - 2.4.6 (should work with any Widgetkit 2.4.x)

The code has been tested and works correctly with the following source types for content: "Joomla", "Folder", "Custom".

Updates and Download section

  • v1.0 (13.07.2015) First version of the widgetkit. Only mode "Joomla" as a content provider is supported.
  • v1.1 (04.09.2015) Added support for other content provider modes: "Folder" & "Custom".
  • 13.12.2015 - the project moved to github as a complete widget with extra features, it will be updated there, current tutorial will stay "as is".

You can download the full working widget and find instructions here:

https://github.com/rvalitov/widgetkit-slidesetlightbox

P.S.

I've been using Yootheme for several years. I'd like to kindly thank the Yootheme team! I like the new Warp 7 and the idea of Widgetkit 2. However, recently I feel that Yootheme creates incomplete and unfinished products (e.g. comparing to old Widgetkit 1 - missing some features and styling like above; some Warp 6 themes functionality, e.g. Joomla module customization ignored https://yootheme.com/support/question/85067; product testing, e.g. missing files in a template https://yootheme.com/support/question/84975). Giving simple, yet important features like shown above requires only 2 lines of code, and I'm surprised that it's not supported "out-of-the box" :/

Anyway, we love you, Yootheme:) Develop and be the best!

If you like the tutorial, please vote it up (use the "plus" buttons).

  • Joomla
  • Widgetkit
  • Tutorial

Edited

42 Answers

10

Avatar jobadoo answered

Hope Yootheme take over your mod, because it is really missing, thank you for sharing

4

Avatar ramil.valitov answered

Dear all,
I have good news for you. I have updated the code and the tutorial above, now it supports the following new source types for content: "Folder" and "Custom". The "Joomla" source is also supported since first version of the code. I have tested the code in the latest Widgetkit 2.4.4, everything works fine. Enjoy!!!:)

P.S. Your feedback is always welcome! If you like the tutorial, please vote it up (use the "plus" buttons).

2

Avatar yannis answered

Hi could you make a tutorial how to do the same at a slideshow?
thank you

ok guys i think I managed to do that. So I follow all the instruction steps 1 and 2 but for the slideshow instead of the slideset and i named it slideshowlightbox
go to
/templates/MY-TEMPLATE/widgetkit/widgets/slideshowlightbox/views/edit.php
We will create an extra option at the overlay settings menu named Lightbox.
find the line

<h3 class="wk-form-heading">{{'Overlay' | trans}}</h3>  

add an option to the select

<option value="lightbox">{{'Lightbox' | trans}}</option>    

Now at the settings at the overlay section you are gonna have an option named Lightbox

got to the /templates/MY-TEMPLATE/widgetkit/widgets/slideshowlightbox/views/widget.php

find the line of code
$options = '{'.implode(',', array_filter($options)).'}';

and add after that

$groupcode = $widget->id.'-'.uniqid();   

also find
<?php if ($settings['overlay'] != 'none' && (($item['title'] && $settings['title']) || ($item['content'] && $settings['content']) || ($item['link'] && $settings['link']))) : ?>

and before that add the following block

<?php if ($settings['overlay'] == 'lightbox') : ?>  
                 <a class="uk-position-cover" title="<?php echo htmlspecialchars($item['title']) ?>" data-lightbox-type="image" data-uk-lightbox="{group:'<?php echo $groupcode ?>'}" href="<?php echo $item['media'] ?>"></a>

                <?php endif; ?>

and it works!
if somebody else has a better idea let me know!

Edited

2

Avatar ramil.valitov answered

jenz.multimedia
Thank you for a positive feedback!:) I plan to do add the "Folder" content functionality soon, this month. I will update the post and files accordingly and let everyone know.

2

Avatar yannis answered

david.dahl

have you put your widget's name at the end of plugin.php like this?

'init.admin' => function($event, $app) {    
        $app['angular']->addTemplate('slidesetlightbox.edit', 'plugins/widgets/slidesetlightbox/views/edit.php', true);  

both the path and the edit file, include your new widget name

Edited

1

Avatar ramil.valitov answered

Analysis of slideshow widget shows a nice way to create a unique id, which in our case can be used to create a unique group code:

$groupcode = $widget->id.'-'.uniqid();

This is an alternative to the method that was used above.

1

Avatar federaltitle answered

I found this tutorial to be incredibly helpful. Thank you! I was wondering, though, instead of pulling up the "media" or image in the lightbox, how can I edit the code to pull up an article?

For example, I'm using the Slideset to show thumbnail images of staff, and I would like to click on the thumbnail and pull up the corresponding article in the lightbox that contains that person's bio with a larger image. The articles live in the Article Manager, but I could also copy that content into the Widgetkit if necessary (I think). Here is a link to my website: http://dev.federaltitle.com

1

Avatar ramil.valitov answered

To federaltitle
I'm glad my tutorial was helpful!:) I visited your website. The approach of doing something depends on real aim and difficulty. For your case I woudn't create a special widget. I would use direct coding: using the UIKit code inside Joomla "Custom HTML code module". You will need to use modals to display information - you even don't need to create articles in this case, just put all the information inside the module. It's quite easy to implement, just see the docs http://getuikit.com/docs/modal.html Of course, you may modify the widget (however, it's not the easiest approach from my point of view) - it's possible. All you need to do is to change my hrefs that have data-uk-lightbox to modals and have a method to get appropriate article's id to load and render it inside the modal.

To yannis
Your code looks logical. I plan to improve my code so that it will work with all types of content sources, and then I would probably make a slideshow tutorial - it seems it will be useful anyway:)

Edited

1

Avatar sarah.olivieri answered

This was so helpful!!! I'm using the Gallery widget, but I'm not happy with the uikit lightbox on mobile devices. I'd like to create a gallery widget that replaces the use of the uikit lightbox with this javascript lightbox: http://osvaldas.info/image-lightbox-responsive-touch-friendly

I've never done such an extensive modification before, so I'm hoping someone can walk me through it?? I'm not sure where is the best place to upload the new js file and then exactly how to call it in the widget.

I'm using Joolma 3.4.4, Yootheme Salt 1.0.6, Widgetkit 2.4.4

1

Avatar ralph.marcel.dietrich answered

Hey... you can also use ReReplacer. Search for <a class="uk-position-cover" and replace it by <a class="uk-position-cover" data-uk-lightbox. In the theme-header you must load the uikit lightbox-script: <script src="/templates/yoo_master2/warp/vendor/uikit/js/components/lightbox.min.js"></script>

And that's it... :)

1

Avatar david.dahl answered

Hello,

I've tried both making the edit above manually and downloading (and placing) the completed files from Google Drive. While I can select the Slideshow Lightbox as a widget to create in both instances I receive the error message 'Not Found' when the widget screen opens to create it.

Afterwards the Slideshow Lightbox widget I create will not appear after I've saved it.

Any thoughts?

-David

0

Avatar yannis answered

Thanks ramil!
take a look at the mod i put above.. :)

0

Avatar vinod.babu answered

Hi Ramil,

I wanted this lightbox and i followed all your instructions. But when i try to create a new one, it says "NOT FOUND" in the red warning message.
can you please suggest what might be wrong.

0

Avatar ramil.valitov answered

To vinod.babu
Please, specify what version of Joomla and what theme and widgetkit version do you use? Did you try to upload my code or made the changes yourself manually?

Edited

0

Avatar vinod.babu answered

Hi Ramil,

i made the changes to the code manually myself as per your instructions. Sorry for the delay in reply.
Joomla version : Joomla! 3.4.3 Stable [ Ember ] 2-July-2015 16:00 GMT
widgetkit version : 2.4.2
theme : peak

0

Avatar ramil.valitov answered

To vinod.babu
It should work fine in your environment. Please, try to download and use the source code files that I provided to eliminate any possible misprints or mistakes from your side.

0

Avatar jenz.multimedia answered

Hi Ramil,

first of all I have to thank you for this awesome tutorial.

Do you have some news for the problem with lightboxes in widgets with the content type "Folder"?

0

Avatar alberto.estevez.de.castro answered

Thank you Ramil!
I managed to setup my own lightbox grid to watch youtube videos thanks to your tutorial. At first i was a little bit disappointed with the fact that youtube videos showed up very small on lightbox, but last widgetkit2 update fixed the problem and now videos scale up to almost full screen, although some videos show up bigger and others smaller. I'm still trying to find out why (could have something to do with different kind of parameters during youtube upload of videos).
I will upload the result during today so everyone can see how it looks like.
Regards to everyone

Edited

0

Avatar ramil.valitov answered

To sarah.olivieri
Can you please be more specific what exactly is wrong with Gallery on mobile devices? :) I've been using it, however, never had any problems with it...

0

Avatar ramil.valitov answered

To alberto.estevez.de.castro
I'm glad my tutorial was helpful! I understand your problem with videos and lightbox, I had a similar issue. According to some explanation from support team, the lightbox is intended for use with images only. You should use Modal for videos.

0

Avatar sarah.olivieri answered

To ramil.valitov

I love the Gallery widget is working fine (I'm using images), except for the lightbox on mobile. The exact problem is that the touch gestures are not working constantly and very well. I'm testing using an iPhone 5s. Here are the exact issues:

  • Once I tap on the view button, an image opens maximizing the screen space in a light box view, BUT when I swipe to go to the next image over 70% of the time the safari toolbar appears at the bottom of my screen and the same image re-appears smaller. This seems to happen if my finger slants down on the screen while I swipe, but it is VERY sensitive, more so than other light boxes.

  • Also in lightbox mode, when I swipe the background webpage moves around a lot which is very distracting.

  • In the vertical position the captions cut off rather than continue on the next line

  • I would like to be able to hide the close button

  • I would also like to be able to control the background opacity.

I'm trying to show artwork and I really like the way that the light box I linked to ( http://osvaldas.info/image-lightbox-responsive-touch-friendly) shows images and just seems to work very smoothly.

Sarah

0

Avatar ramil.valitov answered

To sarah.olivieri
Thank you for sharing your experience about using Gallery on touch mobile devices. I suppose you should start a new topic with feature request or bug track, so that Yootheme support team can answer to your questions, because it becomes a little bit off topic here :) I know that technically it's possible to control the last 3 statements you wrote. However, they are not supported "out of the box" in the widgetkit. Such features can be achieved using Modal, however this involves some programming. You may try to modify the Gallery widget in the same manner as I described it in this tutorial above. The difference is that you will have to implement the Modal dialog code instead of ligthbox code that I used here.

0

Avatar sarah.olivieri answered

To ramil.valitov
Thanks. I think those features have been requested before, so I'll chime in there. Do you know where the Uikit files are located? I haven't been able to find them to experiment tweaking them myself.

Sarah

0

Avatar ramil.valitov answered

sarah.olivieri
It's really a very bad idea to modify the UIKit itself. The widgetkit is based on UIKit; the widgetkit lacks the functions you need, however UIKit (I believe) has them. So, actually you need to modify the widgetkit - as it's explained in this tutorial, the links to UIKit and widgetkit documentations were also provided. Regarding the UIKit I can't help you with that, besides, if you modify the UIKit files you will certainly experience problems during theme updates, compatibility issues, etc.

0

Avatar victor.pession answered

Good morning,
first of all thanks to the new Widgets.
Excuse my ignorance but where I insert this code? [widgetkit id = "19"]
to bring up the lightbox?

0

Avatar robert.clinton answered

I would like to add lightbox to Slideshow image media. Is this possible?


This tutorial with Yannis's modifications works very well for slideshow lightbox. Just had to adjust the z-index here
<a class="uk-position-cover" style="z-index:100" title="<?php echo htmlspecialchars($item['title']) ?>" data-lightbox-type="image" data-uk-lightbox="{group:'<?php echo $groupcode ?>'}" href="<?php echo $item['media'] ?>"></a>

Thanks all!

Edited

0

Avatar ramil.valitov answered

victor.pession
I suggest you downloading the archive (Link to the entire zip which is provided in the post). The contents of the folder must be extracted into /templates/THEME-NAME/widgetkit/widgets/slidesetlightbox

robert.clinton
Of course, it can be done the same way. The difference is that you will need to copy and modify the slideshow widgetkit and adjust it accordingly. The approach is the same.

0

Avatar victor.pession answered

thanks ramil.valitov
ok, I pulled your zip file, in the correct folder.
I created a widget: Slideset Lightbox [widgetkit id = "19"]
how do I put the link to the lightbox in an article?
with this string?
<a href = "..." class = ".." title = "** ** ..." data-lightbox-type = "image" data-uk-lightbox = "{group: '** .. . ** '} "> ... </a>

where I write the id of the widget?

0

Avatar ramil.valitov answered

victor.pession
if you installed (unzipped) it correctly, then you can select the new widget in the control panel, see the image:
Image

You can get the id of the new widget as usual. So, if your new slideset will have id 20 then you need to put in your article:

[widgetkit id = "20"]  

Edited

0

Avatar donnie.l.rollins answered

Ramil,

Wonderful addition you've made! We're using it for a video gallery. Right now, it's using the video itself in the slideset rather than using the poster I've selected for the video. Is there a way to modify the code to use the poster if there is one?

0

Avatar yannis answered

ramil.valitov

Hi, i also tried to include the lightbox to the grid slider. I need to be able to have multiple images and also to have them in lightbox.
I get in every li of the image the group code, the lightbox shows up, but the navlinks when i press them i get the same image not the next one..

following the examples above at the edit.php i add

 <h3 class="wk-form-heading">{{'Overlay' | trans}}</h3>  
            <div class="uk-form-row">  
            <label class="uk-form-label" for="wk-overlay">{{'Overlay' | trans}}</label>  
                <div class="uk-form-controls">  
                    <select id="wk-overlay" class="uk-form-width-medium" ng-model="widget.data['overlay']">  
                        <option value="none">{{'None' | trans}}</option>  
                        <option value="lightbox">{{'Lightbox' | trans}}</option>   
                    </select>  

                </div>  
            </div>

this will give me the option to enable lightbox.

then in the __media.php after the

$options = '{'.implode(',', array_filter($options)).'}';

i add

$groupcode = $widget->id.'-'.uniqid();

also find

<?php if (count($fields) > 1) : ?>

and after

<?php echo $media; ?>

i add

<?php if ($settings['overlay'] == 'lightbox') : ?>    
             <a class="uk-position-cover" data-lightbox-type="image" data-uk-lightbox="{group:'<?php echo $groupcode ?>'}" href="<?php echo $item['media'] ?>"></a>  
            <?php endif; ?>   

and find

<?php else if (count($fields) == 1) :      

replace

echo $media;    

with

echo $media; ?>  

and i add after

<?php if ($settings['overlay'] == 'lightbox') : ?>    
             <a class="uk-position-cover" data-lightbox-type="image" data-uk-lightbox="{group:'<?php echo $groupcode ?>'}" href="<?php echo $item['media'] ?>"></a>  
            <?php endif; ?>   

and last line changes to

<?php endif ?>  

The only issue i have is the lightbox slidenav that goes to tha same img.
any ideas what I'm missing?
thank you

Edited

0

Avatar david.dahl answered

Yannis,

Thank you for the quick reply. It turns out I solved my issue. I had neglected to change the name at the very top of the plugin.php file. Once changed everything worked properly.

Again, thanks!

-David

0

Avatar ramil.valitov answered

donnie.l.rollins
I'm glad my tutorial was helpful :) If you use it for video gallery you should use UIKIt modals instead of lightbox, because in some other topic Yootheme support told me that lightbox is only for images, not for videos. And of course you can change the image to a poster. You need to find code that contains:

data-lightbox-type="image"

And modify it. You can change the image or completely rewrite this line to use modals (which is the preferred way in your case).

0

Avatar ramil.valitov answered

yannis
Your question requires deeper investigation. The logic seems to be alright. Can you provide a link to a page with your grid slider, so that I can have a look?

0

Avatar yannis answered

ramil.valitov

Is there a way to send you the link in private cause the site is under development ..

0

Avatar ramil.valitov answered

yannis
You can send it to ramilvalitov123@gmail.com - remove the 123 - spam bot protection :)

0

Avatar giorgiok answered

I do confirm ramil my friend, it's working for wordpress also! Very good work. thank you!

0

Avatar camdri answered

Hello Ramil,

I've installed your new Slideset Widget because I was trying to create a slideset with an overlay function. Unfortunately it doesn't work. I posted a question on this support forum earlier, but no answer up until now.

I use the latest WidgetKit 2.6.1, Joomla 3.4.8 and PHP 5.6.17
My goal is to produce a slideset of items (an exact copy of items which I have in a Dynamic Grid). In the Dynamic Grid I wanted to present an overlay with text and button. This didn't work at once. With some code I found in this forum I managed to get it working with my Katana theme.

This code I found (ans placed in custom.css) works fine. Here's the code:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
/* For the WidgetKit gallery, fix the color & transparency of the overlay */
figure > div.uk-overlay-background {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
}

/* Fix the button background and border too /
.uk-overlay-panel .uk-button {
border-color: white !important; /
Nuclear option only because YooTheme has it /
color: white;
border-radius : 6px;
background-color: rgba(0, 0, 0, 0);
}
div.uk-grid .uk-button:hover,
div.uk-grid .uk-button:focus {
border-color: white !important; /
Nuclear option only because YooTheme has it */
color: white;
background-color: rgba(0, 0, 0, 0);
}

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

I've installed your Widget Slideset with Lightbox functionality. But when trying to show an overlay with
text or button, it doesn't work. It keeps showing the text beneath my teaser instead of an overlay.

Can you help me out with code neccessary to get this working? Obviously this doesn't work right now and my skills
are not so great. I've tried this also with the Widgetkit demo package as well, nut no results. The overlay in a slideset
doesn' t work at all.

Maybe you can be of any help?

Thanks in advance for your help!

0

Avatar colin.gourlay answered

I know I am resurrecting an old thread but just came across it. Ramil, thank you for this excellent addition for Widgetkit. One that adds a basic function to Slideset that should have been been there from the start.

Installed in the newest version of Widgetkit & Joomla 3.x and it worked like a charm.

Thank you

0

Avatar jugc answered

Hello Ramil
Thanks a lot - the download works for me. Absolutely great!!!!!!

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