Dynamic Colorbox loading position

Question

This is quick link to color box example.

i need to change and customize place of color box loading

Any one can help me?

Answer 1

Here is an example to control the position

$("#colorbox").css("left","200px");

You can use the similar to control left, right, top, down. But the the element must be position absolutely.

Answer 2

I have make bold the imported code that need to add I don't know whether

$("#colorbox").css("left","200px") < is the answer. it didn't work for me. SORRY!!!

However I got the solution.

you need to do small changes in side the jquery.colorbox.js

var // ColorBox Default Settings.
// See http://colorpowered.com/colorbox for details. defaults = { positionTop : 100, <----add this positionLeft : 200, <----add this too

change this code looks like below(this code inside the publicMethod.position = function (speed, loadedCallback) { )

    posTop = Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2 + $window.scrollTop() **+ settings.positionTop**,
    posLeft = Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2 + $window.scrollLeft() **+ settings.positionLeft**;

Then you can simply call colorbox by giving position

$.colorbox({html:data.content,positionTop: 100 ,positionLeft : 200