hover over thumbnail for preview

john2011

Joined: 2012-05-18
Posts: 5

Posted: Fri, 2012-05-18 08:34

I just upgraded gallery 2 to the latest gallery 3, but found I can't hover mouse over the thumbnails and get pop up preview any more. How can I get that in gallery 3? I tried wind and grey dragon, but neither of them appear to offer this feature, and can't find a module for that. Thanks for your help!

suprsidr

Joined: 2005-04-17
Posts: 7892

Posted: Fri, 2012-05-18 12:25

the problem is that there is no reference to the larger image size in the thumbnail's link. It links to a page where the larger resize is viewed.
Unless you are using the lightbox option which some themes offer.
Then it would only be the matter of adding the proper javascript to the page.

-s

jnash

Joined: 2004-08-02
Posts: 607

Posted: Fri, 2012-05-18 12:51

is there a method of accessing the full size (original) image anywhere?

floridave

Joined: 2003-12-22
Posts: 25961

Posted: Fri, 2012-05-18 17:07

if you know the item_id you should be able to get the full sized image.
I think what would be better is some image tooltip with the resized image.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

john2011

Joined: 2012-05-18
Posts: 5

Posted: Fri, 2012-05-18 17:10

Getty images, shutterstock etc all offer preview when hovering over thumbnails. Providing such function would greatly improve gallery. We are seriously consider other options due to lack of this common feature.

Which gallery 3 theme has lightbox option? The grey dragon only offers colorbox etc.

suprsidr

Joined: 2005-04-17
Posts: 7892

Posted: Fri, 2012-05-18 17:14

Quote:

We are seriously consider other options due to lack of this common feature

No better way to piss developers off.
Common feature? On sites selling images maybe, not on any project I've developed for.
Go for it, find that "better" free gallery.

-s

john2011

Joined: 2012-05-18
Posts: 5

Posted: Fri, 2012-05-18 17:42

I apologize if that offended you - but that's not what I meant since I'm just the sysadmin that have to satisfy the project leader's specifications. And I certainly appreciate this great product that served us very well.

floridave

Joined: 2003-12-22
Posts: 25961

Posted: Fri, 2012-05-18 22:17

This could be developed into a module.
Some issue I see with the development and the usability.
For the sake of argument I'm going to call them image tooltips.

Should the tooltip be the full sized image? What if the image is larger than the screen resolution?
Should the tooltip contain other info like title and description? Placement? Left, right, top bottom. How much of the description should show?
Should the tooltip always be to the right or left of the thumbnail? What if the thumb is on the edge of the page should the tooltip still show forcing the user to scroll to the left or right?
Should the tooltip contain the resized image? What if the image is larger than the available space?
Should the tooltip resize the image to fit a fixed size of tooltip? What size should it be?
Should there be a toolitp for movies? Does the tooltip play the movie or just has a larger distorted thumb?
Should there be some preloading of these larger images or can the tooltip wait for the image to be rendered after the mouseover?

You suggested 2 different sources and each one does it differently.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

john2011

Joined: 2012-05-18
Posts: 5

Posted: Sat, 2012-05-19 09:10

Thanks for your intruiging questions, indeed getty images and shutterstock behave differently. The following are the observations together with some conclusions I attempted to draw upon.

> Should the tooltip be the full sized image? What if the image is larger than the screen resolution?
getty images bound that tooltip within a box of 340x340.
shuttstock bound the tooltip within a box of 450x450.
==> So something in the order of 400x400 should be familiar to most people. It should usually be smaller than screen resolution.
If the user shrinks the browser to be smaller than that, then getty images and shutterblock both generate tooltip as usual without worrying that part of the tooltip is outside visible area.

> Should the tooltip contain other info like title and description? Placement? Left, right, top bottom. How much of the description should show?
getty images contains no title but description,
shutterstock contains no title no desciption.
==> so this probably doesn't matter much, no title nor description is fine, even though it won't hurt if the module wants to add title/description.

