tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
400
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 10.11.11 13:55 #1
    Sprint Sprint ist offline Mitglied Platin
    Registriert seit
    Apr 2004
    Ort
    Die heimliche Hauptstadt des Bieres
    Beiträge
    579
    Hallo,

    bei der Seite, die ich zur Zeit bearbeite, wird der Inhalt zum Teil per Ajax nachgeladen. "Popups" sollten eigentlich per gettopup dargestellt werden, doch da der FF seit Version 5 damit massive Probleme hat, bin ich auf die Fancybox ausgewichen. Dabei habe ich nun das Problem, daß Links, die nachgeladen werden, nicht in der Fancybox öffnen, sondern im selben Fenster.

    So sieht der Quellcode aktuell aus:
    HTML-Code:
    <!DOCTYPE html>
<head>
	<meta charset="UTF-8" />
	<link rel="Stylesheet" type="text/css" href="css/styles.css" />
	<link href="http://fonts.googleapis.com/css?family=Cantarell|Reenie+Beanie" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/ajaxload.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>
		!window.jQuery && document.write('<script src="js/jquery-1.4.3.min.js"><\/script>');
	</script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<script type="text/javascript">
		$(document).ready(function() {
			$("#anamnese").fancybox({
				'width'				: 700,
				'height'			: 550,
				'transitionIn'		: 'fade',
				'transitionOut'		: 'fade',
				'type'				: 'iframe'
			});
			$("#contact").fancybox({
				'width'				: 400,
				'height'			: 550,
				'transitionIn'		: 'fade',
				'transitionOut'		: 'fade',
				'type'				: 'iframe'
			});
			$("#fancyprofil").fancybox({
				'width'				: 850,
				'height'			: 550,
				'transitionIn'		: 'fade',
				'transitionOut'		: 'fade',
				'type'				: 'iframe'
			});
		});
	</script>
	<script type="text/javascript">
	var slideshowFunktion=function(){
	  var currentPosition = 0;
	  var slideWidth = 810;
	  var slides = $('.slide');
	  var numberOfSlides = slides.length;
	
	  // Remove scrollbar in JS
	  $('#slidesContainer').css('overflow', 'hidden');
	
	  // Wrap all .slides with #slideInner div
	  slides
		.wrapAll('<div id="slideInner"></div>')
		// Float left to display horizontally, readjust .slides width
		.css({
		  'float' : 'left',
		  'width' : slideWidth
		});
	
	  // Set #slideInner width equal to total width of all slides
	  $('#slideInner').css('width', slideWidth * numberOfSlides);
	
	  // Insert controls in the DOM
	  $('#slideshow')
		.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
		.append('<span class="control" id="rightControl">Clicking moves right</span>');
	
	  // Hide left arrow control on first load
	  manageControls(currentPosition);
	
	  // Create event listeners for .controls clicks
	  $('.control')
		.bind('click', function(){
		// Determine new position
		currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
		
		// Hide / show controls
		manageControls(currentPosition);
		// Move slideInner using margin-left
		$('#slideInner').animate({
		  'marginLeft' : slideWidth*(-currentPosition)
		});
	  });
	
	  // manageControls: Hides and Shows controls depending on currentPosition
	  function manageControls(position){
		// Hide left arrow if position is first slide
		if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
		// Hide right arrow if position is last slide
		if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
	  }	
	};
	</script>
</head>

