photo gallery

[arbitter]

Hi there,

 

I'm not quite the hero in javascript, I only know PHP and even that isn't magnificent. However, I managed to make a photogallery system with PHP and MySQL. Here's the code:

elseif(mysql_real_escape_string($_GET['fx'] == 'photos'))
	{
		if(!isset($_GET['sub']))
		{
			echo 'Kies een album!';
			echo "<br /><a href='http://localhost/chiro/index.php?fx=photos&album=chirokamp2010'>Chirokamp 2010</a>";
		}
		elseif(!isset($_GET['sub2']))
		{
			if(CleanMyDirtyData($_GET['sub']) == 'chirokamp2010'){$albumpubliek = 'Chirokamp 2010';}else{$ambumpubliek = CleanMyDirtyData($_GET['sub']);}
			echo "<div class='mainheader'>Album: $albumpubliek</div><br /><br />";
			$album = CleanMyDirtyData($_GET['sub']);
			mysql_select_db('db');
			$query = mysql_query("SELECT * FROM albums WHERE album='$album'");
			$i = 0;
			echo "<center><table border='1'><tr>";
			while($row = mysql_fetch_assoc($query))
			{
				if($i == 5 || $i == 10 || $i == 15 || $i == 20 || $i == 25){echo "</tr><tr>";}
				echo "<td>";
				echo "<a href='http://localhost/chiro/photos/" . $row['album'] . "/" . $row['photoid'] ."'>" . "<img width='120' src='http://localhost/chiro/fotos/$album/thumbs/" . $row['photoid'] . $row['type'] . "' alt='" . $row['explanation'] . "' style='opacity:0.7;filter:alpha(opacity=70)'
					onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100'
					onmouseout='this.style.opacity=0.7;this.filters.alpha.opacity=70' /></a>";
				echo "</td>";
				$i += 1 ;
			}
			echo "</table></center>";
		}
		else
		{
			mysql_select_db('dyfemtaw');
			if($_GET['sub'] == 'chirokamp2010'){$albumpubliek = 'Chirokamp 2010';}else{$ambumpubliek = $_GET['sub'];}
			echo "<div class='mainheader'>Album: $albumpubliek</div><br /><a href='http://localhost/chiro/photos/chirokamp2010'>Terug naar overzicht</a><br />";
			$photoid = CleanMyDirtyData($_GET['sub2']);
			$album = CleanMyDirtyData($_GET['sub']);
			$query = mysql_query("SELECT * FROM albums WHERE album='$album' AND photoid='$photoid'")or die(mysql_error());
			$row = mysql_fetch_array($query)or die(mysql_error());
			$photonumber = $row['id'];
			$previous = $photonumber -= 1;
				$query2 = mysql_query("SELECT photoid FROM albums WHERE album = '$album' AND id='$previous'");
				$row2 = mysql_fetch_array($query2);
				$previousid = $row2['photoid'];
			$next = $row['id'] += 1;
				$query3 = mysql_query("SELECT photoid FROM albums WHERE album = '$album' AND id='$next'");
				$row3 = mysql_fetch_array($query3);
				$nextid = $row3['photoid'];
			//getting last id
				$query4 = mysql_query("SELECT id FROM albums WHERE album = '$album' ORDER BY id DESC LIMIT 1");
				$row4 = mysql_fetch_array($query4);

			if($previous == 0)
			{
				$firstcell = "<font color='grey'><<</font>";
			}
			else
			{
				$firstcell =  "<a href='http://localhost/chiro/photos/$album/$previousid'><font color='purple'><<</font></a>";
			}
			$secondcell = "<img src='http://localhost/chiro/fotos/$album/large/$photoid" . $row['type'] . "' alt='" . $row['explanation'] . "' />";
			$fourthcell = $row['explanation'];
			if($next == $row4['id'] += 1)
			{
				$thirdcell = "<font color='grey'>>></font>";
			}
			else
			{
				$thirdcell = "<a href='http://localhost/chiro/photos/$album/$nextid'><font color='purple'>>></font></a>";
			}
			echo "<center><table border='1' height='500px'><tr><td rowspan='2'>$firstcell</td><td height='450px' width='600px' align='center' valign='center'>$secondcell</td><td rowspan='2'>$thirdcell</td></tr><tr><td align='center'>$fourthcell</td></tr></table></center>";

		}
	}

Quick explanation; the url is of the form index.php?fx=photos&sub=album&sub2=photoid. When there is no photoid set, it shows a gallery of all the pictures, little transparant, and when you hover it is 100% visible. When you click on an image, you go to the photoid. So the whole page reloads with a 'sub2' in the url added.

If the sub2 is set in the url, you go to a page with one picture in the center, and then on the sides buttons to go to the next photo or previous photo. Now this is done with a new link, all the same except the photoid. So the whole page reloads.

 

Now what I want is to get this done with javascript/ajax. So that if you click to go to the next image, solely the image gets reloaded. Like this the site must load less, and if the page is too big for the user - he needs to scroll down to see the image - he mustn't rescroll every time.

 

 

I'm really new to javascript and ajax, though I believe it is the future, so please explain very well, or give a well documented link.

 

On a sidenote; for the next and previous image, I use the 'id' in the database of the picture. But if I remove one picture, the whole thing is messed up! How is this mostly done, what is stored in a database,...?

 

 

Thanks!

[denno020]

Dude, just google AJAX. You'll find alot more help than many people will give you in a forum. I doubt very much you'll get an AJAX class in a forum response, no one has that much time. It's really not that hard to find information nowadays.

 

I typed 'ajax' into google, and look what I found:

http://www.w3schools.com/Ajax/Default.Asp.

 

Easy.

 

Denno

[arbitter]

Dude, just google AJAX. You'll find alot more help than many people will give you in a forum. I doubt very much you'll get an AJAX class in a forum response, no one has that much time. It's really not that hard to find information nowadays.

 

I typed 'ajax' into google, and look what I found:

http://www.w3schools.com/Ajax/Default.Asp.

 

Easy.

 

Denno

 

I've read through so many tutorials of ajax and yet I can't seem to grasp how it works. But I guess I'll get back to re-reading and exercising the ajax basics Thanks for the reply anyways.

[denno020]

Sorry to be a jerk with my reply. But you'll get much more value out of it if you can learn for yourself. Not only will you be quite proud of yourself, you'll also remember it way easier. I've just found a youtube tutorial series that I've started watching, looks ok. Here is the link if you're interested:

 

Hope that helps mate

 

Denno