New Landing How can we help? Themeforest Theme Support Joyn iLightbox Plugin not included

Viewing 15 posts - 1 through 15 (of 15 total)
  • Posted in: Joyn
  • #198696
    SchallerJe
    Member
    Post count: 23

    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
    Jens

    #198832
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Its inbuilt feature of theme so dont need separately.
    Thanks
    Mohammad

    #198834
    SchallerJe
    Member
    Post count: 23

    OK, and how do I use it? Images are not shown in Lightbox by default.

    #198846
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    How can you use lightbox to all images?
    Thanks
    Mohammad

    #198848
    SchallerJe
    Member
    Post count: 23

    Yes, that is my question.

    #198869
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    How did you inserted the images at pages?
    Thanks
    Mohammad

    #198878
    SchallerJe
    Member
    Post count: 23

    I used the standard WordPress features to add an image inside a blog post (https://www.jens-schaller.de/2015/07/watchos2-human/)

    #198910
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    You need to insert this code to each image
    data-rel="ilightbox"

    Thanks
    Mohammad

    #198960
    SchallerJe
    Member
    Post count: 23

    Now this is quite ugly. I guess I go for another Lightbox plugin then.

    Thanks

    #198968
    SchallerJe
    Member
    Post count: 23

    I 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?

    #198971
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Hi 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

    #198976
    SchallerJe
    Member
    Post count: 23

    Thanks 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/

    #198987
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    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
    Mohammad

    #198988
    SchallerJe
    Member
    Post count: 23

    Now it’s working! Thank you!

    #198989
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    You most welcome. We are glad that your issue resolved.
    Thanks
    Mohammad

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register