• We just launched and are currently in beta. Join us as we build and grow the community.

Facebook Like Drag Background Cover Changer using Jquery

A61a

SEO Keyword Architect
A
A Rep
0
0
0
Rep
0
A Vouches
0
0
0
Vouches
0
Posts
115
Likes
79
Bits
0
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 200 XP
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(){

  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

    ;

  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_start

    (

    )

    ;
  4. $session_uid

    =

    '1'

    ;

  6. include

    'userUpdates.php'

    ;
  7. $userUpdates

    =

    new

    userUpdates(

    $db

    )

    ;

  9. include_once

    'getExtension.php'

    ;
  10. $valid_formats

    =

    array

    (

    "jpg"

    ,

    "png"

    ,

    "gif"

    ,

    "bmp"

    ,

    "jpeg"

    ,

    "PNG"

    ,

    "JPG"

    ,

    "JPEG"

    ,

    "GIF"

    ,

    "BMP"

    )

    ;
  11. if

    (

    isset

    (

    $_POST

    )

    &&

    $_SERVER

    [

    'REQUEST_METHOD'

    ]

    ==

    "POST"

    &&

    isset

    (

    $session_uid

    )

    )
  12. {
  13. $name

    =

    $_FILES

    [

    'photoimg'

    ]

    [

    'name'

    ]

    ;
  14. $size

    =

    $_FILES

    [

    'photoimg'

    ]

    [

    'size'

    ]

    ;
  15. if

    (

    strlen

    (

    $name

    )

    )
  16. {
  17. $ext

    =

    getExtension(

    $name

    )

    ;
  18. if

    (

    in_array

    (

    $ext

    ,

    $valid_formats

    )

    )
  19. {
  20. if

    (

    $size

    <

    (

    1024

    *

    1024

    )

    )
  21. {
  22. $actual_image_name

    =

    time

    (

    )

    .

    $session_uid

    .

    "."

    .

    $ext

    ;
  23. $tmp

    =

    $_FILES

    [

    'photoimg'

    ]

    [

    'tmp_name'

    ]

    ;
  24. $bgSave

    =

    '<div id="uX'

    .

    $session_uid

    .

    '" class="bgSave wallbutton blackButton">Save Cover</div>'

    ;
  25. if

    (

    move_uploaded_file

    (

    $tmp

    ,

    $path

    .

    $actual_image_name

    )

    )
  26. {
  27. $data

    =

    $userUpdates

    ->

    userBackgroundUpdate

    (

    $session_uid

    ,

    $actual_image_name

    )

    ;
  28. if

    (

    $data

    )
  29. echo

    $bgSave

    .

    '<img src="'

    .

    $path

    .

    $actual_image_name

    .

    '" id="timelineBGload" class="headerimage ui-corner-all" style="top:0px"/>'

    ;
  30. }
  31. else
  32. {
  33. echo

    "Fail upload folder with read access."

    ;
  34. }
  35. }
  36. else
  37. echo

    "Image file size max 1 MB"

    ;
  38. }
  39. else
  40. echo

    "Invalid file format."

    ;
  41. }
  42. else
  43. echo

    "Please select image..!"

    ;
  44. exit

    ;
  45. }
  46. ?>

fb1.png

Hope that you learn from this tutorial and don't forget to Like & Share. Enjoy Coding!


Download
You must upgrade your account or reply in the thread to view hidden text.
 
You must log in or register to reply here.

450,270

322,965

322,974

K Kingalazawi
Top