Hover over small image, increases image size

[hov333]

Re: Hover over small image, increases image size

hey mike, thanks for the reply. Yes i didnt realize my search had taken me into the web forum. If its not too much trouble could you attach the sample? I'm also curious as to whether I should use a small file for the icon and then a larger one for the pop-up enlarged image

Thanks!

[taj2000]

Re: Hover over small image, increases image size

Mike,
I too would greatly appreciate it if you could attach the database files/ code. It's a great effect to get inside of alpha five. I also want to know if you used two different size images(thumbnail and large image).

[WendyWelton]

Re: Hover over small image, increases image size

hello guys! this is a great thread and I was hoping to revisit this topic. I'm interesting in creating this hover effect for my desktop application, all I'm finding are discussions related to web apps. Is it possible to achieve this affect on a desktop app?

John,

Would it be possible for you to use a Grid on your desktop to get this effect? I'm running both web and desktop - sometimes putting a grid on a form is a nice solution.

[MikeC]

Re: Hover over small image, increases image size

I attached the sample. Remember, this sample was gleaned from the message board and was I think to show how to use an image reference field.

Use the Customer form. Check the OnFlyover and OnFlyoverLeave events of the ImageRef field. The xdialog used for the large image is a script called Large_Image. The xdialog was simply created with the genies and used an image as the background. Looking at the xbasic behind it (and using it instead of the action script), I just eliminated the buttons, caption bar and resized it.

I chose white as the background but any RGB color could be substituted along with the size of the xdialog. I used a shared variable xvimage which is set to the image reference field's value in the two Flyover events.

If you had all the same size images it would work best as then only the picture shows and no background color.

I would use just one high quality image for both the thumbnail and the large as you will see that I chose "Best Fit" for the image which will adjust the size accordingly.

The images that are currently referenced are on my computer so you will have to add your own image references to the browse records. Also remember that the browse that is in the sample is just what was there....you could just as easy have a gridwork of thumbnails on the form or whatever.

Any questions just ask....

I suggest opening this sample in its own folder so that it cannot possible mess up anything in a current database (such as overwriting perhaps a same name table!).

Large_Image.zip

[hov333]

Re: Hover over small image, increases image size

Awesome Mike. I see that you have Image reference as well as a JPEG image field, should I stick to using references only? I heard storing the actual JPEG can slow things down a bit when working with a lot of records.

What would be the largest file you recommend working with since you said to use just 1 high quality image for the thumbnail and the large? I tried referencing a 1MB file and the table became almost unusable.

I'm really new at xbasic, looking at your "largeimage" script i see:

'Create an XDialog dialog box to prompt for parameters.
DIM SHARED xvImage as C
dim XDialogStyle as p
XDialogStyle.AccentColor = ""
XDialogStyle.Color = "#255+255+255"
XdialogStyle.Image = xvImage
'XdialogStyle.Image = filename_absolute("C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Winter.jpg")
XdialogStyle.ImageAlign = "TL"
varC_result = ui_modeless_dlg_box("Large Image",<<%dlg%
{nocaption}
{Windowstyle=ImageBestFit}
{size=5,3.75}
%dlg%)


How could I modify this to point to my field name where the image is referenced? I tried using the customers form and referencing an image, that worked but the "onflyover" only opens a white filled window (no image).

Thanks!

[MikeC]

Re: Hover over small image, increases image size

Yeah, I have both fields there....this was an example for someone else a while back. The only thing I changed was adding the xdialog image container and the flyover event code for this scenario.

The only time I would actually store an image in a database is if there were not many....as you stated it can slow things down tremendously.

How large is all dependent on what you require....I would use a good enough quality one that shows well for the large image as the criteria. As it would be from an image reference field, the hard drive you store them on is the only limiting factor for the most part. I suppose a too high of quality image could take a bit longer to render, but again this is dependent upon your system's capabilities really.

[hov333]

Re: Hover over small image, increases image size

thats great info mike, i really appreciate it.

could you also tell me how I could modify the script to point to my field name where the image is referenced? I tried using your customers form and referencing an image. It successfully shows the image thumbnail but the "onflyover" only opens a white filled window (no image).

[MikeC]

Re: Hover over small image, increases image size

on the OnFlyOver event you set the same shared variable that is in the xdialog to equal your field. The OnFlyOverLeave event you set the variable to equal "" (blank).

[rderksen]

Re: Hover over small image, increases image size

Hi Tony,

Pete Conway put together a video showing some out of the box thinking with graphics showing thumbnails with hover showing full size. You may want to have a look at his video, it's informative and as always Pete tries to use the power of Alpha grids without resorting to extensive programming.

If I link this right, check out Post#21

http://msgboard.alphasoftware.com/al...l=1#post578512

Richard