Fancybox anderst positionieren @ tutorials.de: Tutorials, Forum & Hilfe

**Jan-Frederik Stieler** · 18.07.10 23:14

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.07.10 08:32

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

**Jan-Frederik Stieler** · 19.07.10 09:23

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.07.10 12:03

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,
[B]  my_top         : null,
  my_left           : null,
  static_pos_onresize: false,[/B]
 
  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
 
[B]  to.top = (currentOpts.my_top == null)? to.top : currentOpts.my_top+"px";
  to.left = (currentOpts.my_left == null)? to.left : currentOpts.my_left+"px";[/B]
 
  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);
 
[B]  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";
  }[/B]
 
  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,
[B]    'my_top'  : 0,
    'my_left' : 0,
    'static_pos_onresize': true[/B]
  });
});
 //-->
</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.07.10 15:20

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Wörter anderst ausgeben mit TypoScript

Bilderlaufleiste mal anderst

Datum anderst sortieren

IE interpretiert bei der Einbundung einer Flash das CSS anderst.

An Ansicht ausrichten, nur anderst

E-Mail:

Abonnieren Abbestellen