Solved

How to create a thumbnail to display a larger version image and visa versa?

Posted on 2014-03-13
5
191 Views
Last Modified: 2014-03-16
I want to create a thumbnail that uses a link to display a larger version of the image and than a link to display the thumbnail again. I can create the thumbnail to display the larger image, but not visa versa. How do I go about doing that?
0
Comment
Question by:Barbara69
  • 2
  • 2
5 Comments
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39928533
Why not just use a lightbox library - which does exactly that?
0
 

Author Comment

by:Barbara69
ID: 39930412
I checked out lightbox, but it doesn't toggle the images. I want to be able to toggle between the thumbnail image and the larger image.
0
 
LVL 38

Expert Comment

by:BillDL
ID: 39930974
Lightbox creates an "overlay" on top of the page into which the image is loaded.  If it is loaded full screen you can set the transparency so that it either completely obscures the page below or allows you still to see some of it, and there should be an "X" somewhere in the white frame around the image to close the overlay and revert back to the page with the thumbnail.  You can also configure it to just load the overlay at a nominated size on top of the page, with the "X" button to close it and revert to the page.  Some stylings of this effect don't have the intuitive "X" and rely on you discovering that if you click the image anywhere it closes the overlay.

You could configure a lightbox "slideshow" containing only two images, the thumbnail and the main image, and the back and forward arrows could be used to "toggle" the views.

Isn't your thumbnail image part of a page that contains other content?

If the main image was loaded in the same page using a standard hyperlink on the thumbnail, the browser's back and forward buttons would "toggle" between the page with the thumbnail and the main image on its own.

There are some fancy CSS effects that allow you to mouseover areas on a page and it shows a popover effect.  Maybe that's what you're looking for?

Simply toggling between a thumbnail and large image doesn't really make any sense to me.  Could you explain a little more about your actual objective so we can perhaps advise the most appropriate method to suit your needs.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39931130
Can you post what you have done already - I am not sure I understand the difference between what you want to do and what a lightbox does?
0
 
LVL 38

Expert Comment

by:BillDL
ID: 39932297
Hi Barbara
I'm curious to know what changed.  You said that LightBox didn't do what you wanted, but you selected the suggestion as your solution.  It's always helpful for us to get some feedback.
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 discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

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