Mass Confusion.. using php to place a variable into javascript?

[law]

im racking my brain here.. and its not very big to begin with so im probly doing major damage to it..

 

Im working on a gallery.. the idea is that an administrator uploads photos & adds them to the database.. now the photos are placed into galleries and then called into one page.. the galleries look and work beautifully when only one is on a page at a time.. how can i make multiple galleries using <div>'s and <span>'s play TOGETHER and not over lap each other

 

<?php
for ($num=1;$num<=$num_rows;$num++){
echo "
						<script type='text/javascript'>
							$(document).ready(function(){
	$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
	$('ul.gallery_demo').galleria({
		history   : true, // activates the history object for bookmarking, back-button etc.
		clickNext : true, // helper for making the image clickable
		insert    : '#main_image', // the containing selector for our main image
		onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

			// fade in the image & caption
			image.css('display','none').fadeIn(1000);
			caption.css('display','none').fadeIn(1000);

			// fetch the thumbnail container
			var _li = thumb.parents('li');

			// fade out inactive thumbnail
			_li.siblings().children('img.selected').fadeTo(500,0.3);

			// fade in active thumbnail
			thumb.fadeTo('fast',1).addClass('selected');

			// add a title for the clickable image
			image.attr('title','Next image >>');
		},
		onThumb : function(thumb) { // thumbnail effects goes here

			// fetch the thumbnail container
			var _li = thumb.parents('li');

			// if thumbnail is active, fade all the way.
			var _fadeTo = _li.is('.active') ? '1' : '0.3';

			// fade in the thumbnail when finnished loading
			thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

			// hover effects
			thumb.hover(
				function() { thumb.fadeTo('fast',1); },
				function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
			)
		}
	});
});
</script>";

echo "
<div class='demo'>
<div id='main_image'></div>
<ul class='gallery_demo_unstyled'>";

for ($i=$galleryidmin[$num];$i<=$galleryidmax[$num];$i++){
	if($galimgsrc[$i] != null){
		echo "
		<li><img src='$galimgsrc[$i]' alt='$galimgalt[$i]' title='$galimgtitle[$i]'></li>
		";
	}
}

echo "
</ul>
<p class='nav'><a href='#' onclick='$.galleria.prev(); return false;'>« previous</a> | <a href='#' onclick='$.galleria.next(); return false;'>next »</a></p>
</div>
<div class='info'>";

if($gallerytitle[$num] != null){
	echo "
		<h2>$gallerytitle[$num]</h2>
		<p>$galleryinfo1[$num]</p>
		<p>$galleryinfo2[$num]</p>
		<p>$galleryinfo3[$num]</p>
	";
}
}	
?>	</div></div>

 

I grabbed someone else's gallery code and i'm using it for my site wish i remembered who so i could give credit.. but it was just some random internet site.. any way.. I don't know javascript.. soo how can i add some form of incrementation or some way to make each gallery unique... here is the CSS code for the gallery

 

<style media="screen,projection" type="text/css">
/* BEGIN DEMO STYLE */
	*	{margin:0;padding:0}
		.demo{position:relative;margin-top: 2em;}
		.gallery_demo{ align:top; width:800px; margin:0 auto;}
		.gallery_demo li{align:top; width:100px; height:50px; border:10px double #111; margin: 2px 2px; background:#000;}
		.gallery_demo li div{align:top; top:240px}
		.gallery_demo li div .caption{align:top; font:italic 1em/1.4 georgia,serif;}
</style> 

 

I'm lost.. on this one.. I was really hoping to get multiple galleries on one page.. if thats not possible then i guess ill learn how to do pagination? or would that even work?

[RichardRotterdam]

why use javascript in your gallery? Seems to me you want to have your gallery divided into seperate pages.

try looking up php pagination. javascript can be used to create animations other then that you dont really need it

[law]

well thats the exact reason.. im trying to make the gallery look "professional" / fancy

[RichardRotterdam]

if you want some fancy gallery scripts try looking up some prototype or mootools gallery scripts those are usually great looking and tons of those have good documentation. this seems like jquery or dojo frameworks or something im not familiar with it