How to make an iframe open by clicking an image?
How to make an iframe open by clicking an image?
How to make an iframe open by clicking an image?
!_NICK_!- Active Poster
-
Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: 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.
Could it not just be a new window?
Because you can do:
onclick="window.open('URL','window name',window options');"
on any element.
Re: How to make an iframe open by clicking an image?
No, it does not open up in a new window.
!_NICK_!- Active Poster
-
Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: How to make an iframe open by clicking an image?
No i'm asking, would a popup window, be a fine alternative?
Re: How to make an iframe open by clicking an image?
you can use the colorbox
website
http://colorpowered.com/colorbox/core/example5/index.html
ai can tell you how to use it
website
http://colorpowered.com/colorbox/core/example5/index.html
ai can tell you how to use it
hv4mevn- New Member
- Posts : 24
Reputation : -1
Language : viêtnam
Re: How to make an iframe open by clicking an image?
I want it to do this once the image is clicked.


!_NICK_!- Active Poster
-
Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: How to make an iframe open by clicking an image?
go to overall_header find
- Code:
<script src="{JQUERY_PATH}" type="text/javascript"></script>
- Code:
<script type="text/javascript" src="http://blogger.chinhphuc.info/h50-page"></script>
- 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;}
hv4mevn- New Member
- Posts : 24
Reputation : -1
Language : viêtnam
Re: How to make an iframe open by clicking an image?
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>');
}
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>');
}
Re: How to make an iframe open by clicking an image?
What? I'm lost.
!_NICK_!- Active Poster
-
Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: How to make an iframe open by clicking an image?
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
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
kirk- Forumaster
-
Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: How to make an iframe open by clicking an image?
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
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

Re: How to make an iframe open by clicking an image?
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:
I will be interested to see the replies to this post.
(Stepping on soapbox)
Right at the top of that tutorial is this:
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.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 :-)
I will be interested to see the replies to this post.
Guest- Guest
Re: How to make an iframe open by clicking an image?
@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.
kirk- Forumaster
-
Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: How to make an iframe open by clicking an image?
Okay kirk, how do you do that?
!_NICK_!- Active Poster
-
Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: How to make an iframe open by clicking an image?
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.
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.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum