Question

I have page in my website that lists all projects thumbs. When a particular thumb (project) is clicked, Fancybox loads project’s details in iframe. All works great! (Content in iframe DOES NOT include navigation, header and other website elements.)

The problem I have is with Google search results page – Google indexed all details pages, and now when user clicks the link from Google results, details content page is opened in browser (instead Fancybox iframe). That is bad since details page does not iclude navigation pages.

Any user friendly solution?

Answer 1

As I mentioned in my comment, you would need to include in each “detail” page a script to sniff the URL and detect if the page was opened in a new window (top page), if so redirect to the main page with a modified URL (using a hash for instance) that will allow to open the “detail” page in fancybox from the main page.

So you could include in each “detail” page this script:

<script type="text/javascript">
var isWindow = self == top; // returns true if opened in a new window, otherwise it migh be inside an iframe
if(isWindow){ 
 // alert("this page was opened in a new browser window");
 // then redirect to main page and add hash "detailedXX"
 window.location = "{URL}/mainpage.html#detailed01"
}
</script>

Change detailed01 to different value for each “detail” page.

Then in the main page you may have links to each detail page like

<a id="detailed01" class="fancybox" href="detailed01.html">Open project detail page 01 in fancybox</a>
<a id="detailed02" class="fancybox" href="detailed02.html">Open project detail page 02 in fancybox</a>

Notice that I included an ID to each anchor that matches the hash that we will be using while redirecting to the main page.

Then your fancybox script can be something like:

<script type="text/javascript">
var thisHash = window.location.hash;
$(document).ready(function() {
 if(window.location.hash) {
  // get the URL without hash so we can restore it if needed
  var thisWindowLocation = window.location;
  var thisWindowLocationSplit = String(thisWindowLocation).split("#")[0];
  $(thisHash).fancybox({
   width: 800,
   height: 320,
   fitToView: false,
   autoSize : false,
   type: 'iframe',
   afterClose : function(){
    // returns URL to main page with no hash
    window.location = thisWindowLocationSplit
   }
  }).trigger('click');
 }
// fancybox for normal main page operation
 $(".fancybox").fancybox({
  width: 800,
  height: 320,
  fitToView: false,
  autoSize : false,
  type: 'iframe'
 });
}); // ready
</script>

I set a DEMO here

This demo open two “detail” pages :

http://www.picssel.com/playground/jquery/detailed01.html
and
http://www.picssel.com/playground/jquery/detailed02.html

If you try to open them directly, the will redirect to the calling page and open in fancybox