Problem integrating PHP, HTML and SQL query to display photos


#1

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>

#2
hello a2jagger, if user_id is intiger than replce your [PHP] //Replace (remove) $sql=("SELECT * FROM images WHERE user_id='".$user_id."'"); [/PHP] with below code(use below code) [PHP] //Ues this code $sql=("SELECT * FROM images WHERE user_id=".$user_id); [/PHP]

remove(replace) your below code

Remove below code

####################################

  • data/images/images"

    Date Image Taken: "<?php echo $date_image_taken; ?>"

    Image Taken By: "<?php echo $image_taken_by; ?>"

    Notes: "<?php echo $notes; ?>""/>
  • ####################################

    use below code

    #####################################

  • USER ID: <?php echo $user_id; ?>
    Date Image Taken: <?php echo $date_image_taken; ?>
    Image Taken By: <?php echo $image_taken_by; ?>
    Notes: <?php echo $notes; ?>
  • #####################################

    i hope this will helpful for you.
    Reply your feedback
    SR