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>
