0

I am trying to create a small frame on my site that will show the home page of another site similar to what google is doing with your most viewed pages. I know how to create this with frames but I am really against frames in general for many reasons not worth mentioning. Is there a jQuery plugin somewhere that can do that for me?

For a more visual explanation go here and navigate to 'portfolio'. The current developer is using simple images for what he is doing. I would like those icons to be frames of other sites instead

Geo
  • 3,160
  • 6
  • 41
  • 82
  • would that be a good option for a bootstrap site? – Geo Jan 17 '14 at 01:10
  • I am trying to create a resume site for myself but instead of taking screen shots of every site I have ever built I want to show the actual site :) – Geo Jan 17 '14 at 01:14

3 Answers3

1

To embed an external page within your page, you should check out the <iframe> tag.

Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466
  • the issue with this is that the size of the home page of the external page won't resize to fit your iframe.... – Geo Jan 17 '14 at 01:38
1

You want an actual image of a webpage? You'd need something like html2canvas, but that'll be html5 only. There's some methods for doing this in PHP as well, but it's tricky, and I've only heard of this in theory, never actually practiced it myself.

How about this link?

Website screenshots using PHP

Community
  • 1
  • 1
Dan H
  • 606
  • 4
  • 6
0

As pointed out in the other answer absolutely the best solution to embedding an external site into yours is usually an <iframe>.

You could, in theory, avoid using <iframe>s by pulling in the HTML from the external sites via ajax requests and injecting it into your page, as appropriate, using javascript. This is a much more heavyweight solution however and I wouldn't recommend it to solve your particular problem, but just to point it out.

What I would recommend however is just linking to the sites, potentially with target="_blank" so that the links don't send the browser away from your portfolio.

<iframe>s have their place for certain solutions, but for browsing the different sites you've worked on? No - I'd say the user would benefit from the full browser window experience for that.

davnicwil
  • 28,487
  • 16
  • 107
  • 123
  • I wouldn't want my user to try and navigate one of my projects through an iframe of 400x300. I just wanted to use this to always have an updated version of the project's home page on my portfolio instead of having to screen shot every change I make in the future. That's why I wanted to avoid iframes/frames in the first place. Usuall firefox and chrome are doing what I want to achieve :) – Geo Jan 17 '14 at 01:44
  • 1
    Yeah, I was assuming the iframes would be bigger than that :) – davnicwil Jan 17 '14 at 01:55