TinyBox JavaScript Popup Box – 3.4KB

Thanks for sharing, again you write one of the best JS scripts around.
Just wanted to let you know that

Cheers,
S

Nice javascript. However the demos could have a button to close the box. Is it possible to add one?

Amazing. Simply amazing. Thank you.

Hey thats a script i was looking for actually . It will help in providing a message box in my upcoming apps . thanks and keep the good work going.

perfect thanx leigeber

Simply AWESOME. Great job Michael.

Great Work!
Finally i found a modal that works correctly with my software in .NET and Ajax!!

I’ve only a little problem, i hope that you can help me to solve.

I call my page in this way:
TINY.box.show(‘inoltra.aspx?ID=’+sID,1,500,300,1)

In the page inoltra.aspx i’ve a DropDown that on selectedIndexChanged have to call a Sub, but it doesn’t works.
I’ve tried the page inoltra.aspx in normal mode, not in modal with tiny, and it works.

Can you help to solve this problem?
Tx a lot and very very congratulation for this code!

Hmm I just was thinking, it would be nice to have it closed on ESC key but anyway I must say again, great work

Cheers!

That looks very smooth! Might be using this in my next project. Thanks!

The tinymask doesn’t cover select boxes in IE6. Any idea how to fix it?

Please update the width and height properties of page to;

width:function(){return self.innerWidth||document.documentElement.clientWidth<b>||document.body.clientWidth</b>},
height:function(){return self.innerHeight||document.documentElement.clientHeight<b>||document.body.clientHeight</b>},

Hi – Thanks for this great script! I have one problem – the positioning isn’t working for me – the window is the top left of the screen, not in the center. This happens in IE7 and IE6 but not Firefox. Any ideas? Thanks!

Wow, really awesome script…^o^
But, i have one problem, can i execute other javascript over tinybox popup?
well, i have tried to load a page that contain tabbed menu javascript (using jquery)… and i found out that this script can’t work within popup, any idea to solve this problem?

It’s a great job!. A simple development without heavy libraries, Ajax, .NET, etc…

I am passionate about the work simple and effective.

Thanks for sharing.

I would like to use this script to load our sites Verisign certificate as a popup. Is it possible for this to work with a URL? I tried putting a URL as ‘content’ but that didn’t work…next I created an HTML file with:
<meta HTTP-EQUIV=”REFRESH” content=”0; url=https://seal.verisign.com/splash?form_file=fdf/splash.fdf&dn=WWW.mysite.COM&lang=EN”>
but that didn’t work either. Is it possible? Thx!

Sweet as!

Looks good, I think we are going to implement that on our blog:

http://blog.kiwisbid.co.nz

Btw do you have any suggestions what else to use on this kind of website? If you do have any please hit me up on contact (at) kiwisbid.co.nz

Cheers!
M.

Hey, how’s it going? This seems like a really nice feature, but I just cant’ get it to work. The page where I’m trying to make this work is http://www.yoxim.com/services.php, where it says “open a new window”. I linked it to a test url just to make sure it works, but for some reason it seems broken.

I plan on using this to display a contact form. It seemed like a perfect non-intrusive solution for what I need. Any help would be greatly appreciated. My email is info@yoxim.com. Thanks!

Wonderful script…question though…can I use this with multiple javascript buttons you provided. The one rollover button works and I get the overlay and the the photo comes up but when I clip a different button the script doesn’t work. What am I doing wrong. Great script though…works for one on a page but not multiple rollovers? HELP!

so this script is called TinyBox! great script man. been wondering to use this instead of a pop-up!

This is absolutely amazing and thank you for all of your hard work. Is it possible to create an instance without an onclick event?

Michael,

How would I call Tinybox from Flash AS2?

Thanks so much.

Kevin

Thank you very much for the script, it is amazing! It would be cool to have a close button and the display content when javascript is turned off. Also, html does not pass validation because of the img in javascript. Unfortunately I do not know javascript, to do this, so I will wait for the next version.

Thanks for this great script that works on all browsers!

For those who would like to use it with jQuery, you can do it this way :
$(function(){
$('#button').click(function() {
TINY.box.show($('#hidden-stuff-to-show').html(),0,0,0,1);
});
});

Awesomeness.

Amazing little piece of code!

