WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Next/previous buttons for iframe (4 posts)

  1. nasezoll
    Member
    Posted 1 year ago #

    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?

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. nasezoll
    Member
    Posted 1 year ago #

    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.

  4. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic