Dynamic image gallery with title update

This lesson will show you how to update the titles of each image using Jquey and php. we can put unlimited images and update titles to each image without any page refresh. lets see the lesson how we do this 

index.php

make sure this file should connect to database file, take a UL tag and write the query to fetch the rows from gallery table and put the LI tag into the while loop and take the input tag inside the loop and give the unique id to input box we can get the unique id from gallery table.

<div class="gallery">

<div id="loader"></div>
<ul>
<?php
$sql=mysql_query("select * from gallery");

while($full=mysql_fetch_array($sql)){

?>

<li><img src="images/<?php echo $full['image']?>" class="img"/><br/>

<input name="title" type="text" placeholder="Enter title" class="title" id="<?php echo $full['gid']?>" value="<?php echo $full['title']?>">
</li>

<?php }?>

</ul>

</div>

Javascript

here our requirement is to update the title to each image  for that i am writing the .change() function to input text box using .title as a selector. first we must know which text box is change for that we must know the unique id of textbox after get the uinque id using $(this).attr('id'); 

Just take the content of textbox and put it in one variable like postData, now it's time to show the loader div the loader div is useful when we got any technical problems or any other issues it will show's the text, now call the update.php using ajax request to after complete the request hide the #loader div in success function.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
    $('.title').change(function () {
  
  var Id=$(this).attr('id');
  
  var title=$(this).val();
  
  var postData='imgtitle='+title+'&imgid='+Id;
  
  $("#loader").show();
  $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;&nbsp;&nbsp;<span class="loading">Please wait content updating</span>');
  
  $.ajax({
   
   type: "POST",
   url: "update.php",
   data: postData,
   cache: false,
   success: function(){
    $('#loader').hide();    
   }
   
  });
  

    });
 
});

</script>

CSS

by default put the #loader div to display:none we will show this with jquery when the user update the text.

<style>

body{ font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.gallery{ width:800px; height:600px; padding:10px; border:solid  #F3F3F3 1px; margin:0 auto; margin-top:10px;}

h1{ width:480px; margin:0 auto;}

.gallery ul{list-style:none; padding:0; margin:0;}

.gallery li{ float:left; padding:5px; margin:5px 5px 5px 0;}

.gallery li:hover{ background-color:#F3F3F3;}

.img{ width:230px; border:10px solid white;-webkit-box-shadow: 1px 2px 2px #111;box-shadow: 1px 2px 2px  #F7F7F7;}

.title{ border:solid #CCC 1px; width:239px; height:20px; padding:5px; margin-top:5px; font-size:14px; color:#666;}

#loader{margin:0 auto; width:200px; height:20px; padding:5px; border:1px solid  #F7F7F7;-webkit-box-shadow: 1px 2px 2px #111;box-shadow: 1px 2px 2px  #ccc;display:none; position:absolute; margin-top:280px; margin-left:300px; background-color:#FFF; z-index:2;}

.loading{ font-weight:bold;}

</style>

Database

--
-- Table structure for table `gallery`
--

CREATE TABLE IF NOT EXISTS `gallery` (
  `gid` int(11) NOT NULL AUTO_INCREMENT,
  `image` varchar(255) NOT NULL,
  `title` varchar(255) NOT NULL,
  PRIMARY KEY (`gid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--
-- Dumping data for table `gallery`
--

Live Demo   Download Script