Placement, this can be a programming algorithm challenge.
getty images always put the tooltip right where the mouse is. The problem is, thus the tooltip would block multiple thumbnails, so when you move mouse to the next thumbnail, you won't see the corresponding tooltip. You have to move mouse far away to start over.
shutterstock tries very hard to put the tooltip just a few pixals beyond the current thumbnail, and it disappears as soon as the mouse is beyond that thumbnail. Therefore when you move mouse toward the next thumbnail, the tooltip will NEVER block other thumbnail before it disappears, so you ALWAYS get tooltip for the thumbnail under the mouse.
Also for shutterstock, when the thumbnail is in the left side of the page, the tooltip tends to be to the right of the thumbnail. When the thumbnail is on the right side of the page, the tooltip tends to be to the left of the thumbnail. When the thumbnail is on the upper side of the page, the tooltip tends to be to the bottom of the thumbnail. When the thumbnail is on the lower side of the page, the tooltip tends to be to the upper side of the thumbnail.
==> I believe shutterstock has a smarter way in terms of placement.

> Should the tooltip always be to the right or left of the thumbnail? What if the thumb is on the edge of the page should the tooltip still show forcing the user to scroll to the left or right?
==> see above. Also see the observation to the first question.

> Should the tooltip contain the resized image? What if the image is larger than the available space?
==> see observation to the first question. the tooltip is about 400x400, I'm not sure whether getty/shutterstock pre-generated the tooltip of generated them in real time.

> Should the tooltip resize the image to fit a fixed size of tooltip? What size should it be?
==> see observation to the first question.

> Should there be a toolitp for movies? Does the tooltip play the movie or just has a larger distorted thumb?
getty images doesn't provide tooltip for video. Instead when you hover mouse over the thumbnail of a video, it will play the video right in that thumbnail.
shutterstock does pop up a tooltip when hovering over video thumbnail, however nothing played but maybe that's just my computer's problem.
==> I don't know how to conclude this, maybe video tooltip can be implemented after the image tooltip?

> Should there be some preloading of these larger images or can the tooltip wait for the image to be rendered after the mouseover?
==> It doesn't look to me those tooltip images were preloaded, because I see little delay when loading the hundred thumbnails per page. But as mentioned above, not sure whether they pre-generated those tooltip images or generated in real time. I personally see it as a tradeoff between code complexity vs performance.

suprsidr

Joined: 2005-04-17
Posts: 7892

Posted: Tue, 2012-05-22 13:35

http://www.jacklmoore.com/zoom

-s

jnash

Joined: 2004-08-02
Posts: 607

Posted: Tue, 2012-05-22 13:49

I may begin to work on a module for this, but I'm not sure how to best approach the functionality / user experience.

Any ideas to offer?

floridave

Joined: 2003-12-22
Posts: 25961

Posted: Tue, 2012-05-22 15:09

One of the issues I have found is that when you mouse over a thumb the tooltip sometimes is out of the users view depending if the thumb is close to the edge of the screen or near the top or bottom.
The closest I have been able to come up with is:
http://jsfiddle.net/adaz/rz2vH/
&
http://jsfiddle.net/adaz/AvYXE/
One issue with it is when you mouse-over the thumb on the right, the tooltip covers the thumb, not expected behavior/behaviour.
Some discussion here:
http://stackoverflow.com/questions/9049182/make-css-hover-stay-within-viewport

Not as trivial as one might think given some of the UI requirements.

Dave

_____________________________________________
Blog & G2 || floridave - Gallery Team

jnash

Joined: 2004-08-02
Posts: 607

Posted: Tue, 2012-05-22 15:12

Well, this jquery code won't work anyways, the outdated jquery we use is causing it to go haywire... perhaps it's me, but it doesn't work, and really messes up the page layouts...

I ran in to this with a 'drag-n-drop' module I was working on too...

Scrapped for now...

john2011

Joined: 2012-05-18
Posts: 5

Posted: Thu, 2012-05-24 18:47

Actually, this demo page linked from the stackoverflow page above works perfect to me: http://aseptik.net/demo/make-css-hover-stay-within-viewport . Note it is aware of where the mouse is in the current *window*, not just where the mouse is in the current *webpage*. What I mean is, take a thumbnail on the left side and watch the tooltip appearing to its right. Then you drag the right edge of your browser window leftwards until that thumbnail is now on the right side of the window, now you move mouse over it again and watch the tooltip appearing to its left instead! Shutterstock also has this cool behavior. It's the best effort approach to make sure the tooltip is always inside the window.

I think that stackoverflow page has the source code.

jnash

Joined: 2004-08-02
Posts: 607

Posted: Thu, 2012-05-24 19:07

Requires an updated jquery (1.7) - puts us out of luck.