I have a small (fixable?) issue, though. The buttons i'm using to call up the TinyBox are only reached once you scroll down the page a bit, but once you click a button and the TinyBox opens, it automatically jumps back to the top of the page!? Is there a way to get the TinyBox to popup where I am on the page, instead of closer to the top?

Thanks again for a real treasure.
ez

Hi,
is there a possibility to turn off fade in/out and resize of the box at begining? because when a page has a lot of graphic its very slowly to open this box

Hi, thanks for his great work

I downloaded the script.. the image example works but the external source examples does not work..eg the one with the advance.html does not work..

I dont know what to do..

PJ, You may be looking for JS tooltips. Here's what I have used (I have used an older version and I haven't tried the latest one): http://www.walterzorn.com/tooltip/tooltip_e.htm

DT, you can change the final opacity of the mask changing this code in the show function: 'this.alpha(m,1,80,3);'. 80 is the value for the mask final opacity at the moment. 3 is the number of steps for the animation. The opacity of the box is set in the twalpha function on this line 'e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia)'. 100 – full opacity of the box, 5 – the number of steps. So when the mask is ready, the box starts showing. After the box is ready (it has reached the final opacity value), fill is called.

@cfaniak try changing the hide function – change this line TINY.box.alpha(p,-1,0,3)
to this:
TINY.box.alpha(p,-1,0,1)
Someone correct me if I'm wrong but the s var in the alpha function is the number of steps?
That will change the fade out.

to change the fade in:
change
e==p?TINY.box.alpha(m,-1,0,2):b.innerHTML=p.style.backgroundImage=''
to
e==p?TINY.box.alpha(m,-1,0,1):b.innerHTML=p.style.backgroundImage=''

and

e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia)
to
e==m?this.alpha(p,1,100,1):TINY.box.fill(ic,iu,iw,ih,ia)

(first one sets the fade in for the window, second one sets the fade in for the backdrop)

@MICHAEL: Great work, thanks for this script. Has saved me endless headaches with bloated multi functional generic scripts. Big ups!!

TomVamos, Use IFrame as content with src the page you currently load with AJAX in the popup. Example:
function popupOpen(popupUrl, popupWidth, popupHeight)
{
var content = '<iframe id="frameTiny" src="' + popupUrl + '" width="100%" height="100%" scrolling="yes" frameborder="no" marginwidth="0" marginheight="0"></iframe>';
TINY.box.show(content, 0, popupWidth, popupHeight, 0);
}

For comments near 31 May 2009, regarding Javascript execution after the Ajax load, I modified the "psh" function in the first "else" after

b.innerHTML=c;

I added:

var x = b.getElementsByTagName("script");
for(var i=0;i<x.length;i++)
{
eval(x[i].text);
}

Great job Michael

Hi. Just wanted to thank you for nice scripts and point out a problem.

If you want to use both TinyTable and TinyBox (like we do), it can't be done by just including the .js files as normal. You have to
modify the file which is loaded later to remove the first two "items" (the TINY-var and the T$ function) or copy the parts after that to the end of the other file and just use one file.

Hope this might help anyone who gets puzzled why it doesn't work straight out, since it took a few moments before we realized what the problem was.

(Also had to submit this comment twice)

First of all, I must say that this is a gem of a script. Thanks for the wonderful work!! I just wanted to ask if you could assist. I am having issues integrating with Google Maps, as a popup. I think the js is conflicting. is there a work around with this?

Hi, very nice Javascript!

I have only one problem.
I want use the popup box same at a iframe. I have included a php file that contain forms and link.. i've tested but when click the link or button, page reloads.

I want when i click links and buttons, the next page show in the popup without reload the page.
How i do that?

very good js script trick for making files work that contain javascript is to use iframe.in tiny box show method open a file a that contain iframe or set its contents as iframe that linked to your required asp or php file and set iframe no border ,with no scroll bar.enjoy working with it

thanks
Waqas

when i try it on internet explorer, it just shows up on the left side. in firefox it works perfectly.

