Solved

Hover over images from a recordset and enlarge them

Posted on 2014-02-08
5
370 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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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.

695 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