Dosen't work on Wordpress

[andr3ytd]

I'm not a developer but did try to install following your steps.

Got all 4 required files in the footer, now all I want is to be able to open the lightbox with something like:

<a href="/path/to/image"> <img src="/path/to/image" alt="lorem ipsum" /> </a>

I've tried https://github.com/fat/zoom.js and manage to install it few minutes, but unfortunately I want an <a href="/path/to/image"> not to original <img> to zoom.

[terrymun]

Can you be more specific about what do you mean by "it doesn't work"? Can you share your markup? Perhaps create an example on JSfiddle? Did you check your browser console log for error messages? Are all components and dependencies properly loaded?

[markaharper]

Hey andr3ytd,

Try adding: data-fluidbox

<a href="/path/to/image-full" data-fluidbox>
<img src="/path/to/image-thumb" alt="lorem ipsum" />
</a>

I too have opted for fluidbox over fat's zoom.

Thanks terrymun!

[terrymun]

@markaharper Yeah, there is also an issue about initialising Fluidbox properly. @andr3ytd make sure you are using the appropriate selectors when using Fluidbox.

[andr3ytd]

Thanks for the reply.

I get no error in console, have a look live: http://mihaicotovanu.ro/newsite/index.php/project/tablou-01/

Probably this is the problem "using the appropriate selectors" ... this is the part I don't understand 100%

[markaharper]

@andr3ytd

You have jquery installed twice:

Once with the wp install at the top (jquery.js?ver=1.12.4)

And at the bottom with fluidbox (jquery.min.js).

Try removing the bottom version.

Fluidbox is awesome once it's running.

[andr3ytd]

Oh, fixed that. But still not working :(

[markaharper]

@andr3ytd

The image now has data-fluidbox="" - I think it needs to be just: data-fluidbox

[markaharper]

@andr3ytd

Try this.

Add to the link: href="http://mihaicotovanu.ro/newsite/wp-content/uploads/2016/12/P1260812.jpg" data-fluidbox class="fluidbox-popup">

Then save the follow as fluidbox-popup.js

<script>

$(function () {
    $('.fluidbox-popup').fadeIn(1000).fluidbox({
        immediateOpen: true
    });
});

</script>

Add fluidbox-popup.js to your page after: jquery.fluidbox.js"

Fingers crossed.

[andr3ytd]

WP keep adding ="" at the end, tried a plugin to stop playing with my code but didn't work. Will go for a more simple lightbox. Really wanted this for the animation...

Thanks for the help so far, appreciate it.

Oh, notice now class="fluidbox-popup" will give a last try.

[markaharper]

@andr3ytd

The js I supplied will not function in wp.

Try this instead:

<script>
jQuery(document).ready(function($){
 $('.fluidbox-popup').fadeIn(1000).fluidbox({
        immediateOpen: true
    });
});
</script>

Fingers crossed.

[andr3ytd]

Yes! finally working. Would be great if this would work for <a href="/path/to/image"><img src="/path/to/image" alt="lorem ipsum" /></a> without adding the class, but I'm happy for now.

Thanks!!

[markaharper]

@andr3ytd

To eliminate the hassle of adding class="fluidbox-popup" to the link, test this:

<script>
jQuery(document).ready(function($){
 $('.fluidbox').fadeIn(1000).fluidbox({
        immediateOpen: true
    });
});
</script>

One more thing: a simple fix to the fluidbox.css file.

See how the image displays UNDER your navbar?

To have the image display ABOVE the navbar, add z-index: 1031; to line 31 of fluidbox.css:

transition: all 0.25s ease-in-out 0.25s;}

to...

transition: all 0.25s ease-in-out 0.25s; z-index: 1031;}

And to better controller the image size, within the js add and then adjust the viewportFill to your liking (1 = 100%, 0.95 = 95%)

(you can also adjust the fadein(1000) to your liking )

<script>
jQuery(document).ready(function($){
 $('.fluidbox-popup').fadeIn(1000).fluidbox({
            viewportFill: 0.98,
        immediateOpen: true
    });
});
</script>

Hope this helps.

Fluidbox is awesome!

[markaharper]

@andr3ytd

A little correction. My error.

According to the docs, the z-index can be controlled within the js via: stackIndex.

<script>
jQuery(document).ready(function($){

 $('.fluidbox-desktop').fadeIn(1000).fluidbox({
            viewportFill: 0.90,
            stackIndex: 1031;
        immediateOpen: true
    });

 $('.fluidbox-tablet').fadeIn(1000).fluidbox({
            viewportFill: 0.96,
            stackIndex: 1031;
        immediateOpen: true
    });

 $('.fluidbox-mobile').fadeIn(1000).fluidbox({
            viewportFill: 1.0,
            stackIndex: 1031;
        immediateOpen: true
    });

 $('.fluidbox-avatar').fadeIn(1000).fluidbox({
            viewportFill: 0.4,
            stackIndex: 1031;
        immediateOpen: true
    });
});

</script>

Please note, use the id and/or class selectors on links for different purposes and/or devices: desktop, tablet, mobile.

[andr3ytd]

Don't worry about z-index that I can take care. Looks like it doesn't work.

I was looking intro this: http://stackoverflow.com/questions/8363788/jquery-how-do-i-select-img-src-inside-href ( but failed to integrate )

[markaharper]

@andr3ytd

Maybe this will work

<script>
jQuery(document).ready(function($){
 $('.fluidbox a:link').fadeIn(1000).fluidbox({
        immediateOpen: true
    });
});
</script>

[andr3ytd]

That worked!

F***ing love the animation of Fluidbox 😀

[markaharper]

Fantastic! Enjoy!

I use fluidbox all the time.

Here's an example:

http://www.senior-photos.com/