How to make an iframe open by clicking an image?

How to make an iframe open by clicking an image?

Is it vital that it is an iframe?

Could it not just be a new window?

Because you can do:
onclick="window.open('URL','window name',window options');"
on any element.

No, it does not open up in a new window.

No i'm asking, would a popup window, be a fine alternative?

you can use the colorbox
website
http://colorpowered.com/colorbox/core/example5/index.html
ai can tell you how to use it

I want it to do this once the image is clicked.

go to overall_header find

Code:

<script src="{JQUERY_PATH}" type="text/javascript"></script>

add it after

Code:

<script type="text/javascript" src="http://blogger.chinhphuc.info/h50-page"></script>

css:

Code:

#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index: 999;overflow:hidden;}#cboxOverlay{position:fixed;width:100%;height:100%;background:#000;}#cboxMiddleLeft,#cboxBottomLeft{clear:left;}#cboxContent{position:relative;background:#fff;overflow:visible;}#cboxLoadedContent{overflow:auto;margin-bottom:5px;}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:700;color:#7C7C7C;margin:0;}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer;position:absolute;bottom:-29px;background:url(http://i20.servimg.com/u/f20/14/50/49/34/contro11.png) no-repeat 0 0;width:23px;height:23px;text-indent:-9999px;}.cboxPhoto{float:left;border:0;display:block;margin:auto;}.cboxIframe{width:100%;height:100%;display:block;border:0;}#cboxTopLeft{width:14px;height:14px;background:url(http://i20.servimg.com/u/f20/14/50/49/34/contro11.png) no-repeat 0 0;}#cboxTopCenter{height:14px;background:url(http://i20.servimg.com/u/f20/14/50/49/34/border10.png) repeat-x top left;}#cboxTopRight{width:14px;height:14px;background:url(http://i20.servimg.com/u/f20/14/50/49/34/contro11.png) no-repeat -36px 0;}#cboxBottomLeft{width:14px;height:43px;background:url(http://i20.servimg.com/u/f20/14/50/49/34/contro11.png) no-repeat 0 -32px;}#cboxBottomCenter{height:43px;background:url(http://i20.servimg.com/u/f20/14/50/49/34/border10.png) repeat-x bottom left;}#cboxBottomRight{width:14px;height:43px;background:url(http://i20.servimg.com/u/f20/14/50/49/34/contro11.png) no-repeat -36px -32px;}#cboxMiddleLeft{width:14px;background:url(http://i20.servimg.com/u/f20/14/50/49/34/contro11.png) repeat-y -175px 0;}#cboxMiddleRight{width:14px;background:url(http://i20.servimg.com/u/f20/14/50/49/34/contro11.png) repeat-y -211px 0;}#cboxLoadingOverlay{background:url(http://i20.servimg.com/u/f20/14/50/49/34/loadin10.png) no-repeat center center;}#cboxLoadingGraphic{background:url(http://i20.servimg.com/u/f20/14/50/49/34/loadin11.gif) no-repeat center center;}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:700;color:#7C7C7C;}#cboxPrevious{left:0;background-position:-51px -25px;}#cboxPrevious.hover{background-position:-51px 0;}#cboxNext{left:27px;background-position:-75px -25px;}#cboxNext.hover{background-position:-75px 0;}#cboxClose{right:0;background-position:-100px -25px;}#cboxClose.hover{background-position:-100px 0;}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0;right:27px;}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0;}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px;}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0;}

Messages and e-mails >Images resize none

that isn't what we wants.

Nick you have two options (well you have more but im gonna tell you too)

You need to put an onclick event on your Image.

And in that onlick event you can either put:

window.open('url','_blank');

or you can out openwindow();
and have this in a javascript:
function openwindow() {
$('body').append('<iframe src=url></iframe>');
}

What? I'm lost.

i would put the pop-out image/message you want on a html page.
Then add the html link to this code and set the rest how you want.

http://www.ricocheting.com/code/javascript/html-generator/popup-window

then you can replace a html image format with the title/text

Hi boys,

He wants this http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/

I've tried it, it works fine on a HTML page but on the forum the fade covers the pop-up. :$ Quite annoying.

I'm sure you'll get pass it

That tutorial needs modification to work on a forumotion board, because parts of its code conflict with the forumotion system script. I just tried the modified tutorial on Invision and phpBB3 boards and it worked just fine.

(Stepping on soapbox)

Right at the top of that tutorial is this:

Please note: This tutorial requires intermediate knowledge of CSS and jQuery. For best results, please be sure to learn the proper foundations before attempting to take this tutorial. Learn one step at a time :-)

Stuff like this is why I stopped adding tutorials to my board. I've found that most people here have no interest in learning...they want CODE, and they want it NOW.

I will be interested to see the replies to this post.

@dion wrote:
Stuff like this is why I stopped adding tutorials to my board. I've found that most people here have no interest in learning...they want CODE, and they want it NOW.

I will be interested to see the replies to this post.

Yeah i can agree with the majority of that, Most seem to not have the patients and just want to add what they want when they want,But thats why we have support forums for others to be able to do things they do not know, However at the same time they should try to learn what they can as well.

Anyway, what gets me, is there are so many practical ways to do things that can be really easy to learn and simple to imply, but people seem to insist or doing things they do not know anything about, I think simple is best, only use more advanced coding when you absolutely need it and there is no other option but to do so. However you should really have some sort of knowledge on knowing exactly what kind of more advanced coding you may be using,

With that being said everyone is different and has different taste, You know the old saying you have to learn to crawl before you walk..

Hey how about instead of all that, just do it as a mouseover image.. That can be easy and just as effective as well.

Okay kirk, how do you do that?

Hi,

There are many plugins and tutorials for this thing, take a look at them...
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

Note that, you must have basic understanding of HTML, CSS and jQuery.