Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

Hover over small image, increases image size

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Hover over small image, increases image size

    Is there a way to "on hover over with mouse" over a small image (175px x 220px)to open a larger image (full screen)?

    I have four small images in the detail grid (all in one row) and am wanting a nice way to see a larger picture

    Thanks
    Tony

    #2
    Re: Hover over small image, increases image size

    Stephane Caron has created a sweet jquery image browser at:

    http://www.no-margin-for-errors.com/...ightbox-clone/

    I have used it in a number of different places.

    Comment


      #3
      Re: Hover over small image, increases image size

      Thanks for the reply Kyle, but I was hoping for something within Alpha.
      Thanks again
      Tony

      Comment


        #4
        Re: Hover over small image, increases image size

        Tony,

        Look at this: http://msgboard.alphasoftware.com/al...32&postcount=7
        Frank

        Tell me and I'll forget; show me and I may remember; involve me and I'll understand

        Comment


          #5
          Re: Hover over small image, increases image size

          Frank,

          Thanks for that example I plan to use that in one of my grids. Could you do the same thing in the fields javascript OnMouseOver event? It would keep it from firing as you move through other fields in the row.
          Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

          Comment


            #6
            Re: Hover over small image, increases image size

            Yep! Add inline javascript and use exactly the same javascript code.
            Frank

            Tell me and I'll forget; show me and I may remember; involve me and I'll understand

            Comment


              #7
              Re: Hover over small image, increases image size

              Frank.....this is great, but I can't seem to get it to work. Does it matter where the files are located?

              I am using a mqsql back end and uploading the files/images to disk with a file reference. I can see them in the grid after upload, but the hover is not working.

              Any suggestions?

              Comment


                #8
                Re: Hover over small image, increases image size

                Hi Frank,
                Very nice! Thank you. I'm brand new to Alpha - - not much of a clue, yet. I found your screencast extremely easy to follow. Now I have to figure out how to "not show" the infamous red x when a record doesn't have an image. It'll probably hit me soon. Thanks again.

                Comment


                  #9
                  Re: Hover over small image, increases image size

                  Tony did you use Frank's solution?
                  Insanity: doing the same thing over and over again and expecting different results.
                  Albert Einstein, (attributed)
                  US (German-born) physicist (1879 - 1955)

                  Comment


                    #10
                    Re: Hover over small image, increases image size

                    Peter
                    I have not tried this for two reasons.....

                    1) in my application I would need the larger image to pop up on top of the grid (not to the side, top, or bottom) .... not sure if that is do-able and

                    2) I'm pretty satisfied with the way the pictures are working at this time, but may look to add this feature at a later date.

                    Thanks
                    Tony

                    Comment


                      #11
                      Re: Hover over small image, increases image size

                      Sorry, I've been out of the loop for a big while. Getting back in now. Will see if I can spend some time on it next few days.
                      Frank

                      Tell me and I'll forget; show me and I may remember; involve me and I'll understand

                      Comment


                        #12
                        Re: Hover over small image, increases image size

                        Ok
                        I found something that works in html
                        You CAN move the image around a bit

                        Code:
                        <HTML>
                         <HEAD>
                          <TITLE>Untitled</TITLE>
                          <style type="text/css">
                        .thumbnail{
                        position: relative;
                        z-index: 0;
                        }
                        .thumbnail:hover{
                        background-color: transparent;
                        z-index: 50;
                        }
                        .thumbnail span{ /*CSS for enlarged image*/
                        position: absolute;
                        background-color: lightyellow;
                        padding: 5px;
                        left: -1000px;
                        border: 5px solid tan;
                        visibility: hidden;
                        color: black;
                        text-decoration: none;
                        }
                        .thumbnail span img{ /*CSS for enlarged image*/
                        border-width: 0;
                        padding: 2px;
                        }
                        .thumbnail:hover span{ /*CSS for enlarged image on hover*/
                        visibility: visible;
                        top: 0;
                        left: 120px; /*position where enlarged image should offset horizontally */
                        }
                        </style>
                         </HEAD>
                        ----------------------------------------------------------------
                        [COLOR=darkgreen]In the body[/COLOR]
                         <BODY BACKGROUND="images/bkground.gif" BGCOLOR="WHITE" TEXT="BLACK" LINK="#00007F">
                          <P>
                           <TABLE WIDTH="620" CELLPADDING="2" CELLSPACING="0" BORDER="0">
                            <TR>
                             <TD WIDTH="170" VALIGN=TOP><!-- $MVD$:pgfblock("controls.htm","4d4c8c9f") -->
                              <P>
                               <A HREF="index.htm"><IMG SRC="images/homepg.gif" ALIGN=BOTTOM WIDTH="165" HEIGHT="40" VSPACE="0" HSPACE="0" BORDER="0" LOOP="0"></A></P>
                              <P>
                               <A HREF="photos.htm"><IMG SRC="[COLOR=navy]images/photos.gif[/COLOR]" ALIGN=BOTTOM WIDTH="165" HEIGHT="40" VSPACE="0" HSPACE="0" BORDER="0" LOOP="0"></A></P>
                              <P>
                               <!-- $MVD$:spaceretainer() -->&nbsp;</P>
                              <P>
                               <!-- $MVD$:spaceretainer() -->&nbsp;</P>
                              <!-- $MVD$:pgfblock() -->
                              <P>
                               <!-- $MVD$:spaceretainer() -->&nbsp;</TD>
                             <TD WIDTH="452" VALIGN=TOP>
                              <P>
                        <a class="thumbnail" href="#thumb"><img src="[COLOR=navy]photos/tdsc00903.j[/COLOR]pg" width="100px" height="66px" border="0" /><span><img src="[COLOR=navy]photos/dsc00903.jpg[/COLOR]" width="500px" height="330px" /><br />My dog</span></a>
                        <P>
                        <a class="thumbnail" href="#thumb"><img src="[COLOR=navy]items/DSC01396.GIF[/COLOR]" width="100px" height="66px" border="0" /><span><img src="[COLOR=navy]items/DSC01396.GIF[/COLOR]" width="500px" height="330px" /><br />[COLOR=darkred]something[/COLOR]</span></a><br />
                        </P>
                            </TR>
                            <TR>
                             <TD WIDTH="170" VALIGN=TOP></TD>
                             <TD WIDTH="452" VALIGN=TOP></TD>
                            </TR>
                           </TABLE>
                         </BODY>
                        </HTML>
                        I played with this and used 2 images in 2 sizes. image 1 has a small and large version as does image 2.

                        You can set the size in the "header" part of this and the location relative to the thumbnail.

                        It should work with what you want.

                        You can just use one image if you wish as long as it is ok with your larger image box.
                        You can also change or remove the frame.
                        Dave Mason
                        [email protected]
                        Skype is dave.mason46

                        Comment


                          #13
                          Re: Hover over small image, increases image size

                          Here is a new one and claimed to be ajax friendly:
                          found at http://www.dynamicdrive.com/dynamici...pandoimage.htm
                          in header

                          <style type="text/css">
                          img.expando{ /*sample CSS for expando images. Not required but recommended*/
                          border: none;
                          vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
                          }
                          </style>
                          <script type="text/javascript" src="expando.js">
                          /* Expando Image Script �2008 John Davenport Scheuer
                          as first seen in http://www.dynamicdrive.com/forums/
                          username: jscheuer1 - This Notice Must Remain for Legal Use
                          */
                          </script>
                          **and in body**
                          <p>
                          <img class="expando" border="0" src="amster2.jpg" width="100" height="75">
                          <img class="expando vacation" border="0" src="amster3.jpg" width="100" height="66">
                          <img class="expando" border="0" src="amster4.jpg" width="100" height="75">
                          </p>

                          <p>
                          <img class="expando cat" border="0" src="cat.png" width="200" height="88">
                          </p>

                          *** you have to download the javascript ""expando.js""***
                          Happy days
                          Dave Mason
                          [email protected]
                          Skype is dave.mason46

                          Comment


                            #14
                            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?

                            Comment


                              #15
                              Re: Hover over small image, increases image size

                              Although your post should be asked in a desktop forum, it shouldn't detract too much from this thread's intent.

                              Take a look at the video in the attached zip file. I will attach a sample to be examined if it is what you want.


                              Large_Image.zip
                              Mike
                              __________________________________________
                              It is only when we forget all our learning that we begin to know.
                              It's not what you look at that matters, it's what you see.
                              Henry David Thoreau
                              __________________________________________



                              Comment

                              Working...
                              X