✔ Fancybox aus nachgeladenem Inhalt aufrufen

Sprint

Sprint

Erfahrenes Mitglied
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: 
<!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
 
Du hast das Fancybox-Zeugs innerhalb von

Code: 
$(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.
 
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.
 
Du kannst Fancybox auch über $.fancybox({...}) auffurufen. Sollte aber auch mit $(this). gehen...

also
Javascript: 
$('a').live("click",function(){
      $.fancybox();
      // ODER
      $(this).fancybox({});
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück