Solved

Hover over images from a recordset and enlarge them

Posted on 2014-02-08
5
358 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
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…
The goal of the tutorial is to teach the user how to use the cropping tool and to straighten there photos so it does not look tilted. You will choose which photo you want to edit, crop it to you liking and make it straight.
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…

762 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

11 Experts available now in Live!

Get 1:1 Help Now