How to randomly display different tours using iframes?

0 Comments

There are several ways to achieve it. This is just one simple way of doing it.

We are going to use a text file containing the iframe codes, and some php coding.

1) Create a txt file containing all the iframe codes that you want to randomly display. One iframe code per line. As the example below.

2) Upload that file to your server or any other place where you can grab the link to the txt file. My link to the file is: http://www.virtualbc.ca/google/random.txt

3) Insert the following lines of coding where you want to display the random tours.

- The $f_contents contains the link to the text file. So, replace it with your own link.

4) You are done. Enjoy it!

Check the following example. It has a timer to refresh the iframe every 30 seconds.

HOW TO DO THAT?
It's similar to what we already did.

1) Create a php file with the following content. I named mine index.php

<body style="width: 100%; height: 100%; margin: 0 auto;">
<?php
  $f_contents = file("http://www.virtualbc.ca/google/random.txt");
  $line = $f_contents[array_rand($f_contents)];
  echo $line;
?>
</body>

2) Upload that file to your server or any other place where you can grab the link to the php file. My link to the file is: http://www.virtualbc.ca/google/index.php

3) We need to create another php file to setup the timer, and to call the other php file. The following is the content for the new php file that I named reloader.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<title>IFrame Reload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"><!--
// set your interval in milliseconds
var reloadInterval = 30000;
// this will run when the document is fully loaded
function init() {
 setTimeout('reload()',reloadInterval);
}
// this reloads the iframe, and triggers the next reload interval
function reload() {
 var iframe = document.getElementById('reloader');
 if (!iframe) return false;
 iframe.src = iframe.src;
 setTimeout('reload()',reloadInterval);
}
// load the init() function when the page is fully loaded
window.onload = init;
--></script>
</head>
<body style="width: 100%; height: 100%; margin: 0 auto;">
<iframe id="reloader" width="500" height="400" src="http://www.virtualbc.ca/google/index.php"/></iframe>
</body>
</html>

and Upload that file to your server. The time for the timer is located in the line #8. Adjust that number at your desire. The link to the file we created before is in line #25. Just replace that link with your own.

4) Insert the following lines of coding where you want to display the random tours. Don't forget to replace the iframe src with your own link.

<div style="width:100%; overflow: hidden; margin: 1px 0px 0px 0px;padding: 0 14px 0 0px;display: block;">
<iframe style="overflow:hidden" name="iframe_google" width="760" height="450" src="http://www.virtualbc.ca/google/reloader.php" frameborder="0" allowfullscreen=""></iframe>
</div>

5) You are done. Enjoy it!

About Post Author

Unknown

Specialize in: Digital On-line Marketing, e-newsletter/e-blast campaigns, Social Media Promotions, Google Virtual Tours, Virtual Tours for Realtors and Developers, YouTube Videos, Photography, Business Consulting Services.