john2011 Joined: 2012-05-18 Posts: 5	Posted: Fri, 2012-05-18 08:34
	I just upgraded gallery 2 to the latest gallery 3, but found I can't hover mouse over the thumbnails and get pop up preview any more. How can I get that in gallery 3? I tried wind and grey dragon, but neither of them appear to offer this feature, and can't find a module for that. Thanks for your help!
	XUser login Username: * Password: * Create new account Request new password
suprsidr Joined: 2005-04-17 Posts: 7892	Posted: Fri, 2012-05-18 12:25
	the problem is that there is no reference to the larger image size in the thumbnail's link. It links to a page where the larger resize is viewed. Unless you are using the lightbox option which some themes offer. Then it would only be the matter of adding the proper javascript to the page. -s

jnash Joined: 2004-08-02 Posts: 607	Posted: Fri, 2012-05-18 12:51
	is there a method of accessing the full size (original) image anywhere?

floridave Joined: 2003-12-22 Posts: 25961	Posted: Fri, 2012-05-18 17:07
	if you know the item_id you should be able to get the full sized image. I think what would be better is some image tooltip with the resized image. Dave _____________________________________________ Blog & G2 \|\| floridave - Gallery Team

john2011 Joined: 2012-05-18 Posts: 5	Posted: Fri, 2012-05-18 17:10
	Getty images, shutterstock etc all offer preview when hovering over thumbnails. Providing such function would greatly improve gallery. We are seriously consider other options due to lack of this common feature. Which gallery 3 theme has lightbox option? The grey dragon only offers colorbox etc.

suprsidr Joined: 2005-04-17 Posts: 7892	Posted: Fri, 2012-05-18 17:14
	Quote: We are seriously consider other options due to lack of this common feature No better way to piss developers off. Common feature? On sites selling images maybe, not on any project I've developed for. Go for it, find that "better" free gallery. -s

john2011 Joined: 2012-05-18 Posts: 5	Posted: Fri, 2012-05-18 17:42
	I apologize if that offended you - but that's not what I meant since I'm just the sysadmin that have to satisfy the project leader's specifications. And I certainly appreciate this great product that served us very well.

floridave Joined: 2003-12-22 Posts: 25961	Posted: Fri, 2012-05-18 22:17
	This could be developed into a module. Some issue I see with the development and the usability. For the sake of argument I'm going to call them image tooltips. Should the tooltip be the full sized image? What if the image is larger than the screen resolution? Should the tooltip contain other info like title and description? Placement? Left, right, top bottom. How much of the description should show? Should the tooltip always be to the right or left of the thumbnail? What if the thumb is on the edge of the page should the tooltip still show forcing the user to scroll to the left or right? Should the tooltip contain the resized image? What if the image is larger than the available space? Should the tooltip resize the image to fit a fixed size of tooltip? What size should it be? Should there be a toolitp for movies? Does the tooltip play the movie or just has a larger distorted thumb? Should there be some preloading of these larger images or can the tooltip wait for the image to be rendered after the mouseover? You suggested 2 different sources and each one does it differently. Dave _____________________________________________ Blog & G2 \|\| floridave - Gallery Team

