Support » Plugin: Easy FancyBox » [Plugin: Easy FancyBox] Next/previous buttons for iframe

  • Resolved nasezoll


    Is it possible with Easy FancyBox to have a collection of webpages shown in an iframe that can be clicked through with next and previous buttons? Or are these buttons only shown in photo galleries?

    For example: I have several links like:

    <a href="example1.php">Example 1</a>
    <a href="example2.php">Example 2</a>
    <a href="example3.php">Example 3</a>

    and I don’t want to view them all by <click>, <close>, <click>, <close>, <click>, but instead <click>, <next>, <next>.

    I there a way to do this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author RavanH


    Yes, it should be possible but you’ll meet a few obstacles. First, manually give all links that you want to group in a gallery the same rel attribute. You should have something like this:

    <a href="example1.php" class="fancybox-iframe" rel="gallery1">Example 1</a>
    <a href="example2.php" class="fancybox-iframe" rel="gallery1">Example 2</a>
    <a href="example3.php" class="fancybox-iframe" rel="gallery1">Example 3</a>

    Note that if you want more than one gallery per page, you should use a different rel (just up the number 1 to 2)

    Next, you will notice that the gallery browsing arrows will appear (on mouse hover) over the iframe content. If that is OK, then no problem but if it interferes with user interaction with that content, then you might need to move the arrows to outside the frames. You can do that by adding some style rules like this to your themes stylesheet:

    #fancybox-right { right: -35px; width: 35px }
    #fancybox-left { left: -35px; width: 35px }

    Or you could install Jetpack and activate the Custom CSS module, then add the rules on the Edit CSS page. You will have to adapt these rules to suit your needs.

    Thanks a lot, the rel-tag works great.

    Fortunately, there is no user interaction inside my iframe. Only the scroll bar is inaccessible now. So, I tried to move #fancybox-right 15px to the left in my themes stylesheet, but it seems that the plug-in css is loaded after the theme css, so it has no effect.
    It is kind of a hack, but I put it now at the bottom of easy-fancybox.css.php.

    Plugin Author RavanH


    You can install the Jetpack plugin (I can recommend it as it extends your own installation with some really nice features) and activate the Custom CSS module. Then enter the custom style rules on the new Appearance > Edit CSS admin page 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: Easy FancyBox] Next/previous buttons for iframe’ is closed to new replies.