great script – need some advice though..
I have the same issue Tommy has with wanting to pass information from one tinybox to another – I don't want to send the data back to the server until I have completed a series of screens.
I have managed to record data in javascript variables and then inject them into the next screen when it arrives. for example..
funciton Next(){
TR = getRadio('rad');
TINY.box.fill("<div id=res></div>",0,0,0,1);
T$('res').innerHTML = TR;
}
but when getting to a reasonable amount of data this becomes a bit scary – I was hoping someone cleverer than me would come up with something more elegant.
cheers

Hi ! i am webdeveloper of <a href=http://www.beyondmart.com>www.beyondmart.com</a>. I have founded solutions regarding to show popup window in center of page evenif you will scroll page. You need following changes in css and javascript
(1) css :
replace #tinybox with

#tinybox {position:absolute; display:none; padding:10px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000; vertical-align:middle;}
(2) Javascript :
In line number 14 you just add
window.onresize=TINY.box.resize;
window.onscroll=TINY.box.resize;

Is there any licence / copyright for redistributing this script.

How could I automatically use TinyBox for evey image with "tinybox" class?
I guess jQuery solves this, but I don't know how.

Is there an easy way to fire off an event when TinyBox is finished resizing?

This is a really good tool and I'm implementing it in our company app.
I'm running into a problem though -

1) I open the tiny box (via AJAX by passing a url) whenever a particular link is clicked.
2) The new page is displayed with all the HTML elements including javascripts.
3) However, when I click on 'save' in the tiny box, the javascript in the tiny box is not executed.

Resolutions -

1) I tried Nico from Argentina's solution about evaluating the script tags. But when I click on 'save' now, it still does not call the javascript function in the tiny box. It is able to call any javascript function in the main parent window.

Basically, I need a popup to display some fields that can be changed, and when the user hits save after changing a value, the value is sent to a javascript function which invokes a JSP url.

However, i can't get this to work, and I'm nearing abandoning the tiny box code . Any help is much appreciated.

Thanks

Question:

I'm trying to use TinyBox so that when it displays, it's form fields are populated with data from the background page. When it's closed, the data from TinyBox's form fields are saved to the background form fields.

Here is a rough example of my method, but it's not working:
—-Load TinyBox Function—-
loadTinyBox() {
*CREATE SOME HTML FIELDS*
ShowTinyBoxFunction
getDocumentElementByID("SomeElementOnTinyBox") = getDocumentElementByID("SomeHiddenElement");

—-Close TinyBox Function—-
closeTinyBox() {
getDocumentElementByID("SomeHiddenElement") = getDocumentElementByID("SomeElementOnTinyBox");
HideTinyBoxFunction

For some reason, I always get a "getDocumentElementByID("SomeElementOnTinyBox")" is null javascript error (I assume the elements are not finished drawing yet before the script tries to populate the data?). All of the relevant javascript is in the background page, as it should be. How can I populate the data fields in tinybox? Does anyone have a work around?

Thanks for a wonderful project!

Dougware, I had a similar problem too. Try setting an explicit 'id' attribute to the <i>SomeHiddenElement</i> HTML element on your page.

It doesn't work properly in IE – it shows up on the left side of the screen, with horizontal and vertical scroll bars.

Any solutions?

great script man.. really aprreciate it… thank you so much…

Ooops!

The advanced feature does not work for me for somehow. It just shows the popup but no content (of advanced.html) is displayed and the popup hides after 3 seconds. I download & run, change nothing.

This is such a resourceful site! Many thanks for throwing such helpful codes up!

Question: in reference to the image pop-up, how do I throw a Flash object in there? I tried and tried again, but it doesn't like the code I am applying in place of the <img src='images/rhino.jpg' width='298' height='373' alt='' /> on line 26.

Any suggestions?

tinybox is slow effect in IE8.but FF 3.x is verry good.
Are you fix ?

I've noticed that TinyBox doesn't work in Internet Explorer when TinyMCE is implemented on the page that triggers the TinyBox-popup. Does anyone have an idea how to solve this?

I want to use Tiny Box within an asp page.

It wants to put the box up at the top left of the page. Only the right half of the box in the page.

Will it work in ASP Classic .asp page?

Love the script would love it even more with a close button. I know it's free, etc but if you every update it a close button is a must

I want to commend you sincerely on the work you did with the slideshow in particular. I think it's brilliant. I'm planning to use it to replace the portfolio section on my website. I'm also going to look for a way to incorporate this image popup with the slideshow. So when you click on an image it comes up, and darkens the screen and what not. Thanks again for making this available. Keep up the excellent work.

Greetings, is an excellent work.

An example with only CSS, no JavaScript:

<html>
<head>
<style type="text/css">
body {
background:#EFEFEF url('bg') fixed;
}

#fixelem {
position:fixed;
_position:absolute;
_width:expression(eval(document.body.clientWidth)+0+'px');
_height:expression(eval(document.body.clientHeight)+0+'px');
_top:expression(eval(document.body.scrollTop)+0+'px');
top:0;
left:0;
margin:0;
padding:0;
width:100%;
height:100%;
background:#707070;
overflow:hidden;
filter:alpha(opacity=70);-khtml-opacity:0.70;-moz-opacity:0.70;opacity:0.70;
}
</style>
</head>
<body>
<span id="fixelem" onclick="this.style.display='none'"><center><h2>Este texto siempre estará en la parte superior de la página</h2><br><img src="img.gif" width="200" height="200"></center></span>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
</body>
</html>

The layer is fixed in the foreground, without damaging the scrollbars.

(Expressions) and (background fixed) are to correct errors in IE 5x, 6x, etc.

New browsers do not have this problem with the scrollbars.

I added the link: <a href="javascript:TINY.box.fill('join.html',1,0,0,1)">Join</a> when I click it I get a javascript error stating p.style is null or not an object on line 41 character 6.

Am I doing something wrong?

ASP .Net C# event no firing up on tiny box..

please help me how to do it
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="tinybox.js" language="javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
<asp:LinkButton ID="LinkButton3" runat="server" OnClick="LinkButton3_Click" >Display</asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="javascript:TINY.box.hide()">Close</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="javascript:TINY.box.size('tinybox',200,175,4)">Expand</asp:LinkButton>
</div>
</form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void LinkButton3_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
}
}

