How to invoke Floatbox automatically for certain file types?

Page: 1

Author Post
gregp
Guest
I'd like all the .pdf's on my site to open in Floatbox by default without manually editing the code of each page. I guess it would be nice to do the same thing with web pages too when you're calling something for a reference rather than forwarding on a visitor to another site, although being able to override this behaviour inline would be important though. Just as the appearance of links can be formatted sitewide from CSS based on their extension (or overridden inline), or as a web page can have a <base target="..." /> which likewise can be overwritten inline, is there some global way to invoke Floatbox when a certain filetype is called and just override this when required?

Thanks!
Greg
Administrator
Registered: Aug 2008
Posts: 3382
Sorry, I can't think of a way to help with this. If you could generate your pages dynamically with php or something, it would be easy to have centralized control over the writing of the anchor attributes. You could do it with javascript attached to every page. Your javascript would have to conclude with a call of:
fb.tagAnchors(document.body || document.getElementsByTagName('body').item(0));

Pdf is not a good example of a doc type to do this with. It's not a content type that is natively supported by browsers and by extension floatbox. Supported native content consists of html and images only. Support is extended to flash and quicktime if the required browser plugins have been installed. There is no widely deployed plugin for displaying pdf content. FYI, floatbox will try to load a pdf as iframe content. How different browsers respond to that will vary depending on whether or not they've installed the pdf reader and how the reader is configured.
gregp
Guest
Thanks Bryan. The doctype isn't so much the issue, I'm just using pdf as an example although it does work OK under FF and IE in my testing. I could have just as easily used a .jpg, and in many cases this may be what's required. I guess I was just thinking of some way of intercepting the default DOM behaviours. I was reading through http://www.ibm.com/developerworks/web/library/wa-aj-overhaul1/ a little while ago which demonstrates how to upgrade an old site to Web2 using, among other plug-ins, Thickbox. While their solutions still rely on inline class/rel declarations, the following is written which makes me think this may not be necessary:

"Because jQuery and its plug-ins follow a philosophy of progressive enhancement, you need almost no custom JavaScript code to create your Ajax functionality. Instead, you add specific attributes to existing HTML tags. Your JavaScript libraries parse the Document Object Model (DOM) looking for these special attributes, then add the appropriate behaviors to elements that possess them. jQuery enables this coding style by parsing the DOM automatically when all the markup has been rendered. If you peek behind the scenes of your jQuery plug-ins, you'll see that they all delegate their event models to the core jQuery object and its ready method."

So, if it were possible to change the behaviour without having to add special attributes to existing HTML tags, but instead parse the DOM and override default browser behaviours with custom ones, the solution would be at once sitewide and much cleaner at a code level - in the same way that CSS overrides the default display styles of certain tags simply by including the stylesheet in the header. Unfortunately I'm no JS / DOM expert but I can't see why it wouldn't be possible.

Thoughts?
gregp
Guest
PS One key reason for doing this other than code cleanliness is when pages are maintained via a CMS. Dumb users shouldn't have to go into the code and add xyz to leverage a sitewide behaviour anymore than they should have to manually edit the colour of headings, especially as in some cases they won't even have access to the HTML source. While I realise no-one here *is* the W3C as such, the more I think about it the more surprised I am to think there would be no way of doing this when this exact idea but for CSS is relatively so far advanced.
Administrator
Registered: Aug 2008
Posts: 3382
The jQuery blurb you quoted could be an exact description of what floatbox does on a page. You add specific attributes to existing HTML tags (rel="floatbox"). Floatbox parses the DOM, looks for the special attributes and adds the floatbox behaviour to the anchors with those attributes. This is pretty standard operating procedure for any javascript that attaches behaviours to elements.

It is the tagAnchors function in floatbox that does the action described above. You could in fact insert one (long) line into that function to accomplish what you are describing. The following will turn all image links on a page into a floatboxed gallery collection (unless they already have a rel attribute of "nofloatbox"):

Existing code:
var anchors = baseEl.getElementsByTagName(&#039;a&#039;);
for (var i = 0, len = anchors.length; i < len; i++) {
this.tagOneAnchor(anchors[i]);
}


Modified code:
var anchors = baseEl.getElementsByTagName(&#039;a&#039;);
for (var i = 0, len = anchors.length; i < len; i++) {
if (/\.(jpg|jpeg|png|gif|bmp)(\?|$)/i.test(anchors[i].href) && anchors[i].getAttribute(&#039;rel&#039;) !== &#039;nofloatbox&#039;) anchors[i].setAttribute(&#039;rel&#039;, &#039;floatbox.1&#039;);
this.tagOneAnchor(anchors[i]);
}

Cheers...
...Byron (note sp.)

edit: In fact, I don't see a downside to including an "autoGallery" option in the next version that will execute this one line if set to true.
« Last edit by admin on Thu Oct 02, 2008 5:27 am. »
gregp
Guest
Ahhhhhhhh! Now we're talking! Thanks Byron (sorry!) Yeah I can follow through the logic of that JS but 1) I don't know enough about it to write that in the first place, and 2) I don't know enough about how the FB functions fit together to know which does what!

Thanks a heap! (whether or not I use that is another question but it's great to have it available). Can I recommend the inclusion of this as a 0/1 settable option in the main config (defaulted to False) in the next release? And perhaps the file extensions people want to default to FB? A little feature but one that in some situations will save a heap (and I mean a HEAP) of recoding (picture an image gallery site with 1000 images to start with... :shock: )

Greg
gregp
Guest
Great minds? Or fools never differ! :lol: You must have been editing as I was typing the same idea! 8)
gregp
Guest
Is there a feature request thread somewhere? If we're going to do this then how about some default behaviours for certain groups of document types? E.g. for the document group (pdf, .swf) specs may be 800x600 and scrollable, for content (html, asp, cfm etc) it may be something else and for images something else again. If disabled then the current behaviour prevails.
gregp
Guest
Quick hack gave the following which worked to make pdf windows scroll:

for (var i = 0, len = anchors.length; i < len; i++) {
if (/\.(jpg|jpeg|png|gif|bmp|pdf)(\?|$)/i.test(anchors[i]) && anchors[i].getAttribute(&#039;rel&#039;) !== &#039;nofloatbox&#039;)
anchors[i].setAttribute(&#039;rel&#039;, &#039;floatbox.1&#039;);

if (/\.(pdf)(\?|$)/i.test(anchors[i]) && anchors[i].getAttribute(&#039;rel&#039;) !== &#039;nofloatbox&#039;)
anchors[i].setAttribute(&#039;rev&#039;, &#039;width:800 height:600 scrolling:yes&#039;);

this.tagOneAnchor(anchors[i]);

}


I tried declaring the rev attributes in a variable pdfsettings but couldn't work out how to call it :oops: tried 'rev', pdfsettings, 'rev', this.pdfsettings and a few others but couldn't seem to access it, the source kept having 'undefined' in the value for 'rev'. Probably a cinch for you though!
Administrator
Registered: Aug 2008
Posts: 3382
You're way more enthusiastic about this than I am. :P
I'm going to put autoGallery in for images only.

Page: 1