override iframe link class with class of my own

I have to import a content from another website for booking purposes and there are links within the iframe content like the below that open a lightbox within the iframe

<a href="#" class="photos" rel=".photo_overlay[data-id=room_30372]">Photos</a>


<div class='photo_overlay overlay' data-id='room_30372'>
<div class='header'>
<h3>Driftwood Mantaray</h3>
<h4>2Bed (Sup)-2 nights min</h4>
</div>
<div class='hero'>
<span class='edge'></span>
<span class='container'><img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/021/standard/IMG_9234.jpg?1306372065" src="/images/placeholder.png?1306203735" /></span>
</div>
<div class='thumbs'>
<img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/021/thumb/IMG_9234.jpg?1306372065" src="/images/placeholder.png?1306203735" />
<img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/022/thumb/IMG_9246.jpg?1306372073" src="/images/placeholder.png?1306203735" />
<img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/023/thumb/IMG_9229.jpg?1306372086" src="/images/placeholder.png?1306203735" />
<img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/024/thumb/IMG_9224.jpg?1306372100" src="/images/placeholder.png?1306203735" />
</div>
</div>

Open in new window


Is there anyway I can force these links to use my fancybox code in the main page and open a window over the whole page rather than just the iframe content? If so, how?

Thanks
swgdesignAsked:
Who is Participating?
 
swgdesignConnect With a Mentor Author Commented:
Unfortunately I still haven't found a solution for this and have stopped looking as it is too cumbersome to know every single class or ID of the iframe content.
0
 
micropc1Commented:
In your A tag use target="_top" or target="_parent"

or target="_blank" for a new window.
0
 
swgdesignAuthor Commented:
I do not have control over the iframe content, hence why I want to know if there is some cool jquery that can search through the code in an iframe and rewrite /override the class/target for the lightbox so that when the link is clicked it loads in the parent page i.e. my page.
0
 
micropc1Commented:
Ah..  I see. You could create your own method to do it. Something like...

var redirectLinks = function() {
   var myIframe = window.frames[0];
   var iFrameLinkArr = myIframe.contentWindow.document.getElementsByTagName('a');
   for (var i = 0; i < iFrameLinkArr.length; i++) {
      iFrameLinkArr[i].target = "_blank";
   }
}

Open in new window


i haven't tested this because I'm typing this on my iPhone, so there's probably a bug or two, but it should give you the general idea.
0
 
swgdesignAuthor Commented:
There si no easy solution for this and so I have ditched the project and accepted my own answer.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.