Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Joyn › iLightbox Plugin not included
New Landing › How can we help? › Themeforest Theme Support › Joyn › iLightbox Plugin not included
- This topic has 14 replies, 3 voices, and was last updated 9 years by Mohammad – SUPPORT.
-
Posted in: Joyn
-
July 28, 2015 at 7:16 pm #198696
I just read, that the iLightbox plugin is included in JOYN. Where can I find the plugin?
It is not included in the downloadable ZIP file.Thanks & Cheers
JensJuly 29, 2015 at 9:09 am #198832Hi,
Its inbuilt feature of theme so dont need separately.
Thanks
MohammadJuly 29, 2015 at 9:21 am #198834OK, and how do I use it? Images are not shown in Lightbox by default.
July 29, 2015 at 9:49 am #198846Hi,
How can you use lightbox to all images?
Thanks
MohammadJuly 29, 2015 at 9:51 am #198848Yes, that is my question.
July 29, 2015 at 10:31 am #198869Hi,
How did you inserted the images at pages?
Thanks
MohammadJuly 29, 2015 at 10:36 am #198878I used the standard WordPress features to add an image inside a blog post (https://www.jens-schaller.de/2015/07/watchos2-human/)
July 29, 2015 at 11:12 am #198910Hi,
You need to insert this code to each image
data-rel="ilightbox"
Thanks
MohammadJuly 29, 2015 at 12:58 pm #198960Now this is quite ugly. I guess I go for another Lightbox plugin then.
Thanks
July 29, 2015 at 1:14 pm #198968I just read, that iLightbox has build in support for showing images inside the Lightbox without any code.
You can configure this inside the iLightbox settings.Sadly, iLightbox is not showing up in the WP Admin. How do I activate it?
July 29, 2015 at 1:22 pm #198971Hi there,
Simply add this code to Theme Options > Custom CSS/JS > Custom JS:
jQuery(document).ready(function() { var sfOptionParams = jQuery('#sf-option-params'), lightboxSharing = sfOptionParams.data('lightbox-sharing') ? true : false, lightboxControlArrows = sfOptionParams.data('lightbox-nav') === "arrows" ? true : false, lightboxThumbs = sfOptionParams.data('lightbox-thumbs') ? true : false; // Lightbox Social var lightboxSocial = {}; if (lightboxSharing) { lightboxSocial = { facebook: true, twitter: true, googleplus: true, pinterest: { source: "https://pinterest.com/pin/create/bookmarklet/?url={URL}", text: "Share on Pinterest" } }; } jQuery('.content-wrap p a[href*=".jpg"], .content-wrap p a[href*=".jpeg"], .content-wrap p a[href*=".png"], .content-wrap p a[href*=".gif"]').iLightBox({ skin: lightboxSkin, social: { buttons: lightboxSocial }, path: 'horizontal', thumbnails: { maxWidth: 120, maxHeight: 120 }, controls: { arrows: lightboxControlArrows, thumbnail: lightboxThumbs } }); });
That will enable ilightbox on all content images without needing to add the lightbox code to each link.
The version of iLightbox included with the theme is the jQuery version, not the WordPress plugin as it is no longer supported by the plugin developer.
– Ed
July 29, 2015 at 1:28 pm #198976Thanks Ed! I added the code, but iLightbox is still not working. You can take a look at an example here: https://www.jens-schaller.de/2015/07/watchos2-human/
July 29, 2015 at 1:42 pm #198987Hi,
Please try remove last code and use this custom js code:-jQuery(document).ready(function() { var sfOptionParams = jQuery('#sf-option-params'), lightboxSharing = sfOptionParams.data('lightbox-sharing') ? true : false, lightboxControlArrows = sfOptionParams.data('lightbox-nav') === "arrows" ? true : false, lightboxSkin = sfOptionParams.data('lightbox-skin') === "dark" ? "metro-black" : "metro-white", lightboxThumbs = sfOptionParams.data('lightbox-thumbs') ? true : false; // Lightbox Social var lightboxSocial = {}; if (lightboxSharing) { lightboxSocial = { facebook: true, twitter: true, googleplus: true, pinterest: { source: "https://pinterest.com/pin/create/bookmarklet/?url={URL}", text: "Share on Pinterest" } }; } jQuery('.content-wrap a[href*=".jpg"], .content-wrap a[href*=".jpeg"], .content-wrap a[href*=".png"], .content-wrap a[href*=".gif"]').iLightBox({ skin: lightboxSkin, social: { buttons: lightboxSocial }, path: 'horizontal', thumbnails: { maxWidth: 120, maxHeight: 120 }, controls: { arrows: lightboxControlArrows, thumbnail: lightboxThumbs } }); });
Thanks
MohammadJuly 29, 2015 at 1:44 pm #198988Now it’s working! Thank you!
July 29, 2015 at 1:47 pm #198989Hi,
You most welcome. We are glad that your issue resolved.
Thanks
Mohammad -
Posted in: Joyn
You must be logged in and have valid license to reply to this topic.