My favorites | Sign in
Project Home Downloads Issues
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 22: Image resizing is not always good
2 people starred this issue and may be notified of changes. Back to list
Status:  Fixed
Owner:  ----
Closed:  Jun 2008


 
Reported by rvmaga...@gmail.com, Jun 2, 2008
I have a request about the way nyroModal deals with images. When the image
is larger than the viewport, nyroModal automatically resizes it so no
scrollbars are created. This may be ok when the image is a photo, but if
the image has some text (a huge organogram, for example), the resized image
is not good at all because the result is a "pixelated" image.

So I'm requesting that an extra option is added for images: it would be
nice if the user could choose if the image is to be resized or not.

I think it makes a lot of sense, let me know what you think :)


 
Jun 2, 2008
Project Member #1 nyro...@gmail.com
That make sense, but we can't do that.
The reason is simple: the nyroModal is centered in the view port by using a position:
fixed.
Which means, by showing the image in real dimension, it will be impossible for the
user to scroll the window to see the others area of the image.

Otherwise, maybe I can add a optionnal parameter to add a link somewhere "see this
image in fullscreen". This link will be shonw only if there was a resizing and only
if the option was set to true.

This link will simply open the image in the browser. An other option will be
available to set the target=_blank to this link.

What do you think?
Status: Accepted
Labels: -Type-Defect Type-Enhancement
Jun 3, 2008
#2 rvmaga...@gmail.com
But in your demo site, for example, the "Youtube Via Process Handler" creates
scrollbars (both horizontal and vertical). Isn't that the same case as a big image?

I'll try to disable the image resizing in your plugin to see if I can help in
something, but I'm not a "real" programmer, I'm just curious :)
Jun 3, 2008
#3 rvmaga...@gmail.com
OK, I removed the image resize code (765 to 787), not it's almost working as I
expected. But:

- Probably will have to move the "title" DIV to TOP in these cases, it doesn't work
as expected if the DIV stays on bottom because when the user scrolls vertically the
DIV stays in the middle of the image. Also, the title DIV must be about 15px shorter
in this case, because of the scrollbar. Right now I'm having trouble detecting IF the
image fits the viewport or not; I need this to apply this special treatment to these
images.

- Strangely the horizontal scrollbar is not working properly in Firefox. If I "DRAG"
the scroll, it doesn't work properly (it goes suddenly to left of right, it's not
smooth). But if I "CLICK" the scroll arrows, it works ok. This only happens in
Firefox, IE works ok.

I don't know if I made myself clear, probably not :P
Jun 3, 2008
Project Member #4 nyro...@gmail.com
You just pointed out a bug about the youtube scrollbars.
I just released a new version to fix it.

Regarding your bug :
- to change the position of the title div, just play with the CSS and the
div.wrapperImg div#nyroModalContent div rule. You'll be able to place it wherever you
want
- for the scrollbar and everything else you said, I'm not sure to understand exactly
what you mean. If you can send a link, some files or a screenshot, it would help to
understand.
Jun 3, 2008
#5 feed...@gmail.com
OK, I'll try to modify the plugin myself to suit my needs :)

Oh, I think you made a mistake in your site (http://nyromodal.nyrodev.com/), because
the left menu is not working anymore. The content does not scroll as it used to do.
And I can see an extra ">" character on in the beginning of the site, maybe you left
a tag opened or something :)

One last thing, I want to to modify the default animation when opening a single
image. I want the "loading container" to morph into the actual image, similar to what
happens when you switch to the next image in the "gallery mode" (the container
resizes from the last size to the new one). I want to do that with the loading
container when opening a single image, but I can't seem to do it.

Sorry to use this space to ask this other question which does not have anything to do
with the topic.
Jun 4, 2008
Project Member #6 nyro...@gmail.com
Actually to disable the resizing, you can set the settings resizable to false.
I added it to the documentation yesterday, my bad...

Thanks for the bug report on the homepage, I fixed it.

To do your animation, here is the 2 animation callback rewritten:
$.fn.nyroModal.settings.hideLoading = function(elts, settings, callback) {
	callback();
}

$.fn.nyroModal.settings.showContent = function (elts, settings, callback) {
	elts.loading.animate({
		width: settings.width+'px',
		height: settings.height+'px',
		marginTop: (settings.marginTop)+'px',
		marginLeft: (settings.marginLeft)+'px'
	}, {duration: 350, complete: function() {
		elts.contentWrapper
			.css({
				width: settings.width+'px',
				height: settings.height+'px',
				marginTop: (settings.marginTop)+'px',
				marginLeft: (settings.marginLeft)+'px'
			})
			.show();
			elts.loading.fadeOut(200, callback);
		}
	});
};
Jun 6, 2008
Project Member #7 nyro...@gmail.com
I'm thinking if this type of animation could be better or not.
I created the animation function callback to make the showContent and hideContent
animation like you requested.

And I like the way it looks!

I will ask around me which animation they prefer, and if it's going good, it will be
the default animation.

Then I'm thinking a way to share our animation. Maybe we'll use the wiki feature
here, in the google page.

Any thoughts?
Jun 7, 2008
#8 rvmaga...@gmail.com
I'll answer this next Moday, because I need to do some tests and my files are not
here with me, ok? But I think this type of animation is better than the default!
Jun 13, 2008
Project Member #9 nyro...@gmail.com
I released the version 1.2.7 which use new animation function like the transition.
Status: Fixed

Powered by Google Project Hosting