Hi, I have been attempting to integrate a SQL query into a new HTML based photo gallery I bought. The sql query is one I use to pull successfully from my database but I cannot figure out how to integrate it into this new HTML photo gallery. What I am trying to do is simply automatically generate the photos associated with each user when they log in. If anyone has any suggestions for what I am doing wrong or what it should look like I would appreciate it. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JQuery Image Gallery Slideshow With MousePan</title>
<!-- ***** START COPY INTO HEAD SECTION ***** -->
<link rel="stylesheet" type="text/css" href="css/panGallery.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/mwheelIntent.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="js/jquery.panGallery.min.js"></script>
<script type="text/javascript">
// SETTINGS
var settings = {
<!-- slideshowDelay: in seconds -->
slideshowDelay: 3,
<!-- slideshowOn: true, false -->
slideshowOn:true,
<!-- activeCategory: enter -1 to start with menu opened (and no category loaded), or enter: 0 = 1st category loaded, 1 = 2nd category loaded, 2 = 3rd category loaded... etc), in order gallery are listed in the html) -->
activeCategory: 0,
<!-- thumbScale: gallery thumb rollover scale -->
thumbScale: 1.5,
<!-- thumbWidth: gallery thumb width -->
thumbWidth:80,
<!-- thumbHeight: gallery thumb height -->
thumbHeight:53,
<!-- menu is built in the code, all you need to specify is menu thumb width and height -->
<!-- menuThumbWidth: menu thumb width -->
menuThumbWidth:250,
<!-- menuThumbHeight: menu thumb height -->
menuThumbHeight:375,
<!-- menuBorderSize: size of the border around menu -->
menuBorderSize:10,
<!-- menuBorderOpacity: (opacity around menu) value = 0-1 -->
menuBorderOpacity:0.5,
<!-- minDescriptionWidth: minimal width of the description area (set height in the css) -->
minDescriptionWidth:250,
<!-- autoOpenDescription: true/false (auto open description if exist when image is loaded) -->
autoOpenDescription:true
};
jQuery(window).load(function() {
jQuery.panGallery(settings);
gallerySettings = null;
});
</script>
<!-- ***** END COPY INTO HEAD SECTION ***** -->
</head>
<body>
<!-- ***** START COPY INTO BODY SECTION ***** -->
<div id="componentWrapper">
<!-- image pan holder -->
<div id="panHolder">
<div id="img1"></div>
<div id="img2"></div>
</div>
<!-- image preloader (above image, below menu) -->
<div id="imagePreloader"></div>
<!-- holder for the info (description). Delete this whole div if you dont want to use title and description on images. -->
<div id="info_wrapper">
<div id="info_title"></div>
<div id="info_holderMasker"><div id="info_holder"></div></div>
<div id="info_toggle"><img src="data/icons/openInfo.png" alt="info_toggle" width="15" height="10" /></div>
</div>
<!-- menu toggle and slideshow toggle button -->
<div id="galleryControls">
<!-- menu toggle -->
<div id="menu_toggle"><img src="data/icons/menu_toggle.png" alt="menu_toggle" width="40" height="40" /></div>
<!-- slideshow toggle -->
<div id="slideshow_toggle"><img src="data/icons/play.png" alt="slideshow_toggle" width="40" height="40" /></div>
</div>
<!-- category menu -->
<div id="menuWrapper">
<!-- menu background -->
<div id="menu_bg"></div>
<div id="menuHolder">
<div class="menuRowMasker">
<div class="menuRowHolder"></div>
</div>
<div class="menuRowMasker">
<div class="menuRowHolder"></div>
</div>
<div class="menuRowMasker">
<div class="menuRowHolder"></div>
</div>
</div>
<!-- menu backward -->
<div id="menu_back"><img src="data/icons/backward.png" alt="menu_back" width="40" height="40" /></div>
<!-- menu forward -->
<div id="menu_forward"><img src="data/icons/forward.png" alt="menu_forward" width="40" height="40" /></div>
<!-- menu close -->
<div id="menu_close"><img src="data/icons/close.png" alt="menu_close" width="40" height="40" /></div>
</div>
<!-- thumb scroll holder -->
<div id="thumbWrapper">
<div id="thumbs">
<div id="thumbList">
<!-- LIST YOUR OWN CATEGORIES IN HERE
<div class="category" data-title="Your custom title goes here" data-thumb="data/images/menu/01.jpg">
data-title = title for the category, appears in the menu
data-thumb = thumb for the category, appears in the menu
-----
-->
<?php
$link = mysql_connect("server", "user","pwd");
mysql_select_db("db");
$sql=("SELECT * FROM images WHERE user_id='".$user_id."'");
$result=mysql_query($sql);
while($r=mysql_fetch_array($result))
{
$user_id=$r["user_id"];
$date_image_taken=$r["date_image_taken"];
$image_taken_by=$r["image_taken_by"];
$file_name=$r["file_name"];
$notes=$r["notes"];
}
?>
<div class="category" data-title="Images" data-thumb="data/images">
<ul>
<li>
<img src="data/images" alt="data/images/images" width="80" height="53" title="<?php echo $file_name; ?>" data-description= USER ID: "<?php echo $user_id; ?>"<br/><br/>
Date Image Taken: "<?php echo $date_image_taken; ?>"<br/><br/>
Image Taken By: "<?php echo $image_taken_by; ?>"<br/><br/>
Notes: "<?php echo $notes; ?>""/>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- thumbs left -->
<div id="thumbsLeft"><img src="data/icons/thumbsLeft.png" alt="thumbsLeft" width="30" height="53" /></div>
<!-- thumbs right -->
<div id="thumbsRight"><img src="data/icons/thumbsRight.png" alt="thumbsRight" width="30" height="53" /></div>
<!-- image control buttons -->
<!-- backward -->
<div id="backward"><img src="data/icons/backward.png" alt="backward" width="40" height="40" /></div>
<!-- forward -->
<div id="forward"><img src="data/icons/forward.png" alt="forward" width="40" height="40" /></div>
<!-- toggle_size -->
<div id="sizeToggle"><img src="data/icons/plus.png" alt="sizeToggle" width="40" height="40" /></div>
</div>
<!-- ***** END COPY INTO BODY SECTION ***** -->
</body>
</html>