[SOLVED] Changing a main image when a child in a tree view is clicked

[MDWeezer]

Good morning,

 

I have a very simple setup.  Header, left navigation bar which consists of a tree view and then a main content pane to hold a 640x480 image.

 

The tree view contains a variety of charts, so when someone clicks a chart in the tree view, that specific chart (which is 640x480) shows up in the center content pane.  Each image also has a 1024x768 counterpart as well and when the smaller image is clicked, the bigger image is shown using Lightbox.

 

The following is what I need in the content pane:

<a href="charts/chartlarge.png" rel="lightbox"><IMG src="charts/chart.png" /></a>

 

However, there will be a few dozen charts (all automatically generated in the background with Perl/java).

 

So for each chart I will have a link formatted like above so it's displayed and can be clicked for the larger view.  I would like the image to show up without re-loading the page (I could do simple AJAX calls with Prototype but there must be an easier way.)

 

Would there be a way in my tree view, that when a node is clicked, it can replace the content DIV on the fly with the code above but modified for the image it needs to show (all of which will be hardcoded).

 

Thanks

[fenway]

Well, depending on your page, you can preload all of the charts and have them all in hidden divs.

[nogray]

you can do something like this, just modify it to fit your needs

<script language="javascript">
function show_img(src, lrg_src){
	var txt = "<a href=\""+src+"\" rel=\"lightbox\"><IMG src=\""+lrg_src+"\" /></a>";
	document.getElementById('display_charts').innerHTML = txt;
}
</script>
<a href="#" onclick="show_img('img0_src', 'large0_img_src');">Image 0</a><br />
<a href="#" onclick="show_img('img1_src', 'large1_img_src');">Image 1</a><br />
<a href="#" onclick="show_img('img2_src', 'large2_img_src');">Image 2</a><br />
<a href="#" onclick="show_img('img3_src', 'large3_img_src');">Image 3</a><br />
<div id="display_charts">
The images will show here
</div>

[MDWeezer]

you can do something like this, just modify it to fit your needs

<script language="javascript">
function show_img(src, lrg_src){
	var txt = "<a href=\""+src+"\" rel=\"lightbox\"><IMG src=\""+lrg_src+"\" /></a>";
	document.getElementById('display_charts').innerHTML = txt;
}
</script>
<a href="#" onclick="show_img('img0_src', 'large0_img_src');">Image 0</a><br />
<a href="#" onclick="show_img('img1_src', 'large1_img_src');">Image 1</a><br />
<a href="#" onclick="show_img('img2_src', 'large2_img_src');">Image 2</a><br />
<a href="#" onclick="show_img('img3_src', 'large3_img_src');">Image 3</a><br />
<div id="display_charts">
The images will show here
</div>

 

Excellent!  Thank you very much, this is pretty much exactly how I wanted it (I'll be adding a lot of charts, make it much easier this way to handle).

[MDWeezer]

you can do something like this, just modify it to fit your needs

<script language="javascript">
function show_img(src, lrg_src){
	var txt = "<a href=\""+src+"\" rel=\"lightbox\"><IMG src=\""+lrg_src+"\" /></a>";
	document.getElementById('display_charts').innerHTML = txt;
}
</script>
<a href="#" onclick="show_img('img0_src', 'large0_img_src');">Image 0</a><br />
<a href="#" onclick="show_img('img1_src', 'large1_img_src');">Image 1</a><br />
<a href="#" onclick="show_img('img2_src', 'large2_img_src');">Image 2</a><br />
<a href="#" onclick="show_img('img3_src', 'large3_img_src');">Image 3</a><br />
<div id="display_charts">
The images will show here
</div>

 

Excellent!  Thank you very much, this is pretty much exactly how I wanted it (I'll be adding a lot of charts, make it much easier this way to handle).

 

So close!  This does what I need and places the image in the correct spot, however, the "rel=lightbox" tag inside the generate href statement doesn't get looked at.

 

I have the following includes:

<script src="lib/lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lib/lightbox/js/scriptaculous.js" type="text/javascript"></script>
<script src="lib/lightbox/js/effects.js" type="text/javascript"></script>
<script src="lib/lightbox/js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="lib/lightbox/css/lightbox.css">

 

But when I click the image from the generated code, it just opens the image in its own window.  Using the Javascript library it should pop up over the screen with a faded out background (it worked perfectly before).

 

I tried using eval() but I didn't have any luck.

 

Thanks!

[nogray]

hummmmm, this happens because the link is generated after the page is loaded (the lightbox script looks at links when the page loads). You'll need to assign the onclick event manully like this

 

<script language="javascript">
function show_img(src, lrg_src){
	var txt = "<a href=\""+src+"\" rel=\"lightbox\" id=\"light_box_link\"><IMG src=\""+lrg_src+"\" /></a>";
	document.getElementById('display_charts').innerHTML = txt;
	document.getElementById('light_box_link').onclick = function () {myLightbox.start(this); return false;}
}
</script>
<a href="#" onclick="show_img('img0_src', 'large0_img_src'); return false">Image 0</a><br />
<a href="#" onclick="show_img('img1_src', 'large1_img_src'); return false">Image 1</a><br />
<a href="#" onclick="show_img('img2_src', 'large2_img_src'); return false">Image 2</a><br />
<a href="#" onclick="show_img('img3_src', 'large3_img_src'); return false">Image 3</a><br />
<div id="display_charts">
The images will show here
</div>

 

P.S. I added a return false on the images list so the page doesn't jump up if you have too many links.