[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Hover over images from a recordset and enlarge them

Posted on 2014-02-08
5
Medium Priority
?
384 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 1500 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article shows how to convert a multi-page PDF file into multiple image files, with one image file created for each page of the PDF. It does this by utilizing an excellent, free software package called GraphicsMagick. The solution is amazingly s…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month20 days, 2 hours left to enroll

873 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