<body onload="getdata('start.html','cont');">
	<script type="text/javascript" src="js/wz_tooltip.js"></script>
	<div id="wrapper">
		<div id="contbox">
			<div id="cont">
			</div>
		</div>
		<div id="boxes">
			<a id="fancyprofil" href="profil.html"><div class="box" style="float: left; margin-right: 50px;"><img src="images/bt_profil.jpg" width="180" height="113" alt="" /><h5>Profil</h5></div></a>
			<a href="#" onclick="getdata('angebot.html','cont');"><div class="box" style="float: left; margin-right: 50px;"><img src="images/bt_preise.jpg" width="180" height="113" alt="" /><h5>Angebot/Preise</h5></div></a>
			<a href="#" onclick="getdata('tips.html','cont');"><div class="box" style="float: left;"><img src="images/bt_tips.jpg" width="180" height="113" alt="" /><h5>Tipps</h5></div></a>
			<a href="#" onclick="getdata('contact.html','cont');"><div class="box" style="float: right;"><img src="images/bt_contact.jpg" width="180" height="113" alt="" /><h5>Kontakt</h5></div></a>
		<div class="clear"></div>
		</div>
	</div>
</body>

</html>
    Besteht die Möglichkeit, die nachgeladenen Links auch mit Fancybox zu öffnen, oder muß ich mir was ganz neues einfallen lassen?

    Danke schonmal im Voraus,
    Sprint
     
    Think Different.
    Zitieren Zitieren
  2. 10.11.11 23:44 #2
    Avatar von para_noid
    para_noid para_noid ist offline Mitglied Gold
    Registriert seit
    Aug 2011
    Beiträge
    144
    Du hast das Fancybox-Zeugs innerhalb von

    Code :
    1

    $(document).ready(function() {

    Das Dokument ist einmalig ready wenn das DOM beim Seitenaufruf vollständig geladen ist.

    Grundsätzlich kannst du auf nachgeladene Elemente mittels live zugreifen. Inwieweit sich das auf die Fancybox anpassen lässt weiß ich aber nicht aus dem Stegreif. Vllt klappt es in Verbindung mit ready...

    Die zweite Möglichkeit wäre, auf das Nachladen bzw. die neuen Inhalte an sich zu reagieren, mit load.

    Ob die Varianten passen kann ich aber nicht garantieren.
     
    Für die Übereinstimmung von Niederschrift und Hirninhalt.
    Zitieren Zitieren
  3. 11.11.11 13:12 #3
    Sprint Sprint ist offline Mitglied Platin
    Registriert seit
    Apr 2004
    Ort
    Die heimliche Hauptstadt des Bieres
    Beiträge
    579
    Ich hab es mit beiden Varianten versucht, hat aber leider nicht hingehauen. Muß aber auch zugeben, daß ich nicht der große jquery Crack bin. Die einfachere Lösung war zum Schluß dann, das Nachladen mit Ajax rauszunehmen und konventionelle Seiten daraus zu machen. Und jetzt klappt's auch mit der Fancybox.
     
    Think Different.
    Zitieren Zitieren
  4. 11.11.11 17:05 #4
    fpvz fpvz ist offline Mitglied Silber
    Registriert seit
    Oct 2011
    Beiträge
    74
    Du kannst Fancybox auch über $.fancybox({...}) auffurufen. Sollte aber auch mit $(this). gehen...

    also
    Code javascript:
    1
2
3
4
5

    $('a').live("click",function(){
      $.fancybox();
      // ODER
      $(this).fancybox({});
}
     
    Zitieren Zitieren
« Pixelkreis... | Galerie ähnlich dem Bing von Microsoft »

Ähnliche Themen

  1. jQuery sortable funktioniert nicht bei nachgeladenem Inhalt
    Von iLu_is_a_loser im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 17.12.10, 18:16
  2. Inhalt einer Variable soll object .propertie aufrufen
    Von Der Sep im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 25.02.10, 19:16
  3. Exception bei Nachgeladenem Look-And-Feel
    Von Smily0412 im Forum Java
    Antworten: 0
    Letzter Beitrag: 14.02.08, 09:42
  4. Scrollproblem bei nachgeladenem Film
    Von addictedtomycamera im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 31.08.05, 19:01
  5. Inhalt per Link auf Hauptseite aufrufen
    Von Skyscraper im Forum PHP
    Antworten: 1
    Letzter Beitrag: 10.05.05, 10:56