2 weeks since my last English post, 1 month before my real new post (the last was only translation of older posts). During this time I was busy to translate these posts, busy at work in Fluidesign, busy to live in LA.
During the last days, I developed my first own jQuery plugin: nyroModal.
Why a new plugin of this kind when there is already too many?
4 answers:
- There is no too much using jQuery, most of them use Prototype/Scriptaculous
- Most of them aren't too customizable as expected
- When you find a bug, it's difficult to contact the developer -who often ask some Paypal donations- or understand the code to fix it
- Because it's still pleasant for his ego to realize the things by himself
My plugin provides all the features I saw in the differents plugins I tried. In bulk:
- Ajax Request
- Display an hidden DOM element
- Image
- Gallery
- Form
- Iframe
But I also added some stuff I don't believe see elsewhere, or not enough:
- You can target the content inside an Ajax request or a form
- Forms works with a file upload
- Background color is modifiable dynamically
- Display an error message if needed
- Ability to resize from an Ajax Request
Moreover I took care about the ability to customize the modal, to allow everybody to change the way the elements are animated. There is alos many possible callbacks to done every JavaScript action tou need. Thus every animation function could be fully rewritten and everything is documented: all available settings and the full modal process to allow each developer to understand how it works et to do what ever he want. I probably create more callback than necessary but better more than not enough!
And yes, it's already the 1.1 version because I showed it to my Fluidesign colleagues and all told me the transition -especially for the gallery- didn't look so good. So I created 2 new animations callback the same evening to get round of that.
If you have any suggestions, bug, improvement idea or if you use it, don't hesitate to let a comment. I'll be glad to answer it.
PS : I know, I didn't search too far for the name...
Comments.
#1 by Patrick
Nice work! Glad to see you got it finished.
I noticed the images in the gallery 1 don't quite line up modal - it looks like they are sticking out of the edges - is that part of the design?
the Monday 14 April 2008 at 03:21:17 AM
#2 by pierre
Awesome job !!!
Je sais pas si je vais arriver à l'utiliser sur mon site, mais je vais essayer !!!
Merci bien.
the Monday 14 April 2008 at 02:08:00 PM
#3 by Nyro
Thanks Patrick!
We finally fixed this bug.
I released the version 1.1.1 to fix this bug.
the Tuesday 15 April 2008 at 05:43:42 AM
#4 by jarro
Nice job, trying it on a site and so far works great.
the Wednesday 16 April 2008 at 07:42:34 AM
#5 by Leo
Nice, thanx! But in IE6 (...) window centered on height of ALL page's content, instead browser window..
the Wednesday 16 April 2008 at 04:26:51 PM
#6 by Nyro
Hi Leo,
I can't reproduce the bug you mentioned.
I tested in different computer in IE6 and it should works.
Can you send a screenshot or a link please?
the Wednesday 16 April 2008 at 05:49:15 PM
#7 by Leo
Hello!
screens:
www.picamatic.com/view/14...
www.picamatic.com/view/14...
www.picamatic.com/view/14...
In code we use xAJAX. May be xAJAX.... deprave this?
the Thursday 17 April 2008 at 09:52:33 AM
#8 by Nyro
Leo, can you contact me directly with the contact form or let your email here.
It could be great if you can send me the files or put them online to test directly.
The scrollbars are hidden in IE6 because of the missing "position: fixed;" ability of this browser.
If you see the example in the nyroModal page, it should works great.
Maybe something happen with your CSS or you customized something about the animation with a wrong parameter or something like that.
btw, I can't tell you what's wrong if I can't read all the code (CSS, HTML and Javascript)
the Thursday 17 April 2008 at 10:57:58 PM
#9 by Ozh
Cool stuff. I've added it to my lightbo clones comparison matrix.
the Friday 18 April 2008 at 08:21:49 AM
#10 by Leo
Dear Nyro! ;)
I resolve my trouble: parameter "position: relative;" in style description for "body" tag in my CSS file :\
And I found small bug in my DNA... ;)
I dig your scripts - I like this clean & correct code ;) Great work!
Thanks for your nice work. Best wishes!
the Friday 18 April 2008 at 03:26:16 PM
#11 by Nyro
Great, thanks for the information.
I will add some code in the next version to force the position: absolute; for the body if it's IE6.
the Friday 18 April 2008 at 05:52:52 PM
#12 by Leo
Nyro! I'm sorry.. ) "position: absolute" - this need be deleted ;)
the Friday 18 April 2008 at 09:01:49 PM
#13 by Nyro
Leo, I fixed the bug you found in the version 1.2.0
the Saturday 19 April 2008 at 08:40:30 PM
#14 by Leo
Great, Nyro! Now it's fine! Thanks for your work!
p.s. I made small changes for our site (remove animations - on various PCs this show is very slow).
I suggest: include this feature (animation on/off) in script ;)
the Monday 21 April 2008 at 09:41:36 PM
#15 by Nyro
You can remove the animation by simply rewriting the animations functions and made simply the show and hide when necessary.
I'll see if I implement this feature, as you can already do it right now.
I know it's painful, but I'm sure it won't be very useful.
the Monday 21 April 2008 at 09:56:26 PM
#16 by Nyro
Leo, I rewrote all the animation function to animating nothing.
This file will be included in the next release —no need a new release as you're the only person who requested that.
You can find it here: jquery.nyroModal-noAnim.js
Basically, include this file just after nyroModal and it will be fine.
I think it's the best way to do that: no more code in the nyroModal core and you get the result expected.
The good thing with this method: you can still rewrite again the animation function elsewhere if needed.
the Tuesday 22 April 2008 at 06:39:02 AM
#17 by Leo
Cool! Thanks, Nyro!
the Wednesday 23 April 2008 at 10:57:25 AM
#18 by FSan
Hi
In gallery mode the caption is not written. I don't know why. How does this work? I'm using the script pretty much as it is out-of-the-box... Please help
Tanks for the great script. IMO the best of its kind so far
the Sunday 11 May 2008 at 04:45:40 AM
#19 by Nyro
Hi FSan,
Can you send a link where I can see your bogus page?
the Sunday 11 May 2008 at 04:55:35 AM
#20 by FSan
Thanks for the quick response
Sorry
It's all local. What I can tell you is that I compared the source of your example with mine and the div that contains the caption is just not written. The only difference with your example is that I don't have the id attr in the first link. Is that necessary?
the Sunday 11 May 2008 at 05:04:00 AM
#21 by Nyro
Please fill a bug here: code.google.com/p/nyromod... and attach a zip with your HTML for testing.
Or shoot me an email through the contact page.
the Sunday 11 May 2008 at 05:07:29 AM
#22 by FSan
could it be that some of the title tags are empty?
the Sunday 11 May 2008 at 05:09:13 AM
#23 by Nyro
ahah, for sure. The caption for the image is extracted from the title attribute from the link.
What did you except? Maybe I can change the way it works in the next version.
the Sunday 11 May 2008 at 05:14:30 AM
#24 by FSan
Sorry
My mistake. It works now
Thanks
the Sunday 11 May 2008 at 05:18:09 AM
#25 by Andy
Thanks for a great library.
the Saturday 03 January 2009 at 02:02:34 PM
#26 by noelbon70
Is the documentation only what is on the demo page? I'm looking to make a modal window pop up as soon as the user lands on the page, but can't figure out from the documentation on the demo page how to do that? Where is the right place to get a touch of help? Thanks!
the Friday 23 January 2009 at 07:25:39 PM
#27 by DJH
Hi,
Great work!!
I am not very proficient with js, could you tell me how to disable animations on the modal on open.
Thanks,
the Thursday 26 February 2009 at 08:39:50 PM
#28 by done
undocumented project, great.
how am i supposed to find all methods and their parameters? by examining js code line by line?
no thx.
the Thursday 18 June 2009 at 12:39:40 AM
#29 by Nyro
The whole documentation is on the plugin page : nyromodal.nyrodev.com
Every paremeters is documented, every callback is explained.
If you don't want to try to read it or to undesrtand it, this plugin isn't designed for you.
the Thursday 18 June 2009 at 09:21:54 AM
#30 by Chandro
hey guys Thanks a lot for this script! just a question, is there a way to remove the tooltip showing when you hover to the images?
im so glad i found this script :)
the Saturday 20 June 2009 at 06:02:10 AM
#31 by gosone
Awesome!
Don't write the submit element to [formIndicator: 'nyroModal'], if the form have multiple submits.
the Tuesday 07 July 2009 at 01:51:34 AM
#32 by gosone
or Can you updata the [formIndicator: 'nyroModal'] to a variable?
the Tuesday 07 July 2009 at 01:56:12 AM
#33 by Terry
In the downloaded zip file of nyroModal-1.5.1 there is a demo.php. There is no index.html or demo.html file. The demo.php file does not function as the demo on your online website functions when it is opened. The links in it do not work. How can I test nyroModal with no functional demo.html file to work with? Is there something I am doing wrong here or do not understand?
the Tuesday 11 August 2009 at 09:37:08 PM
#34 by Terry
Please disregard the post #33 immediately above by me. I figured it out :)
the Wednesday 12 August 2009 at 11:09:14 AM
#35 by chard
been trying to change the background color (overlay) for hours still cant make it to work, need help!
the Thursday 20 August 2009 at 03:07:58 AM
#36 by Manuel Graf
Great job. I love nyroModal ;)
It's just the most customizable modalbox i know for js and most of the things work like they are expected to work. It's lacking beauty, but thats not that matter.
You did great on this one.
the Wednesday 24 February 2010 at 09:58:03 AM
Add a comment.