Colorbox es un complemento de jQuery, amplía la biblioteca de jQuery para incluir funciones adicionales.
Enfoque: podemos cambiar la posición de colorbox en jQuery usando argumentos posicionales como arriba, izquierda, derecha, abajo .
Sintaxis:
$(element).colorbox({
top: "Apx",
left: "Bpx",
right: "Cpx",
bottom: "Dpx"
});
Ejemplo 1: El siguiente ejemplo muestra el complemento sin argumentos.
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='geeksimage.png'>
Click to open colorbox
</a>
<script>
$('a').colorbox();
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra cómo cambiar el cuadro de color a la izquierda usando 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='geeksimage.png'>
Click to open colorbox
</a>
<script>
$('a').colorbox({ left: "0px" });
</script>
</body>
</html>
Producción:
Ejemplo 3: El siguiente ejemplo muestra cómo cambiar el cuadro de color a la derecha usando 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='geeksimage.png'>
Click to open colorbox
</a>
<script>
$('a').colorbox({ right: "0px" });
</script>
</body>
</html>
Producción:
También podemos usar más de 1 argumento posicional a la vez.
Ejemplo 4: El siguiente ejemplo demuestra la posición superior izquierda.
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='geeksimage.png'>
Click to open colorbox
</a>
<script>
$('a').colorbox({
top: "0px",
left: "0px"
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por varunkedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA