Skip to main content

Facebook Like Drag Background Cover Changer using Jquery

In this tutorial we will show you how to create a Facebook Like Drag Background Cover Changer using Jquery by uploading, positioning and adjusting the image. And if you are looking for a application that can upload images this one is very interesting and suits for your system, and it has a combination of many features. See the example code below.

Sample Code

Index.php - This file is for displaying the background image based on the login user session id.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Facebook Like Drag Background Cover Changer using Jquery</title>
  5. <link href='timeline.css' rel='stylesheet' type='text/css'/>
  6. <script src="js/jquery.min.js"></script>
  7. <script src="js/jquery-ui.min.js"></script>
  8. <script src="js/jquery.wallform.js"></script>
  9. <script>
  10. $(document).ready(function()
  11. {
  12. $('body').on('change','#bgphotoimg', function()
  13. {
  14. $("#bgimageform").ajaxForm({target: '#timelineBackground',
  15. beforeSubmit:function(){},
  16. success:function(){
  17. $("#timelineShade").hide();
  18. $("#bgimageform").hide();
  19. },
  20. error:function(){
  21.  
  22. } }).submit();
  23. });
  24. $("body").on('mouseover','.headerimage',function ()
  25. {
  26. var y1 = $('#timelineBackground').height();
  27. var y2 = $('.headerimage').height();
  28. $(this).draggable({
  29. scroll: false,
  30. axis: "y",
  31. drag: function(event, ui) {
  32. if(ui.position.top >= 0)
  33. {
  34. ui.position.top = 0;
  35. }
  36. else if(ui.position.top <= y1 - y2)
  37. {
  38. ui.position.top = y1 - y2;
  39. }
  40. },
  41. stop: function(event, ui)
  42. {
  43. }
  44. });
  45. });
  46. $("body").on('click','.bgSave',function ()
  47. {
  48. var id = $(this).attr("id");
  49. var p = $("#timelineBGload").attr("style");
  50. var Y =p.split("top:");
  51. var Z=Y[1].split(";");
  52. var dataString ='position='+Z[0];
  53. $.ajax({
  54. type: "POST",
  55. url: "image_saveBG_ajax.php",
  56. data: dataString,
  57. cache: false,
  58. beforeSend: function(){ },
  59. success: function(html)
  60. {
  61. if(html)
  62. {
  63. $(".bgImage").fadeOut('slow');
  64. $(".bgSave").fadeOut('slow');
  65. $("#timelineShade").fadeIn("slow");
  66. $("#timelineBGload").removeClass("headerimage");
  67. $("#timelineBGload").css({'margin-top':html});
  68. return false;
  69. }
  70. }
  71. });
  72. return false;
  73. });
  74. });
  75. </script>
  76. </head>
  77. <body>
  78. <ul>
  79. <li style="margin-left: 165px;"><a href="#home">Facebook</a></li>
  80. <li style="margin-left: 743px;"><a href="#profile"><img src="#">Sourcodester</a></li>
  81. <li><a href="#home">Home</a></li>
  82. <li><a href="#logout">Logout</a></li>
  83. </ul>
  84. <div id="container">
  85. <div id="timelineContainer">
  86. <div id="timelineBackground">
  87. <img src="<?php echo $path.$profile_background; ?>" class="bgImage" style="margin-top: <?php echo $profile_background_position; ?>;">
  88. </div>
  89. <div style="background:url(images/timeline_shade.png);" id="timelineShade">
  90. <form id="bgimageform" method="post" enctype="multipart/form-data" action="image_upload_ajax.php">
  91. <div class="updateInfo timelineInfo">
  92. <input type="button" class="updateInfo" value="Update Info" alt="Update Info">
  93. </div>
  94. <div class="uploadFile timelineUploadBG">
  95. <input type="file" name="photoimg" id="bgphotoimg" class=" custom-file-input" original-title="Change Cover Picture">
  96. </div>
  97. </form>
  98. </div>
  99. <div id="timelineProfilePic"><img src="images/profilepic1.jpg" style="width: 170px;height: 170px;"></div>
  100. <div id="timelineTitle"><?php echo $name; ?></div>
  101. <div id="timelineNav">
  102. <div class="buttonside">
  103. <input type="button" class="button" value="Timeline">
  104. <input type="button" class="button button2" value="About">
  105. <input type="button" class="button button3" value="Friends">
  106. <input type="button" class="button button4" value="Photos">
  107. <input type="button" class="button button5" value="More">
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </body>
  113. </html>
UserUpdates.php - This simple PHP class contains three functions called userDetails, userBackgroundUpdate and userBackgourndPositionUpdate.
  1. <?php
  2. class userUpdates
  3. {
  4. private $db;
  5.  
  6. public function __construct($db)
  7. {
  8. $this->db = $db;
  9. }
  10. public function userDetails($user_id)
  11. {
  12. $query=mysqli_query($this->db,"SELECT username,email,name,profile_background,profile_background_position FROM users WHERE user_id='$user_id' ")or die(mysqli_error($this->db));
  13. $data=mysqli_fetch_array($query,MYSQLI_ASSOC);
  14. return $data;
  15. }
  16. public function userBackgroundUpdate($user_id,$actual_image_name)
  17. {
  18. $query=mysqli_query($this->db,"UPDATE users SET profile_background='$actual_image_name' WHERE user_id='$user_id'")or die(mysqli_error($this->db));
  19. return $query;
  20. }
  21. public function userBackgroundPositionUpdate($user_id,$position)
  22. {
  23. $position=mysqli_real_escape_string($this->db,$position);
  24. $query=mysqli_query($this->db,"UPDATE users SET profile_background_position='$position' WHERE user_id='$user_id'")or die(mysqli_error($this->db));
  25. return $query;
  26. }
  27. }
  28. ?>
ImageUploadAjax.php - This is for the uploading image file into uploads folder and inserting background image name into users table. And every image that the user uploads has a restricted size of 1mb.
  1. <?php
  2. include 'db.php';
  3. $session_uid='1';
  4.  
  5. include 'userUpdates.php';
  6. $userUpdates = new userUpdates($db);
  7.  
  8. include_once 'getExtension.php';
  9. $valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
  10. if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST" && isset($session_uid))
  11. {
  12. $name = $_FILES['photoimg']['name'];
  13. $size = $_FILES['photoimg']['size'];
  14. if(strlen($name))
  15. {
  16. $ext = getExtension($name);
  17. if(in_array($ext,$valid_formats))
  18. {
  19. if($size<(1024*1024))
  20. {
  21. $actual_image_name = time().$session_uid.".".$ext;
  22. $tmp = $_FILES['photoimg']['tmp_name'];
  23. $bgSave='<div id="uX'.$session_uid.'" class="bgSave wallbutton blackButton">Save Cover</div>';
  24. if(move_uploaded_file($tmp, $path.$actual_image_name))
  25. {
  26. $data=$userUpdates->userBackgroundUpdate($session_uid,$actual_image_name);
  27. if($data)
  28. echo $bgSave.'<img src="'.$path.$actual_image_name.'" id="timelineBGload" class="headerimage ui-corner-all" style="top:0px"/>';
  29. }
  30. else
  31. {
  32. echo "Fail upload folder with read access.";
  33. }
  34. }
  35. else
  36. echo "Image file size max 1 MB";
  37. }
  38. else
  39. echo "Invalid file format.";
  40. }
  41. else
  42. echo "Please select image..!";
  43. }
  44. ?>
resultHope that you learn from this tutorial and don't forget to Like & Share. Enjoy Coding!

Add new comment