terrymun/Fluidbox

Can't get Fluidbox working ... :(

Closed this issue · 6 comments

joopvos commented

Hi Terry,

I don't know if this is the right place to ask what probably is a simple noob question, but I can't get Fluidbox working.

Into the head of the HTML I have:

<link type="text/css" href="<txp:site_url />css/fluidbox.min.css" media="all" rel="stylesheet" />

At the bottom of the HTML I have:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="<txp:site_url />js/jquery.fluidbox.min.js"></script>

And the HTML is:

<a href="design/CIMG0919_sfw.jpg" title="" data-fluidbox><img src="design/CIMG0919_sfw.jpg" title="" alt=""></a>

I've put it on the server so you can look into the source > http://www.villaesma.es/txp (under construction) ... in Chrome 32 (Mac) it looks as intented (for now).

Joop

terrymun commented

Always please check your browser console for errors first, usually the problem is there. I get the following error message: Uncaught TypeError: Object [object Object] has no method 'fluidbox'

It seems that the file fluidbox.min.js is not loaded properly.

joopvos commented

Stupid me ... wrong path. But ... there is a new error: "Uncaught TypeError: Cannot set property 'imgWidth' of null" ... !? And is that the cause the script isn't working?

terrymun commented

This is because you have used a very general selector for Fluidbox (you used $('a').fluidbox()). For the moment being this is being fixed so that the script will not attempt to fetch image dimensions if there is no images in the selector, so as a temporary fix, you should be more specific:

  • Use a class, i.e. <a class="fb"></a> and then use $('a.fb').fluidbox())
  • Use any other HTML-valid attribute, then tune your selectors accordingly
  • Rely on JS for child image detection, i.e. $('a').has('img').fluidbox()

The issue for using very general selectors causing Fluidbox to break will be fixed in v1.2.1. However, I highly recommend against using such general selectors at the first place.

terrymun commented

Fix implemented in v1.2.1, issue will be closed.

joopvos commented

Fluidbox is working now (http://www.villaesma.es/txp/) ... thanks Terry.

BTW ... is it possible to tweak Fluidbox in a way it will overlay a higher z-index (menu)?

terrymun commented

With regards to the issue of z-index stacking, this has been addressed in v1.2.2 and above.