Link to home
Create AccountLog in
Avatar of kwikstix
kwikstixFlag for United States of America

asked on

Click image thumbnail to have it display in a named DIV using AJAX

I am using jCarousel to display a group of image thumbnails in the sidebar of a web page.  The way I want it to work is that when you click on a thumbnail, the image is displayed in a named DIV on another part of the page.  I want this to happen without the entire page having to reload.  It seems so simple, but I cannot figure out how to do it!
<div id="mainframe">
	<div id="imagePane">
		<img src="/pictures/image1.jpg">
<div id="sideframe">
	<ul id="mycarousel" class="jcarousel-skin-tango">
		<li><a href="#" onclick="getdata('/pictures/image1.jpg','imagePane');"><img src="/pictures/image1_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image2.jpg','imagePane');"><img src="/pictures/image2_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image3.jpg','imagePane');"><img src="/pictures/image3_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image4.jpg','imagePane');"><img src="/pictures/image4_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image5.jpg','imagePane');"><img src="/pictures/image5_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image6.jpg','imagePane');"><img src="/pictures/image6_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image7.jpg','imagePane');"><img src="/pictures/image7_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image8.jpg','imagePane');"><img src="/pictures/image8_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image9.jpg','imagePane');"><img src="/pictures/image9_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image10.jpg','imagePane');"><img src="/pictures/image10_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image11.jpg','imagePane');"><img src="/pictures/image11_sm.jpg"></a></li>
		<li><a href="#" onclick="getdata('/pictures/image12.jpg','imagePane');"><img src="/pictures/image12_sm.jpg"></a></li>

Open in new window

Avatar of kwikstix
Flag of United States of America image


Increasing the point value to 300.  I've spent a lot of time searching for examples or downloadable script "widgets" that will accomplish this, but I've been unsuccessful.  If anyone knows of any existing code that will accomplish this, please let me know.  I would also be open to a completely new solution.  My requirements are:
- Vertically oriented thumbnails
- Full size image display on same page as thumbnail, in a defined DIV (not using lightbox or similar)
- Use of AJAX or similar technology so the full page doesn't have to reload when new images are selected
Avatar of Pieter Marais
Pieter Marais
Flag of South Africa image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Excellent - that's exactly what I needed!  Thanks!