iframe not reloading

(@ravalde)

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/

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter Mark Shirley
(@ravalde)

11 years, 2 months 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>
```
Rolf Allard van Hagen
(@ravanh)

11 years, 2 months 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…
Thread Starter Mark Shirley
(@ravalde)

11 years, 2 months 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>
```
Rolf Allard van Hagen
(@ravanh)

11 years, 2 months 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".

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘iframe not reloading’ is closed to new replies.