How to change the position of the colorbox using jQuery ?
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 = "https://code.jquery.com/jquery-3.6.0.min.js" > </ script > < script src = "jquery.colorbox-min.js" > </ script > < style > body { text-align: center; margin-top: 22%; } </ style > </ head > < body > < a href = 'Beginnerimage.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 = "https://code.jquery.com/jquery-3.6.0.min.js" > </ script > < script src = "jquery.colorbox-min.js" > </ script > < style > body { text-align: center; margin-top: 22%; } </ style > </ head > < body > < a href = 'Beginnerimage.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 = "https://code.jquery.com/jquery-3.6.0.min.js" > </ script > < script src = "jquery.colorbox-min.js" > </ script > < style > body { text-align: center; margin-top: 22%; } </ style > </ head > < body > < a href = 'Beginnerimage.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 = "https://code.jquery.com/jquery-3.6.0.min.js" > </ script > < script src = "jquery.colorbox-min.js" > </ script > < style > body { text-align: center; margin-top: 22%; } </ style > </ head > < body > < a href = 'Beginnerimage.png' > Click to open colorbox </ a > < script > $('a').colorbox({ top: "0px", left: "0px" }); </ script > </ body > </ html > |
Output:
Contact Us