Has anyone tried to use TinyBox has a popup for Mono Slideshow or embed a SWF file in the advanced sample?

I have been working on it for hours but cannot get it to work.

if anyone has successfully embeded a SWF, please tell me how you did it.

thanks Mr Michael for this article
http://0gate.com – زيرو جيت

Ok great script, but i have a problem with transitions being slow in ff when there is flash on screen.

I have made the mask/boxresize transitions a little quicker which makes things a little more bearable, but…

I want to be able to change the starting size of the tinybox to be bigger so it has less to resize when it appears.

I have spent a while trying to find where the beginning of the ease animation on the resize is but i'm not so hot with js so i cant figure it out.

The final size of the box will be about 600×400, so i'd like it to appear at about 400×300 instead of the tiny square it does currently.

Any help would be greatly appreciated thanks :0)

This script works perfectly in IE 8 (centered) if you chage this lines in tinybox.js:

width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},

Michael, chage the download files, please. Congratulations and thank you.

small set of snippets nice piece of work!

Hi, I keep receiving this error please help
Webpage error details

Message: Expected '{'
Line: 287
Char: 2
Code: 0
URI: http://localhost/Baytalm/manage_project.php?act=pro_add

Could you please help

The popup function does not load in IE? Does anyone know a fix for this?

function popupOpen(popupUrl, popupWidth, popupHeight)
{
var content = '<iframe id="frameTiny" src="' + popupUrl + '" width="xxx" height="xxx" scrolling="no" frameborder="no" marginwidth="0" marginheight="0"></iframe>';
TINY.box.show(content, 0, popupWidth, popupHeight, 0);
}

Hi. This is a great script. Really simple to implement. I was wondering, how can I get it to work with class as well as id. Am i right that currently, the element that calls the modal box needs to have a unique id, but i would like to be able to assign the box to multiple elements without needing each one to be set up separately. Hope this makes sense!
Any help much appreciated
Thanks

this is one of the best and easiest lightbox window script. Thanks a lot…

Uh …

absolutely

Cool!

On FF 3.0.15,I am using.Problem is if image size is very small.I am putting like
var content$k = "<img src='$IMGPATH/".$object['img']."' alt='' /> without any attributes of height,width. The original image comes outside the white box and is not in the center of the white box.Instead its slightly pushed to lower right corner of white box.
Please let me know how to fix this.
Regards

