1 reply to this topic

[trs21219]

ok,

i have a news system in which i want the client to be able to pick a picture from the image gallery for each article andit will be displayed on the right of the article. i know how to display it on the article and everything but what i want is when the client selects the image from the drop down menu( in the administrative panel) it will automatically load the picture so they can see what the picture is before creating the article.

my database structure for the gallery is as below:

table: gallery_images

name: title

url of image: thumb_url

if someone could help me do this in something like ajax or javascript it would be very helpful to me. or if you could point me to a tutorial that could help me!

thanks alot.

[Demonslay]

You really don't need AJAX for this at all.

I assume you are using a select menu. Simply add an extra, kind of 'dummy' attribute (that is still valid markup) to each option, and have JS grab that and use it as the URL to update the image with.

Assuming the ID of the image in the database is the value for the options.
Example.

<script type="text/javascript">
	var showPic = function(){
		pic_sel = document.getElementById('picture_select')
		document.getElementById('picture_preview').src = pic_sel[pic_sel.selectedIndex].title;
	}
</script>

<select name="picture" id="picture" onchange="showPic();">

<?php
// Connection assumed
$query = mysql_query('SELECT * FROM `gallery_images`') or die(mysql_error());

// Output each image as an option
while($row = mysql_fetch_array($query))
  echo "\n".'<option value="'.$row['id'].'" title="'.$row['thumb_url'].'">'.$row['title'].'</option>';
?>

</select>

<img id="picture_preview" src="blank.gif" alt="" />

Tested and works just fine.