0

I want to have an image that, when clicked, will open a pop-up that will show a live view of the site the image is of. Here is my code:

<a class="group1" href="images/air-machine-kettle.jpg">
    <div class="portfolio-box-1 branding">
        <div class="mask-1"></div>
        <img src="images/air-machine-kettle.jpg" alt="">
        <h6>Air Machine Kettle</h6>
        <p>Web</p>
    </div>
</a>

I've tried changing the first a link from a .jpg to the link to the site, but it said the content couldn't load.

Burger King
  • 2,945
  • 3
  • 20
  • 45

1 Answers1

1

You can use the iframe tag to insert any URL into your page.

Here is an example:

<iframe src="http://google.com/"></iframe>

Other attributes to add to your iframe can be found here: http://www.w3schools.com/tags/tag_iframe.asp

  • height
  • name
  • sandbox
  • seamless
  • src
  • srcdoc
  • width

Edit 2: I misunderstood the original question. I assumed live 'pop up' meant an iframe in a modal window. What I now believe was intended is that it is a link that opens in a new window. If that is the case you want to structure your html as follows:

<a href="http://www.airmachinekettle.com" target="_blank">
    <div class="portfolio-box-1 branding">
        <div class="mask-1"></div>
        <img src="images/air-machine-kettle.jpg" alt="">
        <h6>Air Machine Kettle</h6>
        <p>Web</p>
    </div>
</a>

Edit 3: It looks like the question is evolving a bit. It is neither an iframe nor a new window that opens a URL rather a new window that opens a larger image. If that is the correct understanding then you want to do the following:

<a class="group1" href="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" target="_blank">
    <div class="portfolio-box-1 branding">
        <div class="mask-1"></div>
        <img src="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" width="100" height="40">
        <h6>Air Machine Kettle</h6>
        <p>Web</p>
    </div>
</a>

Edit 4: We've come full circle. What OP was really looking was actually a modal window that will open a larger image of the thumbnail that was clicked on.

Examples of modal windows or light boxes can be found here:

http://fancybox.net/home

http://www.lokeshdhakar.com/projects/lightbox2/

Burger King
  • 2,945
  • 3
  • 20
  • 45
xengravity
  • 3,501
  • 18
  • 27
  • would i replace the first a tag with the iframe tag? –  Mar 29 '15 at 01:22
  • I believe I misunderstood your original request. It looks like you are just looking to open a link in a new window and not a modal window. I have updated my answer accordingly. – xengravity Mar 29 '15 at 01:28
  • that's not quite it, let me try to explain it better. What i'm working on right now is a portfolio element. On the home page, i want it to just be an image (a screenshot of the site), but when the user clicks the image a pop up window appears with a larger version of the image (the first a tag is the image that is shown in the pop up). What i'm trying to do is keep the pop up window, but change the picture thats being shown to a live preview of the site so the viewer can see how the site works. If this isn't possible, i'll just use a video –  Mar 29 '15 at 01:32
  • Okay okay this is my bad sorry i've been coding for awhile and i refuse to break. The pop-up isn't necessarily a new window. It just opens up a larger image, but still on the same site. Sorta like a gallery. My apologies for my crappy explanations. I'd post a picture, but i don't have a 10+ rep yet. My site is babblefire.com, scroll down to the portfolio section. im talking about the first image you see to the left –  Mar 29 '15 at 01:46
  • Ok, what I initially assumed was correct but you had a bunch of anchor tags with target=_blank. What you are looking for is a "modal window" or also known as "light boxes". There are a million examples on the web, but it is not as easy as a simple anchor tag. Here is a link to a demo of what you are looking for. I'll update the answer. http://fancybox.net/home, http://www.lokeshdhakar.com/projects/lightbox2/, or http://codepen.io/Idered/pen/vytkH – xengravity Mar 29 '15 at 01:54
  • is there a way to change the image in the light box to an iframe? –  Mar 29 '15 at 02:14
  • Yes. Depending on which one you chose you might be able to simply swap out the image tag with the iframe in the example above. Here is another resource where Iframes work and are built in: http://noelboss.github.io/featherlight/ and additional resources here: http://stackoverflow.com/questions/8371045/linking-an-iframe-to-open-in-lightbox – xengravity Mar 29 '15 at 02:19
  • thanks for all your help, sorry for the bad question formatting. :) –  Mar 29 '15 at 02:21
  • No problem. We all start somewhere. – xengravity Mar 29 '15 at 02:21