Thanx very much bos…..

Hi, thanks for the great script.
Just one question tho… My page is rather long, and I use a scroll bar, so when an item is clicked the popup displays at the top of the page again. Is there any way of displaying the popup at the current scrolled position?
I would really appreciate any suggestions or advice
Thanks in advance

Hi Michael, Very nice and many thanxs, but….if the tinybox is taller than document body and taller than the browser window, then 1) vertical scrollbars appear which causes the mask width to be too wide (by the width of the v. scrollbar), which in turn causes horizontal scrollbars, and 2) scrolling down, we have an unmasked strip from body end to tinybox end.

thank you for sharing this wonderful script. i have a table that displays charges and payments for items as links<a>. i would like to use your script when a customer clicks a link, and the tinybox shows the detail information. i'm new to web developing and javascript and need your assistance on how to use your script with the <a href> tag. thanks.

Great script, thank you, it is hugely useful! I am having trouble with adding a close button. I see some threads talking about adding it using <div id="close" onclick="javascript:TINY.box.hide()">Close</div> but i am not sure where to put it and how to use this code.

if anyone could help I would be grateful. I am using the tinybox for images only and want a close icon in the top right of every box as a default. Micheal, you mentioned a div starting at line 9……excuse my ignorance but what exactly do i have to put there. I am a total beginner at all this.

thanks for your help

please dis-regard my previous question, Alterin has answered it previously.

To remove the background-mask fade-in I changed line 36 to: ic=c; iu=u; iw=w; ih=h; ia=a; this.alpha(m,1,0,0);

Thanks!

hey umesh,

hide the flash ad by putting it in a div and make it display:none; css property.

awesome stuff!!!!

u saved many lives,,
and i have a problem..i had a long page..tiny box shows in the middle of my page..i need to scroll down to see the content..
somebody help to fix this..
i need the tiny box in top of my page…

Hi there,

Firstly, may I say what a great script this is. Simple and quick. My only question as I am not an expert in Javascript, is whether we could have the popup box open up to fill x% width and x% height of the user's screen instead of the fixed pixel dimensions?

I see how to use tinybox to load ajax, pictures, and text. But I can't figure out how it get it to load HTML content, like a small form page. Help.

how to decorate the tinybox with header and footer, like in header cross image to close it.

Please help me…………..

Hi, script is working fine but I am using the header in flash and that flash header is coming on the top and the mask below it.
Please let me know how to sort this out…as the black mask is not able to overlay he flash.

Thanks!!

Hey Michael, thats a nifty script you got there.
I was using it for my site and noticed that there is a bug in IE 6 – see http://www.codeproject.com/KB/HTML/dropdown_div.aspx
This happens when you have a dropdown on the body of your page, it shows *above* your popup window. So I added an extra function that gets called from inside show() and hide(), here goes… hope you find it useful:
// Hide Select (fix IE bug where all Select Dropdowns show above the top layer
hs: function(t) {
var st = document.getElementsByTagName('select');
if (st)
for (var i = 0; i < st.length; i++)
st.item(i).style.display = (t) ? '' : 'none';
}

Hi Please please can you make a simple close button for this script????

Firstly, many many thanks to Michael for some fantastic and very useful code. I wanted to share a solution. It may not be elegant but it works and may help someone, or inspire Michael with any future updates.

My scenario: The user has completed some processes on the page and wants to email a copy of their results for future reference. I wanted to pop-up an 'email this to me form' using tinybox, so the original page and all their work stay in place in case they want to do something further. The user completes some inputs – their email, name etc – in the popped up form and submits it to my php code which does all the processing and refreshes the page with a success or failure message.

The problem:
1. The refreshed page broke out into a new window.
2. Once in an iframe to stop this there was no close button that I could get to work.

Solution …

inspired by a couple of earlier comments, in the tinybox.js code I changed the fill function to…

fill:function(c,u,w,h,a){
switch(u){
case 0:
this.psh(c,w,h,a)
break;
case 1:
p.style.backgroundImage='';
var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
x.onreadystatechange=function(){
if(x.readyState==4&&x.status==200){TINY.box.psh(x.responseText,w,h,a)}
};
x.open('GET',c,1); x.send(null)
break;
case 2:
ifr='<a href="#" onclick="TINY.box.hide();"><img src="mypage/images/Skin1/bg/close2.jpg" alt="Close Window" /></a><iframe id="someid" src="'+c+'" width="'+w+'" height="'+h+'" scrolling="no" frameborder="no" marginwidth="0" marginheight="0"><p>Your browser does not support iframes.</p></iframe>';
this.psh(ifr,w,h,a)
break;
}
},

