Skip to content
Related Articles

Related Articles

Improve Article
How to change the position of the colorbox using jQuery ?
  • Last Updated : 23 Apr, 2021

Colorbox is a jQuery plugin, it extends the jQuery library to include extra functionality.

Approach: We can change the position of colorbox in jQuery using positional arguments such as top, left, right, bottom.

Syntax:

$(element).colorbox({ 
    top: "Apx",
    left: "Bpx",
    right: "Cpx",
    bottom: "Dpx"
});

Example 1: The following example demonstrates the plugin with no arguments.

HTML




<!doctype html>
<html>
  
<head>
    <script src=
    </script>
  
    <script src=
        "jquery.colorbox-min.js">
    </script>
  
    <style>
        body {
            text-align: center;
            margin-top: 22%;
        }
    </style>
</head>
  
<body>
    <a href='geeksimage.png'>
        Click to open colorbox
    </a>
      
    <script>
        $('a').colorbox();
    </script>
</body>
  
</html>

Output:



Example 2: The following example demonstrates shifting colorbox to left using left : 0px.

HTML




<!doctype html>
<html>
  
<head>
    <script src=
    </script>
      
    <script src=
        "jquery.colorbox-min.js">
    </script>
  
    <style>
        body {
            text-align: center;
            margin-top: 22%;
        }
    </style>
</head>
  
<body>
    <a href='geeksimage.png'>
        Click to open colorbox
    </a>
      
    <script>
        $('a').colorbox({ left: "0px" });
    </script>
</body>
  
</html>

Output:

Example 3: The following example demonstrates shifting the colorbox to right using right: 0px.

HTML




<!doctype html>
<html>
  
<head>
    <script src=
    </script>
  
    <script src=
        "jquery.colorbox-min.js">
    </script>
  
    <style>
        body {
            text-align: center;
            margin-top: 22%;
        }
    </style>
</head>
  
<body>
    <a href='geeksimage.png'>
        Click to open colorbox
    </a>
      
    <script>
        $('a').colorbox({ right: "0px" });
    </script>
</body>
  
</html>

Output:

We can also use more than 1 positional arguments at once.

Example 4: The following example demonstrates the top-left position.

HTML




<!doctype html>
<html>
  
<head>
    <script src=
    </script>
  
    <script src=
        "jquery.colorbox-min.js">
    </script>
      
    <style>
        body {
            text-align: center;
            margin-top: 22%;
        }
    </style>
</head>
  
<body>
    <a href='geeksimage.png'>
        Click to open colorbox
    </a>
      
    <script>
        $('a').colorbox({ 
            top: "0px", 
            left: "0px" 
        });
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :