Floatbox Plus: Howto (english)

Since there are more and more questions about something like a manual i start this post (and from time to time i’ll try to add more howtos to this post). First i start with the instructions on howto embed a video from vimeo.

Howto: Embed a video from vimeo

  1. Find out the id of the video, i.e. you have the url: „“ then 3453692 is the video id you need.
  2. Start a new post/page (or edit an old one) and click on the icon „embed video“:
  3. A new popup should open, in the first select box choose vimeo, enter the vimeo video id, if you want enter a title and click insert.

  4. Now you should have something like that in your post: „[ vimeo 3453692 After The Rain ]“
  5. Thats it, the shortcode will be replaced in the post with a thumbnail (if the php extension simple_xml is installed on your host) and the video will be shown in an overlay after you click on the thumbnail.

To embed a youtube video just select youtube (or youtube hq) and insert the id (i.e. „“ -> X37D9A53).

Howto: Insert an image

  1. Start a new post/page (or edit an old one). Click on the marked icon.
  2. A popup will open, upload a new image or select an old one.
  3. (1) set a title (will be used in floatbox), (2) set the link url to the full image (or another „big“ image), (3) set the size for the „small“ thumbnail that will be shown in the post, (4) don’t forget to insert the image in the post
  4. After that, the thumbnail will be shown in the editor, just write the rest of your post and save it.
  5. After a click on the thumbnail in the post an overlay will open and the linked image will be shown

Thats it :)

If you have any questions, please use the Support-Forum.

