Dynamic Image Gallery with Thumb Sorting and Title Update | Lessoncup Programming Blog

Monday, 28 October 2013

Dynamic Image Gallery with Thumb Sorting and Title Update

This lesson will show you how to manage the image thumbs sorting order, it is very easy to manage the thumb sizes with jquery and css. when i thought to do this task it will take long time but we can do it in just few minutes, we have to take the stylesheet as par our thumb sizes and manage the css style with jquey. let's see the lesson how we work out this kind of tasks.



index.php

Process to Thumb Sorting
Take two buttons for sorting the thumbs and the button design as up to you, give a class names thumb2 and thumb3 now i am writing the css style to display the big thumbs .img3{width:365px;} after complete the style we need to apply this style while click on thumb3 button in cross browser

Process to update the title
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="tools">Display by <img src="thumb2.jpg" width="33" height="37" align="top" class="sortimages thumb2" title="two thumbs">
<img src="thumb3.jpg" width="49" height="37" align="top" class="sortimages thumb3" title="three thumbs">
</div>

<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" id="img<?php echo $full['gid']?>"/><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

Process to Thumb Sorting
take two click events for two buttons, here i am using .addClass() and .removeClass() method to manage the thumb sizes in cross browser.
Process to update the title
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(){
 
 
 $('.thumb2').click(function(){
  
  $('.img').addClass('img3');
  $('.title').addClass('titlesize');
  
 });
 
 
 $('.thumb3').click(function(){
  
  $('.img').removeClass('img3');
  $('.title').removeClass('titlesize');
  
 });
 
    $('.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:auto;padding:10px; border:solid  #F3F3F3 0px; margin:0 auto; margin-top:10px;}

.tools{ width:100px; height:100px; border:solid  #000 1px; padding:10px;}

.sortimages{cursor:pointer; border:none;}

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;}

.img3{ width:365px; 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;}

.titlesize{width:373px;}

#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

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons