Solved

Hover over images from a recordset and enlarge them

Posted on 2014-02-08
5
369 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
In a previously published article (http://www.experts-exchange.com/articles/10331/Automatic-Duplex-Scanning-in-PaperPort-Versions-11-12-14.html) here at Experts Exchange, I explained how to achieve duplex (double-sided) scanning in Nuance's PaperPor…
The goal of the tutorial is to teach the user what exposure is and how to use the exposure slider. Analyze the photo that you want to edit, then adjust the exposure slider to your liking.
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…

734 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