32 Kommentare bis jetzt

  1. Kommentar von Eurico Leite:

    Hello. I’ve installed your plugin.

    Is it possible to use Floatbox with images from other urls. Due to hosting space I’m hosting my images else where..

  2. Kommentar von proog:

    Shure, at least you need to add „rel=’floatbox'“ to your link…

  3. Kommentar von Andreas:

    tut mir leid, ich bin zu blöd dafür. Das ist eine lausige Anleitung und ich werde es nie verstehen, wie jemand Monate scripten kann, um dann keine 10 Minuten Zeit zu haben für eine Anleitung, die auch Einsteigern das Arbeiten mit dem Plugin (in diesem Fall) zu ermöglichen.

    Und aus welchem CMS Du Deine Screenshots her hast, wird mir auch ein Rätsel bleiben, aus WordPress aber anscheinend nicht, sonst hätte ich ja wenigstens daher Deine Schritte nachvollziehen können.

    Aber so fliegt das Plugin wieder runter, schade eigentlich. Ziel verfehlt.

  4. Kommentar von proog:

    Irgendwie bin ich ob des Kommentars etwas sprachlos…

    Will aber dennoch ein paar Dinge loswerden:

    1. Habe ich das Plugin in erster Linie für mich gemacht (und damit weiss zumindest die wichtigste Person, wie das Plugin funktioniert!).

    2. Verstehen zumindest einige Andere, wie das Plugin funktioniert (und taten dies sogar, bevor ich dieses Howto geschrieben habe). Die wichtigste Funktion des Plugins funktioniert im Grunde ohne eigenes zutun (das Umschreiben der Links für die Nutzung mit Floatbox).

    3. Nehme ich mir gerne 1 Stunde Zeit (oder auch mehr) und schreibe eine noch ausführlichere (deutsche) Anleitung, sofern sich Jemand findet und diese Zeit sponsort (finanziert).

    … (mir würden noch einige weitere punkte einfallen, aber das muss eigentlich reichen) …

    Nur noch eines, ich weiss nicht, welche Version von WordPress du im Einsatz hast, aber die Screenshots sind aus der aktuellen Version (2.7.1, kein Admintheme) *kopfschüttel*

  5. Kommentar von Pablo DiCiacco:

    Please explain what you mean by „ATTENTION: It only works, if you do not have the embedded video plugin activated “

    What embedded video plugin are you referring to?
    The WP 2.7.1 native „embed video“?

  6. Kommentar von proog:

    Yes, if you add the video with the embeded function, they won’t be opened by floatbox.

  7. Kommentar von Pablo DiCiacco:

    Hello again,

    Please clarify which „embedded function“ you are referring to, as I asked in my first question. Are you talking about the WP native function, or the one Floatbox adds in the edit window?

    If you’re referring to the Floatbox „add-video“ function, they what is the proper code to insert the video so it will be opened by Floatbox?


  8. Kommentar von Pablo DiCiacco:

    I have abandoned your plugin for several reasons.

    1. It doesn’t work for some reason. Possible another plugin is conflicting. ?
    2. The installation needs to be more streamlined. Most people do not want to install a plug-in requiring having to download additional files from another location.
    3. I am always suspicious of a plug-in which does not have a actual working example of all its uses on the home-page of its author. (If the video actually works, show it here!)
    4. There is no spoon.


  9. Kommentar von proog:

    of course, the native wp function was meant…

    1. actually i don’t know about a conflict (maybe you can tell me – via email – which plugins you’re using)

    2. it was, but the author of the javascript changed his license (until the license change, there was no need to download any additional files from another location). i’m sorry for that.

    3. I’m no fan of services like youtube (or videos in blogs at all), so the video feature is included, cause it is possible and many people like to have it. if this is suspicious for you, that i try to include functions i don’t need… i can’t help you. just be happy, that it is possible ;)

  10. Kommentar von ramuji:

    Could you please offer a bit more clarification regarding “ATTENTION: It only works, if you do not have the embedded video plugin activated”?

    Because of the way the ATTENTION message is worded, I assume I need to DEactivate the embedded video plugin, but I can’t find where that can be accomplished. Currently, both the WP native „embed video“ button and the Floatbox „embed video“ button appear on the page/post edit screen on my dashboard, but I get no response when clicking the Floatbox „embed video“ button.

    Any assistance would be greatly appreciated.

    Thank you.

  11. Kommentar von proog:

    floatbox plus won’t work for videos, if you use the plugin „embedded video“ (the plugin and not the native video functions of wordpress are meant) in your blog. if you just use the „native-button“, the videos won’t be opened with floatbox ether, cause the link isn’t changed (you would have to add ‚class=“floatbox“‚ to the link manually).

    i don’t know, why the floatbox plus button doesn’t work for you (as it works for me).

    and i would really appreciate, if you could use the forum for question…

  12. Kommentar von Richard:


    I have Floatbox Plus installed but it does not work in Firefox of all browsers. IE works fine in 7 and 8.

    I presently have a floatbox video on the front page of the site at the very bottom called „When Wildlife Attacks“ that simply times out. I try clicking it but get nothing.

    I ran a console check on it with Firebug and it tells me that it Cannot Access Optimized Enclosure on line 138 of the floatbox.js?ver=1.2.2.

    Any way to get this working?

    THanks for your help!

  13. Kommentar von Richard:

    Nevermind, it went away after I dumped the Firefox session. Firebug has been corrupting things lately.

  14. Kommentar von Piter:


    My link to picture in the lightbox use to look like this:

    How I should change rel to make multi-pictures pop up?

    Thank you for support.

  15. Kommentar von Piter:

    excuse me this is an example link:

  16. Kommentar von Piter:

    I can’t place link code so just rel: rel=“lightbox[name]“

  17. Kommentar von proog:

    @richard and all other having problems:
    if something doesn’t work, restarting the application/os is a good idea… (or deactivated/reactived a plugin).


    1. for support please use the forum (code examples are no problem there)

    2. what do you want to do? do you use floatbox and floatbox plus? or lightbox?

    and please provide an url… (in the forum you can use the private message option).

    update: i see, you posted in the forum too. please give me some time to answer (there is no need for bumping or using all possibilities to write about your problem).

  18. Kommentar von Thomas:

    Gerade getestet, damit sollte auch ein DAU (ähm, wie ich) zurechtkommen, der Schritt Nummer 3 erklärt doch eigentlich alles. Vielen Dank für das Plugin und die aktuellen Updates.

  19. Kommentar von proog:

    Danke ;)

  20. Kommentar von richard:

    The plug in works beautifully and flawlesly, very easy to install and stright forward explanation. Thak you for the hard work.

    I’m not sure about the license though, it says before downloading the floatbox that „Without a valid license key, floatbox will periodically show a registration reminder“, so far I haven’t seen the reminder, do you know where that is?

  21. Kommentar von proog:

    the reminder is from floatbox, and will be randomly shown in the overlay…

  22. Kommentar von praeivis:

    Nice plugin but lack 1 feature – add custom options for these who know what they doing. I mean via WP settings page. For now we have only few options to chose – like delay and rendering time. But floatbox got so much options posible to change. If You could add form where we could paste code from floatbox/configurator.html it would be very cool. For now I must edit floatbox-plus.php to add some more options like graphicsType: ‚international‘ and such.

  23. Kommentar von proog:

    You don’t have to edit floatbox-plus.php, as described in the option page you can edit options.js in the floatbox folder itself…

    yes. it would be a nice to have feature, if you could edit the options.js-file inside the options page of floatbox plus, but you can change options.js via wordpress (just edit the plugin -> plugin-list -> floatbox plus -> edit, choose options.js … this only works, if the permissions are set in the right way… and the permission problem is one thing, that blocks my affords to add this to fbp)…

  24. Kommentar von proog:

    a direct link to edit options.js with the plugin-editor will be included in the next update ;)

  25. Kommentar von terri:

    Thanks for the most recent update, Version 1.2.19. I noticed the update does not load all images in a post, just one image at a time – no next or prev . Is there something i need to adjust?


  26. Kommentar von proog:

    seems that you set the first fbp-option wrong, should be yes, as you’re using a floatbox version greater(or equal) than 3.50?

  27. Kommentar von terri:

    Yes that was it. Thanks so much, great plugin.


  28. Kommentar von aj:

    Is there a way to use the plugin within standard php file? I am using wordpress hooks and would like to call the code from outside a post or page.


  29. Kommentar von proog:

    you can use floatbox itself.

    just add the necessary rev ord data-fb-options (html5) to the links, you would like to be opened with floatbox. if you really need to use any function of floatbox plus, than you can access the methods using the (non gloabl) object „$floatbox_plus“.

  30. Kommentar von Sille:

    Gibt es eine Möglichkeit es so einzustellen, das nicht alle vorhandenen Bilder einer Seite hintereinander angezeigt werden, sondern nur ein oder zwei?

  31. Kommentar von proog (splash):

    Ja und Nein (ja bzgl. 1 Bild, nein bzw. nur mit Änderung des Quellcode bei 2 oder mehr Bildern).

  32. Kommentar von Sille:

    aha! Danke für die Antwort!
    Wo stelle ich es ein, das man nicht alle anderen Bilder hinterher ankucken kann?

Kommentar hinterlassen

You must be logged in to post a comment.


Zufällige Bilder

  • BitDefender Antivirus for Mac - Aktivitätsanzeige - Echtzeitschutz
  • Slot 1 CPU: Gummiband
  • Gran Turismo 5 - Abbazia-San-Galgano

Kommentare (28 Tage)