Ok so with the help of the Daniweb community here I've gotten better with AJAX/jQuery, enough to make a photography with it rather than flash. I'm very excited with how most of it is working but I've hit a brick wall I really need help with.

Outline:
I have a index.php that has my header/menu/etc, and the menu functions with jquery tabs so that the fullscreen pages load with ajax underneath the menu, then on the galleries.php I have php that scans the folders on the server and dynamically creates the categories. You can see what I've got so far here: http://naomifugitphotography.com

The Problem:
The issue I'm having is I'm trying to have the galleries links load the index.php (which calls the home.php where the JS fullscreen gallery is loaded). It appears that when this call is made the variable to determine which gallery directory to load is getting lossed in the ajax call, cause the default gallery loads every time just fine. Since content is being loaded through ajax you can't really view the source but this is my diagnoses so far, also I will post my code for anyone else to help dissect.

Thank you for anyone who can provide some insight on the issue and maybe even a better approach. Thanks again.

galleries.php: Scrapes the photos directory and creates categories dynamically

<div id="container">
	<ul class="categories">
		<?php 
			$dir = getcwd()."*/photos/*";
			foreach(glob($dir) as $folder){
				$cat = basename($folder);
				$slug = str_replace(" ","_",$cat);
				if($cat != "featured"){  
					echo '<li class="gallery"><img src="photos/'.$cat.'/cover.png"><br /><a href="index.php?g='.$cat.'">'.$cat.'</a></li>';
				}  
			}  
		?>
	</ul>
</div>

<script>
/* Animate content into place */
	$('.categories').ready(function(){
		$('.categories li').each(function(index){
			$(this).hide();
			$(this).delay(index*500).fadeIn();
		});
	});
	
</script>

index.php: Header and menu(jquery tools tabs), and ajax call for content pages

<!DOCTYPE html>
<html>
	<head>
	<meta charset=utf-8 />
	<title>Naomi Fugit Photography</title>
		<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
		<script src="js/easing.1.3.js"></script>
		<script src="galleria/galleria-1.2.5.min.js"></script>
		<link rel="stylesheet" href="galleria/themes/fullscreen/galleria.fullscreen.css">
		
		<link rel = "stylesheet" type="text/css" href="style.css" >
	</head>
	<body>
		<?php $gallery = $_REQUEST['g'];?>
		
		<div id="header">
			<div id="decoration">
				<div class="left_decor"></div>
				<div class="right_decor"></div>
			</div>
			
			<div id="menu_container">
				<div id="logo"></div>
				<div id="menu">
					<ul class="css-tabs">
						<li class="item rightSpacer"></li>
						<li class="item"><a href="home.php">HOME</a></li>
						<!-- <li class="item"><a class="transition" href="about.php">ABOUT</a></li> --> 
						<li class="item"><a href="galleries.php">GALLERIES</a></li>
						<li class="item"><a href="contact.php">CONTACT</a></li>
						<li class="item"><a href="#">FACEBOOK</a></li>
						<!--<li class="item"><a href="http://www.facebook.com/NaomiFugitPhotography">FACEBOOK</a></li>-->
						<li class="item leftSpacer">
							<div class="item spacer"></div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div id="content">
			<div style="display:block"></div>
		</div>
		<script>
			$("ul.css-tabs").tabs("div#content > div", {effect: 'ajax', history: true});
		</script>
		
<?php include "footer.php"; ?>

home.php: loads gallery

<?php
		if (ISSET($_REQUEST['g'])){
			$gallery = str_replace("%20"," ",$_REQUEST['g']);
		} else {
			$gallery = "featured";
		}
		
	
	?>
	
	<div id="gallery">
		<?php 
			$dir = getcwd()."/photos/".$gallery;
			$imageDir = getcwd()."/photos/".$gallery."/{*.jpg,*.png}";
			
			foreach(glob($imageDir, GLOB_BRACE) as $image){
				$img = basename($image);
				//$path = basename($dir);
				echo '<img src="photos/'.$gallery.'/'.$img.'">'; 
			}  
		?>
	</div>
	
	<script>
		Galleria.loadTheme('galleria/themes/fullscreen/galleria.fullscreen.min.js');
		$("#gallery").galleria({
			imageCrop: false,
			transition: "fade",
			transitionSpeed: 1000,
			easing: "galleriaOut",
			swipe: true,
			autoplay: 5000,
			debug: false // debug is now off for deployment
		});
	</script>

Recommended Answers

All 3 Replies

Ideal would be to post in JavaScript section instead of Java. Post moved...

Please post the code for gallery.php.

The parameter 'g' is being passed thru the link, but maybe is not being used on gallery.php.

I'm actually not using the gallery.php at the moment, last not I think I left the link as "gallery.php?g=", but that was for testing, and as you can see the gallery.php is working when called (live right now), the problem is none of the header loads that way therefore instead I call index.php which then loads home.php (same thing as gallery.php) through ajax. If you want to see the code look at what I posted for home.php

Thanks for the help, I can assure your the 'g' is being used, if it wasn't no images would appear because they are dynamically grabbed based on the directory supplied by 'g'

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.