Solved

Hover over images from a recordset and enlarge them

Posted on 2014-02-08
5
361 Views
Last Modified: 2014-02-13
I have a web site that currently works well and pulls records from an Access database.  The database contains pointers to images in two folders named Thumb and Large that are housed on a server.  I currently have the thumbnail page set up to display thumbnail images pulled using a query and corresponding recordset.  When a thumbnail is clicked, it opens another page that runs a query, creating a recordset that makes the full size image available to the page, which then displays it.

My boss wants to upgrade the website so that all the user has to do is hover over a thumbnail image to show the corresponding enlarged image.  Is there a way to do this using VBScript in an ASP page?  I have seen some suggestions for doing this, but with only static images housed in the Images folder under the root website.  I need my pages to pull the images from a recordset.  

Thanks!
0
Comment
Question by:shanej
  • 3
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39844736
You would need to use javascript and it wouldn't be normal to do this on hover but on click
If you can use jQuery, which would be the common way, then take a look here or there are several jQuery lightbox plugins available
0
 

Author Comment

by:shanej
ID: 39844927
If I already have working queries and recordsets, it would seem that I would be able to use VBScript to process the results. Are you saying this is not the case?

Thanks for your help!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39845352
Is this for an intranet or for the web?
If for an intranet only on IE then there maybe a way with VBScript
If for the internet you need to use javascript, doesn't matter that you have the image paths in a recordset, all you are doing is setting the src of the images.
In the link I posted is that what you are wanting, or still wanting to open in a new page?
0
 

Author Comment

by:shanej
ID: 39845842
Thanks, Cathal.  For now, it's for an intranet.  

My boss is really hung up on using hover and have the image enlarge on the same page.  

What I have is two rows of five thumbnails.  The thumbs are about 3k in size.  The corresponding enlarged photos are about 35k in size.  He would like to see the photo enlarge somewhere on the page in such a way as to not block any of the other thumbs when hovering over a given thumbnail.

Right now, my problem is I don't understand how the recordsets are stored on the page.  I have created a couple of variables "rsThumb" and "rsLarge," and set the output of each of the queries to them.  So, what I am doing is running a query for the thumbnail photos needed, and assigning rsThumb to that.  Then I am immediately running another query for the large photos and assigning rsLarge to that.  Then I am trying to point the src to each of those variables.  That isn't working.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39845915
http://jsfiddle.net/pDAst/19/

Set the img src to the thumbnail and set the data-large attribute to the large image source from your recordset values.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article was inspired by a question here at Experts Exchange (http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/Q_28629170.html). The requirements stated in that question are (1) reduce the file size of a large number of…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The goal of the tutorial is to teach the user how to make his/her own presets while editing so it is easier to edit there photos. Create a preset you like and copy that setting then save it in to your presets folder.
The goal of the tutorial is to teach the user how to use import presets downloaded from the internet into Adobe Lightroom. Once you downloaded the presets go into the preset folder and press import then import your preset and your set it to go.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now