ARI Soft - ARI Fancy Lightbox use with iMapper

Home

News

Forum

About Us

Demos

Products

F.A.Q.

Featured Demos

ARI Smart Content demo

ARI Quiz demo

WordPress Quiz plugin

WordPress Lightbox plugin

e-mail: info@ari-soft.com

Shopping Cart

You currently have 0 items in your cart.

Show Cart

Recent Events

31/12/2023 New Year SALE

We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

more...
21/11/2023 BLACK FRIDAY 23 is coming

BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.

more...

2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft.

Welcome, Guest
Please Login or Register. Lost Password?

ARI Soft Forum

WordPress plugins

ARI Fancy Lightbox

ARI Fancy Lightbox use with iMapper

(1 viewing) (1) Guest

"ARI Fancy Lightbox" WordPress plugin

Page: 12

TOPIC: ARI Fancy Lightbox use with iMapper

Forum Tools

#64903

ARI Fancy Lightbox use with iMapper 5 Years, 2 Months ago

Karma: 0

We’re currently working on our website – www.dirtypretty.me/lifestyle – and we want to use iMapper - support.shindiristudio.com/imapper-wordpress/ - in Ari Fancy Lightbox Pro plugin.

We want to use iMapper in a Splash Screen on certain pages. I have undertaken several tests with other shortcode generated content (MetaSlider as an example) and the content displays as expected and the splash screen behaves as expected. When I use the iMapper generated shortcode in this way, the mapped image does not appear within the lightbox and the splash screen does not behave as expected.

Please could you advise how we can use iMapper within ARI Fancy Lightbox plugin?

julz

The administrator has disabled public write access.

#64905

Re:ARI Fancy Lightbox use with iMapper 5 Years, 2 Months ago	Karma: 748
Hello, Could you provide a link to a page where the problem occurs? As possible solution, iMapped can be embedded into a post without header/footer elements (here is description how to do it) and then load this post by a link into the lightbox. Regards, ARI Soft

admin

The administrator has disabled public write access.

#64908

Re:ARI Fancy Lightbox use with iMapper 5 Years, 2 Months ago

Karma: 0

Thanks so much for your help! That suggestion has pretty much solved all of our issues in a managable way.

We have one last issue now - if you look at dirtypretty.me/summer-breeze and click on the main image, it will pop the image in to a lightbox, when you hover your cursor over the crosses in circles you'll have a content bubble pop up with store/product names inside them. When you click the points, the information appears in a box below the image. This is exactly what we wanted!

However, we seem to have a lot of scrollable white space below our content and I wonder if you have a solution that we could use to reduce that, please?

julz

The administrator has disabled public write access.

#64911

Re:ARI Fancy Lightbox use with iMapper 5 Years, 2 Months ago Karma: 748

The problem occurs because the lightbox can't detect height of page content correctly due to it changes dynamically. Open "ARI Fancy Lightbox -> Settings -> Advanced" page and populate "Custom JS code" parameter with the following code, it should help to resolve the problem:

Code:



$(document).on('refresh', function() {

    var instance = $.fancybox.getInstance();

    if (!instance || !instance.current) {

        return ;

    }



    var current = instance.current;

    if (current.contentType !== 'iframe') {

        return;

    }



    var $iframe = current.$iframe;

    if (!$iframe || $iframe.length === 0 || !$iframe[0].isReady) {

        return ;

    }



    var $body;

    try {

        var $contents = $iframe.contents();

        $body = $contents.find("body");

    } catch (ignore) {}



    if (!$body || $body.length === 0) {

        return ;

    }



    setTimeout(function() {

        var $content = current.$content;

        $content.css('height', 'auto');



        var frameHeight = Math.ceil(Math.max($body[0].clientHeight, $body.outerHeight(true)));

        $content.css('height', frameHeight);

    }, 0);

});

Regards,
ARI Soft

admin

The administrator has disabled public write access.

#64912

Re:ARI Fancy Lightbox use with iMapper 5 Years, 2 Months ago

Karma: 0

Thanks - your support is really gratefully received. Nearly there, I've just implemented the JS custom code you provided and it's worked a treat at removing the scrollable white space!

My hopefully last question now, when you click on dirtypretty.me/summer-breeze now, the white space is gone but our content is trying to display itself larger than the size of the lightbox (so you get scroll bars across the bottom and up the right side) - is there a way that we could limit the content to stay within the boundaries of the lightbox at all please?

julz

The administrator has disabled public write access.

#64913

Re:ARI Fancy Lightbox use with iMapper 5 Years, 2 Months ago	Karma: 748
Could you provide a screenshot where possible to see the problem? Regards, ARI Soft

admin

The administrator has disabled public write access.

Page: 12

Useful Links