and changed the hide function to…

hide:function(){
window.parent.document.getElementById('someid').parentNode.removeChild(window.parent.document.getElementById('someid'));
TINY.box.alpha(p,-1,0,3)
},

This allows for my pages to display within an iframe to stop them breaking out, with a close button displayed top right. Did I say top right? ah that needs changes to the css…

#tinycontent img{border:none;display:inline-block;float:right;text-align:right;padding:0;height:23px} /*Close button */
#tinycontent iframe{background:#323232;height:590px} /*less height than the tinybox to ensure the iframe is within the border, the background is set to the same color as my page content body */

The tinybox call is then…[note I have needed to set an appropriate height and width]
TINY.box.show('myformpage.php', 2, 600, 660, 1);
// the 2 makes it an iframe, the 600 and 660 are the width and height, the 1 is because I want the user to decide when to close.

Hope that helps someone.

Happy tinyboxing!

hi! how can i create a close button in the popup???

Exactly what I was looking for.
Me is very very grateful

Thanks.

You can get the ESC key to close the window with the following code..

function esc_hide(e){
if (!e) e = window.event;
if (e.keyCode == "27") TINY.box.hide();
}

Then add the following to the show function..

document.onkeypress = esc_hide;

Plus the following to the hide function..

document.onkeypress = '';

Hi mate, im using your tinyslider, and have tried to get it to work with thickbox, and spent all day trying to fine a solution, but nothing, the slider wont work in the new window.

Will tinyslider work with tinybox?

Many thanks

Sheraz

esto es exelente.. un aporte exelente de su parte, realmente, ya que es muy facil adaptarlo a otras modalidades.. ya sea para dejar mesajes mandar e.mail secuencias de fotos.. como tu lo dices. el cielo es el limite,… gracias por este aporte

You might want to add your script to this database http://planetozh.com/projects/lightbox-clones/

Wondering if anyone can guide me in disabling the feature that when you click the mask background, the tinybox closes? I have a particular need to only have this close via a button click.

Thanks – great, easy, useful script.

This Its My Solution For Create a Close Button:

In The Show Function:

dt = document.createElement('div');
dt.id='divtitle';
dt.style.paddingRight='5px';
dt.style.position='relative';
dt.style.textAlign='right';
dt.style.cursor='pointer';
dt.onclick=TINY.box.hide;

st = document.createElement('span');
st.id='spcerrar';
st.style.paddingRight='5px';
st.style.fontWeight='bold';
st.style.textAlign='right';
st.style.Align='right';
st.style.verticalAlign='absmiddle';
st.innerHTML = 'Cerrar';

it = document.createElement('img');
it.src='../images/modal-box/close.gif';
it.title='cerrar';
it.alt='cerrar';
it.onclick=TINY.box.hide;
it.style.cursor='pointer';
it.Align='absmiddle';

dt.appendChild(st);
dt.appendChild(it);

document.body.appendChild(m);
document.body.appendChild(p);
p.appendChild(dt); // ******* New **********
p.appendChild(b);

Its All !!

Good Lock!

There is something really wrong with that height auto function in Tinybox. When I set 0 to get height on auto, all i get is a height:0; in CSS, witch really is not a good thing. Any ideas what I can do to get this one to actually be auto?

Thanks!

Hi,
I want to use Tiny Box within an asp page but I don't understand how to do it.

I use this sintax from onclick command but don't work and in the window run indefinitely the loading image.

<script type="text/javascript">
function tinybox(){
TINY.box.show('login.asp?pdf=0',1,700,400,1)
}
</script>

Can anybody help me?
Thanks

This is an excellent script. I can't believe how lightweight it is. Great job. I think I may have found a bug though. If I'm displaying content with AJAX and turn off animating the window, the modal doesn't display anything.

