The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make an iframe open by clicking an image?

View previous topic View next topic Go down

In progress How to make an iframe open by clicking an image?

Post by !_NICK_! on November 7th 2011, 12:26 am

How to make an iframe open by clicking an image?

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by LGforum on November 7th 2011, 1:49 am

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.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by !_NICK_! on November 7th 2011, 2:28 am

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

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by LGforum on November 7th 2011, 3:04 am

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

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by hv4mevn on November 7th 2011, 3:12 am

you can use the colorbox
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

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by !_NICK_! on November 7th 2011, 3:48 am

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


!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by hv4mevn on November 7th 2011, 3:52 am

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

hv4mevn
New Member

Posts : 24
Reputation : -1
Language : viętnam

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by LGforum on November 7th 2011, 3:38 pm

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>');
}

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by !_NICK_! on November 7th 2011, 11:03 pm

What? I'm lost.

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by kirk on November 9th 2011, 2:00 am

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

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by Nera. on November 9th 2011, 9:17 am

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 king

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by Guest on November 9th 2011, 8:09 pm

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.

Guest
Guest


Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by kirk on November 9th 2011, 11:31 pm

@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

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by !_NICK_! on November 18th 2011, 10:14 pm

Okay kirk, how do you do that?

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

In progress Re: How to make an iframe open by clicking an image?

Post by ankillien on November 20th 2011, 8:10 am

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.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum