# Fancybox anderst positionieren



## Jan-Frederik Stieler (18. Juli 2010)

Hallo,
kann mir jemand erklären wi ich die Position der Fancbox verändern kann?
Über CSS ist das anscheinend nicht möglich, da mrt Firebug die Position als neues element.style ausgibt.
Ich finde darüber leider nichts im Netz.

Viele Grüße


----------



## Quaese (19. Juli 2010)

Hi,

das Element, in dem die Fancybox angezeigt wird, hat die ID *fancybox-wrap*. Hierüber sollte ein Neupositionieren möglich sein.

```
$('#fancybox-wrap').css({
  top: '500px',
  left: '500px'
});
```
 
Ciao
Quaese


----------



## Jan-Frederik Stieler (19. Juli 2010)

Moin,
das hab ich auch schon versucht, nur über die CSS_Datei und nicht über JS.
Hat leider nichts gebracht. So wie das aussieht wird die Positionierung ja über JS reingeschrieben und nicht über die CSS. Was ich ehrlcih gesagt etwas merkwürdig finde, da ja so eine Modalbox moglichst viele unetrschiedliche Einsatzgebiete hat und dann auch möglichst einfach angepasst werden könen sollte.

Ich kann leider kein Link posten da die Seite noch nicht online steht.

Viele Grüße


----------



## Quaese (19. Juli 2010)

Hi,

ich verstehe dich richtig: du möchtest der modalen Box beim Initialisieren eine Feste Position zuweisen, die sich nicht mehr ändern soll.

In einem solchen Fall fällt mir nur eine Modifikation der JS-Datei ein, und zwar:

1. Die Standardwerte um *my_top*, *my_left* und *static_pos_onresize* ergänzen in *$.fn.fancybox.defaults* (ganz unten)

```
$.fn.fancybox.defaults = {
  padding			: 10,
  margin			: 20,
  opacity			: false,
  modal				: false,
  cyclic			: false,
  scrolling			: 'auto',	// 'auto', 'yes' or 'no'

  width				: 560,
  height			: 340,
  my_top			: null,
  my_left			: null,
  static_pos_onresize: false,

  autoScale			: true,
  // ... usw.
};
```
 
2. Die Methode *fancybox_get_zoom_to* for *return to* wie nachstehend um die markierten Zeilen ergänzen:

```
fancybox_get_zoom_to = function () {
  // wie bisher

  to.top = (currentOpts.my_top == null)? to.top : currentOpts.my_top+"px";
  to.left = (currentOpts.my_left == null)? to.left : currentOpts.my_left+"px";

  return to;
```
 
3. Die Zentriermethode *$.fancybox.center* um nachstehende markierte Passage erweitern:

```
$.fancybox.center = function() {
  busy = true;

  var view	= fancybox_get_viewport(),
  margin	= currentOpts.margin,
  to		= {};

  to.top	= view[3] + ((view[1] - ((wrap.height() - titleh) + (shadow * 2 ))) * 0.5);
  to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);

  to.top	= Math.max(view[3] + margin, to.top);
  to.left	= Math.max(view[2] + margin, to.left);

  if(currentOpts.static_pos_onresize){
    to.top = (currentOpts.my_top == null)? to.top : currentOpts.my_top+"px";
    to.left = (currentOpts.my_left == null)? to.left : currentOpts.my_left+"px";
  }

  wrap.css(to);

  busy = false;
};
```

Nun sollte es möglich sein, die Position, an der die Box erscheinen soll, beim Initialisieren über die Eigenschaften *my_top* und *my_left* anzugeben. Die Werte werden den beiden Eigenschaften als Integerwerte ohne Einheiten übergeben.

Soll die Position auch beim Resize beibehalten werden, so wird die Eigenschaft *static_pos_onresize* auf *true* gesetzt.

Beispiel:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="fancybox/jquery.fancybox-1.3.1_selbst_Position-angeben.js" type="text/javascript"></script>
<script src="fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css">
<style type="text/css">
  <!--
#inline2{
  padding: 12px;
}
 //-->
</style>
<script type="text/javascript">
  <!--
$(function(){
  $("#various2").fancybox({
    'modal'   : true,
    'my_top'  : 0,
    'my_left' : 0,
    'static_pos_onresize': true
  });
});
 //-->
</script>
</head>
<body>
<a id="various2" href="#inline2">Inline - modal window</a>
<div id="inline_content" style="display: none;">
  <div id="inline2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. &nbsp;&nbsp; <a href="javascript:;" onclick="$.fancybox.close(); return false;">Close</a></p>
  </div>
</div>
</body>
</html>
```
 
Die modifierte JS-Datei habe ich in den Anhang gepackt.

Vielleicht hilft es dir weiter.

Ciao
Quaese


----------



## Jan-Frederik Stieler (20. Juli 2010)

Hallo Quease,
wow, werd mir das Ganze in einer ruhigen Minute durchlesen müssen.
Und ja im Grunde verstehst du mich richtig. Eine Moadalbox wird in der Regel immer einfach nur über die Webseite gelegt ohne das man dies auch in das Gestaltungsraster der Webseite einbinden kann.

Also ich mein damit das es darüber auf der Homepage der Fancybox keine Dokumentation drüber gibt.

EDIT:
Hab das jetzt so eingebaut. Funktioniert jetzt auch super. Vielen Dank.
Das einzigste ist das die Zoomposition beim type "elastic" immer noch zentriert ist und sich nicht an der normalen Poasition orientiert. 

Aber vielen Dank und viele Grüße,
Jan


----------

