WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
iframe not reloading (5 posts)

  1. Mark Shirley
    Member
    Posted 1 year ago #

    Hi i have 3 fancybox animations on the zones on the map on the right hand side but they need a browser screen reload when you close the box. Can anyone see what im doing wrong here is my code and the link to the page is at the bottom.
    http://www.ricecreative.co.uk/willisnursing/

    <div class="col7">
    <a href="#north-west" class="fancybox">North West</a>
    <div style="display:none" class="fancybox-hidden">
            <div id="north-west">
    
    <iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=61+Hamilton+Square+Hamilton+Court+Birkenhead+Wirral+CH41+5AT&aq=&sll=53.650636,-2.994261&sspn=0.020425,0.055747&ie=UTF8&hq=61+Hamilton+Square+Hamilton+Court+Birkenhead+Wirral+CH41+5AT&t=m&ll=53.394769,-3.017035&spn=0.007677,0.012832&z=15&iwloc=A&output=embed&iwloc=near"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=61+Hamilton+Square+Hamilton+Court+Birkenhead+Wirral+CH41+5AT&aq=&sll=53.650636,-2.994261&sspn=0.020425,0.055747&ie=UTF8&hq=61+Hamilton+Square+Hamilton+Court+Birkenhead+Wirral+CH41+5AT&t=m&ll=53.394769,-3.017035&spn=0.007677,0.012832&z=15&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    
    <div id="fancy-header">North West:</div>
    61 Hamilton Square
    Hamilton Court
    Birkenhead
    Wirral
    CH41 5AT
    Tel: 0151 245 0224
    <a href="mailto:northwest@willisnursing.co.uk">northwest@willisnursing.co.uk</a>
    <a href="http://www.ricecreative.co.uk/willisnursing/north-west/">CLICK HERE FOR FULL DETAILS</a>
    </div><!--End of north west-->
    </div><!--End of north west href-->
    </div><!--End of col7-->
    
    <div class="col8">
    <a href="#midlands" class="fancybox">Midlands</a>
    <div style="display:none" class="fancybox-hidden">
            <div id="midlands">
           <img src="http://www.ricecreative.co.uk/willisnursing/wp-content/uploads/2013/01/swatch2.jpg" alt="click" /></a>
    <strong>The Midlands</strong>
    Dolem est las pour alfec
            <a href="http://html-ipsum.com/">Click to go to page</a>
    </div><!--End of Midlands-->
    </div><!--End of Midlands href-->
    </div><!--End of col8-->
    
    <div class="col9">
    <a href="#east" class="fancybox">The east</a>
    <div style="display:none" class="fancybox-hidden">
            <div id="east">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/rg9VxzF-lcI" frameborder="0" allowfullscreen></iframe>
    Refresh your browser to replay video again
    </div><!--End of east->
    </div><!--End of east href-->
    </div><!--End of col9-->

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

  2. Mark Shirley
    Member
    Posted 1 year ago #

    I have now dropped this plugin as it has issues with twenty eleven. Im using fancybox for wordpress plugin but I have the same page reload issue with iframe content

    http://www.ricecreative.co.uk/willisnursing/test/

    <div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:460px;height:380px;">
    <iframe width="460" height="380" src="http://www.youtube.com/embed/rg9VxzF-lcI" frameborder="0" allowfullscreen></iframe>
    </div></div>
    <a href="#fancyboxID-1" class="fancybox">FANCYBOX LINK HERE</a>
  3. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hi i have 3 fancybox animations on the zones on the map on the right hand side but they need a browser screen reload when you close the box.

    Why do the need a reload?

    I have now dropped this plugin as it has issues with twenty eleven.

    See the first (sticky) post on the forum http://wordpress.org/support/plugin/easy-fancybox or get the development version...

    Can anyone see what im doing wrong here is my code and the link to the page is at the bottom.

    Yes, do NOT put an iframe inside a hidden div and then open it in inline mode. Instead use iframe mode and just link to the src URL of the iframe. Like:
    <a href="http://www.youtube.com/embed/rg9VxzF-lcI" class="fancybox-iframe">link</a>
    or similar in an image map...

  4. Mark Shirley
    Member
    Posted 1 year ago #

    Hi the reload would be if someone accidentally closes the box and opens it again it then needs a browser refresh. Ive tried your approach above but which is great for an iframe but I dont know how to add extra html content into the fancybox. The code below allows me to do this but still as the refresh problem if its closed and reopened.
    Link:
    http://www.ricecreative.co.uk/willisnursing/test/

    <div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:470px;height:450px;">
    
    <iframe width="460" height="280" src="http://www.youtube.com/embed/rg9VxzF-lcI" frameborder="0" allowfullscreen></iframe>
    
    <ul>
       <li>dummy content</li>
       <li>dummy content</li>
       <li>dummy content</li>
    </ul>
    
    Please refresh your browser window if you reopen this panel
    </div></div>
    <a href="#fancyboxID-1" class="fancybox">FANCYBOX LINK HERE</a>
  5. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    First uninstall (!) Easy FancyBox 1.3.4.9 and then download and install the 1.5 development version from http://downloads.wordpress.org/plugin/easy-fancybox.zip

    Then revisit Settings > Media admin page and activate (and configure like you want) the new Inline content option.

    Next go back to the test page and change class="fancybox" to class="fancybox-inline".

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic