Fancybox anderst positionieren

Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
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
 
Hi,

das Element, in dem die Fancybox angezeigt wird, hat die ID fancybox-wrap. Hierüber sollte ein Neupositionieren möglich sein.
Code: 
$('#fancybox-wrap').css({
  top: '500px',
  left: '500px'
});

Ciao
Quaese
 
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
 
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)
Code: 
$.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:
Code: 
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:
Code: 
$.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:
Code: 
<!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
 

Anhänge

Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück