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

Avatar ika.ren.elj asked

Combine widgetkit gallery with single (lightbox) image

I have an article that contains a single (lightbox) image on the top(-left) and a widgetkit gallery at the button. The single image and the gallery have the same appearance (size, lightbox, padding and caption). Is there a way to combine the single image with the gallery so that I can browse/scroll/slide (I don't know what is the right term) between them? Now I can move left/right only between the photos from the gallery.

Further ... is there a way to set a different caption style for the widgetkit gallery beside the default one (title position: float)? Maybe in a custom.css?

Thank you for your help.

  • Joomla
  • Widgetkit
  • Image Sources
  • General Question

3 Answers


Avatar sascha Yootheme answered

If you want to create a group for your images or videos use the group parameter. For example:

<a data-lightbox="group:mygroup" href="image1_lb.jpg"><img src="image1.jpg" width="180" height="120" alt="" /></a>  
<a data-lightbox="group:mygroup" href="image2_lb.jpg"><img src="image2.jpg" width="180" height="120" alt="" /></a>

The gallery widget is setting the group parameter automatically. For example data-lightbox="group:24-4f3b877a9f4dd". Unfortunately the group name is dynamically generated on every page-refresh. In order to always have a static group name you can create a new style for the gallery widget. Just copy the folder widgetkit/widgets/gallery/styles/showcase/ and rename it like widgetkit/widgets/gallery/styles/lightbox_style/. In that new folder, open template.php and locate the following line (which should be almost at the top of the file):

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

Now assign a static group name by changing the line to this:

$widget_id      = $widget->id.'-mygroup1';

When you now inspect the galery you will see the group name looks like 23-mygroup1 (do not forget to select your new widget style in the administration area). Now you can assign the same group name to your lightbox and all images should be in one group. For more information on how to create a custom style for a widget, have a look at our Widgetkit documentation.

PS: Please also read the support tips! You can't bring support questions up by answering yourself with "Anyone? Please ...". You make it even harder for our support team to find you question because we think it already has a lot of answers... I deleted your "bump" answers...



Avatar ika.ren.elj answered

thank you for your answer.

I have done this before, but I don't know why it didn't work. Actually now it also does not work perfectly. When I click on the single image, I can navigate to the rest of the images that are part of the widget galley. I can go forward or backward and all the images appear normally. But when I click on the first image of the gallery, then I can navigate only through the images of the widget gallery. I can't navigate to the single image. Any idea why?

One question from my previous post still remains unanswered: is there a way to set a different caption style for the widgetkit gallery beside the default one (title position: float)? Maybe in a custom.css?



Avatar austin.coulson answered

just edit your custom CSS file and over write the style, i.e.

.wk-slideshow .caption {


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