For example, if I change the advanced demo from <code>T$('testclick1').onclick = function(){TINY.box.show('advanced.html',1,300,150,1)}</code> to <code>T$('testclick1').onclick = function(){TINY.box.show('advanced.html',1,300,150,0)}</code>, it no longer works.

Fix For Width and Height (No Show The RightBar and Horizontal Bar)
twsize:function(e,w,wo,wd,h,ho,hd){
var ow=e.offsetWidth-wo, oh=e.offsetHeight-ho;
if(ow==w&&oh==h){
// Fix Width and Height
e.style.width=Math.ceil(ow+20)+'px';
e.style.height=Math.ceil(oh+60)+'px';
clearInterval(e.si); p.style.backgroundImage='none'; b.style.display='block';
}else{
if(ow!=w){e.style.width=Math.ceil(ow+((w-ow)*.5))+'px'; }
if(oh!=h){e.style.height=Math.ceil(oh+((h-oh)*.5))+'px'}
this.pos()
}
}

Love the script. Amazing.

However it looks to be locked into unique "IDs". Does anyone have a solution so that it can be used with "classnames"?

Thanks.

Hi, i love this script and use it lots but i have never used it in an iframe before.

I want to click on an image which is in a small iframe, and i want it to open a large version of that image in a pop up using the tinybox script but i want it to be in a new window infront of the iframe.

At the moment i have it trying to open in my iframe.
I am not that technical so would appreciate any explanations in depth please.

thanks
Sarah

Hi Michael..

This Script Have Problem With Spanish: ñ, á, é , í, ó, ú…
I Try With encodeURIComponent and decodeURIComponent But Not Work…

I Try Modify The Out But Not Work..
x.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=ISO-8859-1');

Please.. I Like This Script, and I USe since 2 moths But Now I See That Not Worsk with ñ and tildes…

Can You Modified and Put a Versión Correct.??

Awesome work, thanks for the script. Just what I was looking for – something standalone and slim.

Would it be possible to make the results of the click display the content that is loaded within a div on the same page, say rather than masking the screen and displaying in a new box?

Muy útil y fácil de usar. Gracias !!!

good topic

@Mike Mella ： (when JS is not available:) Maybe the follow code can help you:
===============
$('.tinyBox').click(function(){TINY.box.show($(this).attr('href'),1,0,0,1);
return false;})
<a href="abox.html" class="tinyBox">when JS is not available, it will open the link direct</a>
=====================

of course, you should have a jQuery. _sorry for my terriable English.

Great web application !
Thank you Michael.

Hi
Thanks for this. I tried to load an external page like
T$('testclick1').onclick = function(){TINY.box.show("www.google.com",0,300,150,1)}
Won't this work? Or Am I wrong?

Tom

Hi!

This popup is very cool! I really want to use it on my web site, i just have a little problem because i want it to open from a flash button!

Can you give me the code to put in the flash button to make your popup work?

Thanks and good job!

Hm… it didn't work under GNU/Linux / Webkit (Chromium / Midori).
But it work in Arora(GNU/Linux / Webkit),
and under Windows / Webkit (Chromium / Safari). Hm…

Great great great!

One question. I am (like everyone else trying to put a closing X graphic on it. Have a look at http://nelsonwhitewaterrafting.com/tinybox/ and then click on "Advanced Features"
You will notice that on FF, Chrome, Safari it looks and works perfectly but on IE 7 or 8 the graphic gets cut off at the extents of the box. Is there any way to fix this?

I have absolutely positioned the graphic using a div.

Thanks in advance.

Greg

its a very nice scripts

I have a weird bug on my site that only occurs with Opera. I am using Tinybox with the Google Font API and every time I click off of the Tinybox box the font changes to the next option on the list (which looks terrible). Is there something in the Tinybox JS causing this? Other browsers are unaffected. To see for yourself go to fetimo.com and click on 'get a quote' at the bottom of the page.

this works as expected. thanks for the great work
I have commented out (m.onclick=TINY.box.hide;) to make the popup modal

How can a redirecting link be displayed? I get a blank tinybox if my link redirects to something else

I think type of site that is useful in sharing information and it is important to shar.Web proliferation of new developments in the field of design and entrepreneurial spirit of people who have very beautiful and pleasing to be professional.<a="http://www.gunduzmetal.com">Hurda</a><br />