john2011 Joined: 2012-05-18 Posts: 5	Posted: Sat, 2012-05-19 09:10
	Thanks for your intruiging questions, indeed getty images and shutterstock behave differently. The following are the observations together with some conclusions I attempted to draw upon. > Should the tooltip be the full sized image? What if the image is larger than the screen resolution? getty images bound that tooltip within a box of 340x340. shuttstock bound the tooltip within a box of 450x450. ==> So something in the order of 400x400 should be familiar to most people. It should usually be smaller than screen resolution. If the user shrinks the browser to be smaller than that, then getty images and shutterblock both generate tooltip as usual without worrying that part of the tooltip is outside visible area. > Should the tooltip contain other info like title and description? Placement? Left, right, top bottom. How much of the description should show? getty images contains no title but description, shutterstock contains no title no desciption. ==> so this probably doesn't matter much, no title nor description is fine, even though it won't hurt if the module wants to add title/description. Placement, this can be a programming algorithm challenge. getty images always put the tooltip right where the mouse is. The problem is, thus the tooltip would block multiple thumbnails, so when you move mouse to the next thumbnail, you won't see the corresponding tooltip. You have to move mouse far away to start over. shutterstock tries very hard to put the tooltip just a few pixals beyond the current thumbnail, and it disappears as soon as the mouse is beyond that thumbnail. Therefore when you move mouse toward the next thumbnail, the tooltip will NEVER block other thumbnail before it disappears, so you ALWAYS get tooltip for the thumbnail under the mouse. Also for shutterstock, when the thumbnail is in the left side of the page, the tooltip tends to be to the right of the thumbnail. When the thumbnail is on the right side of the page, the tooltip tends to be to the left of the thumbnail. When the thumbnail is on the upper side of the page, the tooltip tends to be to the bottom of the thumbnail. When the thumbnail is on the lower side of the page, the tooltip tends to be to the upper side of the thumbnail. ==> I believe shutterstock has a smarter way in terms of placement. > Should the tooltip always be to the right or left of the thumbnail? What if the thumb is on the edge of the page should the tooltip still show forcing the user to scroll to the left or right? ==> see above. Also see the observation to the first question. > Should the tooltip contain the resized image? What if the image is larger than the available space? ==> see observation to the first question. the tooltip is about 400x400, I'm not sure whether getty/shutterstock pre-generated the tooltip of generated them in real time. > Should the tooltip resize the image to fit a fixed size of tooltip? What size should it be? ==> see observation to the first question. > Should there be a toolitp for movies? Does the tooltip play the movie or just has a larger distorted thumb? getty images doesn't provide tooltip for video. Instead when you hover mouse over the thumbnail of a video, it will play the video right in that thumbnail. shutterstock does pop up a tooltip when hovering over video thumbnail, however nothing played but maybe that's just my computer's problem. ==> I don't know how to conclude this, maybe video tooltip can be implemented after the image tooltip? > Should there be some preloading of these larger images or can the tooltip wait for the image to be rendered after the mouseover? ==> It doesn't look to me those tooltip images were preloaded, because I see little delay when loading the hundred thumbnails per page. But as mentioned above, not sure whether they pre-generated those tooltip images or generated in real time. I personally see it as a tradeoff between code complexity vs performance.

suprsidr Joined: 2005-04-17 Posts: 7892	Posted: Tue, 2012-05-22 13:35
	http://www.jacklmoore.com/zoom -s

jnash Joined: 2004-08-02 Posts: 607	Posted: Tue, 2012-05-22 13:49
	I may begin to work on a module for this, but I'm not sure how to best approach the functionality / user experience. Any ideas to offer?

floridave Joined: 2003-12-22 Posts: 25961	Posted: Tue, 2012-05-22 15:09
	One of the issues I have found is that when you mouse over a thumb the tooltip sometimes is out of the users view depending if the thumb is close to the edge of the screen or near the top or bottom. The closest I have been able to come up with is: http://jsfiddle.net/adaz/rz2vH/ & http://jsfiddle.net/adaz/AvYXE/ One issue with it is when you mouse-over the thumb on the right, the tooltip covers the thumb, not expected behavior/behaviour. Some discussion here: http://stackoverflow.com/questions/9049182/make-css-hover-stay-within-viewport Not as trivial as one might think given some of the UI requirements. Dave _____________________________________________ Blog & G2 \|\| floridave - Gallery Team

jnash Joined: 2004-08-02 Posts: 607	Posted: Tue, 2012-05-22 15:12
	Well, this jquery code won't work anyways, the outdated jquery we use is causing it to go haywire... perhaps it's me, but it doesn't work, and really messes up the page layouts... I ran in to this with a 'drag-n-drop' module I was working on too... Scrapped for now...

john2011 Joined: 2012-05-18 Posts: 5	Posted: Thu, 2012-05-24 18:47
	Actually, this demo page linked from the stackoverflow page above works perfect to me: http://aseptik.net/demo/make-css-hover-stay-within-viewport . Note it is aware of where the mouse is in the current window, not just where the mouse is in the current webpage. What I mean is, take a thumbnail on the left side and watch the tooltip appearing to its right. Then you drag the right edge of your browser window leftwards until that thumbnail is now on the right side of the window, now you move mouse over it again and watch the tooltip appearing to its left instead! Shutterstock also has this cool behavior. It's the best effort approach to make sure the tooltip is always inside the window. I think that stackoverflow page has the source code.

jnash Joined: 2004-08-02 Posts: 607	Posted: Thu, 2012-05-24 19:07
	Requires an updated jquery (1.7) - puts us out of luck.

hover over thumbnail for preview

XUser login