✔ Fancybox & Inline-Content

T

thigle

Mitglied
Hallo.

Ich habe nun das Fancybox-Plugin für Wordpress deaktiviert und nutze das Orginal. Mit dem Plugin gab es nur Einschränkungen. Konkret habe ich nun folgendes Problem. Es geht um diese Seite. So, wie auf der Fancybox-Homepage beschrieben, verwende ich folgenden Code für 'Inline-Content' (Höhe & Breite sollen sich scheinbar automatisch anpassen).

Code: 
jQuery("a.inline").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
                        });


Konkretes Beispiel: Das 1. Video auf der Seite. Hier verwende ich folgenden Code:

Code: 
<a class=" fancybox inline" href="#testube"><img src="/wp-content/uploads/2010/02/sreet-spirit.jpg" alt="" title="Fade Out" width="120" height="90" align="left" /> </a>
<div style="display:none" id="testube">
[dailymotion]http://www.dailymotion.com/video/x1be9v_radiohead-street-spirit-fade-out_music[/dailymotion]
</div>


Nur, leider funktioniert das Ganze nicht. Was hab' ich da wieder falsch gemacht?

LG
Mart
 
Zuletzt bearbeitet:
Hi,

vielleicht liegt's an dem Leerzeichen im class-Attribut vor dem ersten Klassenbezeichner fancybox.

mfg Maik
 
Hallo Maik,

nein, daran lag es nicht, habe es ausgebessert. Ausserdem noch


Code: 
'autoDimensions'        : 'true'


zum Code hinzugefügt. Aber leider tut sich beim 1. Video nichts.

Gebe ich z.b.

Code: 
<a class="fancybox inline" href="#testube"><img src="/wp-content/uploads/2010/02/sreet-spirit.jpg" alt="" title="Fade Out" width="120" height="90" align="left" /></a>
<div style="display:none" id="testube">
[dailymotion]http://www.dailymotion.com/video/x1be9v_radiohead-street-spirit-fade-out_music[/dailymotion]
</div>


ein, wird als Inline-Content das Bild angezeigt, nicht das Video. Und verwende ich 'fancybox iframe', wird die Seite selbst in nem Iframe aufgemacht, nicht das Video. Irgendwie will er nicht zur 'id='testube' finden...

Einzig das hier hat funktioniert, ist aber keine Lösung.

LG
Mart
 
Zuletzt bearbeitet:
Hi,

das Problem ist das display: none im "inline-Container".

Packe die "inline-Container" stattdessen in ein übergeordnetes Element und verstecke dieses mittels der CSS-Eigenschaft display.
Code: 
<div style="display: none;">
  <div id="testube">
    [dailymotion]http://www.dailymotion.com/video/x1be9v_radiohead-street-spirit-fade-out_music[/dailymotion]
  </div>
  <div id="testube2">
    [dailymotion]http://www.dailymotion.com/video/x1be9v_radiohead-street-spirit-fade-out_music[/dailymotion]
  </div>
  <!-- ... -->
</div>

Der zugehörige JS-Abschnitt (ohne type-Eigenschaft):
Code: 
jQuery("a.inline").fancybox({
  'titlePosition'   : 'inside',
  'transitionIn'    : 'none',
  'transitionOut'   : 'none',
  'autoDimensions'  : 'true'
});

Weiterhin müssen die relevanten Links noch mit der Klasse inline ausgezeichnet werden.

Ciao
Quaese
 
Hi Quaese,

erst mal ein grosses Dankeschön, es hat funktioniert! Aber - Opera (10.50b) macht Probleme und öffnet die Fenster nicht so recht. Hat sich irgendwo der Fehlerteufel eingeschlichen? FF, Chrome & IE (jeweils aktuelle Versionen) kommen damit zurecht. Was muss ich tun?

Edit: Das gilt nicht nur für 'fancybox video',


Code: 
jQuery("a.video").fancybox({
                                'titlePosition'		: 'outside',
				'autoDimensions'        : 'true',
                                'padding'               : '0',
                                'centerOnScroll'        : 'true',
                                'imageScale'            : 'false',
                                'transitionIn'          : 'none',
                                'transitionOut'         : 'none',
                                
                                });


sondern auch für 'fancybox'.


Code: 
jQuery("a.fancybox").fancybox({
			
                        'imageScale'            : 'false',
			'padding'               : '0',
                        'zoomOpacity'           : 'true',
			'zoomSpeedIn'           : '500',
			'zoomSpeedOut'          : '500',
			'zoomSpeedChange'       : '300',
		        'overlayShow'           : 'true',
			'overlayColor'          : "#666666",
			'overlayOpacity'        : '0.3',
			'enableEscapeButton'    : 'true',
			'showCloseButton'       : 'true',
			'hideOnOverlayClick'    : 'true',
			'hideOnContentClick'    : 'false',
                        'frameWidth'            :  '560',
			'frameHeight'           :  '427',
                        'callbackOnStart'       : 'null',
			'callbackOnShow'        : 'null',
			'callbackOnClose'       : 'null',
			'centerOnScroll'        : 'true'
	                
                        });


Höhe und Weite scheint es für das Fenster in beiden Fällen nicht zu geben. Hat der folgende Code ganz am Anfang der Seite etwas mit dem Fehlverhalten unter Opera zu tun? Oder ganz was anderes....


Code: 
<script type="text/javascript"> 
 
	jQuery.noConflict();
 
	jQuery(function(){
 
				jQuery.fn.getTitle = function() {
			var arr = jQuery("a.fancybox");
			jQuery.each(arr, function() {
				var title = jQuery(this).children("img").attr("title");
				jQuery(this).attr('title',title);
			})
		}
 
		// Supported file extensions
		var thumbnails = 'a:has(img)[href$=".bmp"],a:has(img)[href$=".gif"],a:has(img)[href$=".jpg"],a:has(img)[href$=".jpeg"],a:has(img)[href$=".png"],a:has(img)[href$=".BMP"],a:has(img)[href$=".GIF"],a:has(img)[href$=".JPG"],a:has(img)[href$=".JPEG"],a:has(img)[href$=".PNG"]';
 
	
		jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();


LG,
Mart
 
Zuletzt bearbeitet:
Hi,

du musst den Eigenschaften die richtigen Datentypen zuweisen. So erwartet padding zum Beispiel einen Integerwert, keinen String.

Code: 
jQuery("a.video").fancybox({
  'titlePosition'   : 'outside',
  'transitionIn'    : 'none',
  'transitionOut'   : 'none',
  'imageScale'      : false,
  'padding'         : 0,
  'centerOnScroll'  : true,
  'autoDimensions'  : true
});

Ciao
Quaese
 
Herzlichen Dank Quaese & Maik,
jetzt haut es auch im (ist ja auch gut so) empfindlichen Opera hin! Dachte, man müsse im JS _all_ diese Werte in ein ' ....' setzen. Habe auch noch den pompösen Anfang des Codes durch diesen hier ersetzt


jQuery(document).ready(function() {
jQuery("a:has(img)").fancybox();
Zum Vergrößern anklicken....


So erkennt er meine Galerie ja ebenfalls. Jedes Problem wurde hier auf tutorials.de bisher gelöst, ich bin wirklich froh dieses Forum gefunden zu haben.

LG
Mart
 
Zuletzt bearbeitet:
Leider muss ich mich nochmal melden. Irgendwas spinnt da unter Opera noch rum. Manche Videos öffnen sich, manche nicht, manche nur nach mehrmaligem klicken. Ausserdem musste ich den 'Anfang' doch wieder aufblähen, da mir mit


Code: 
jQuery(document).ready(function() {
jQuery("a:has(img)").fancybox();


allein kein 'Title' mehr angezeigt wurde. So sieht der Code nun aus:


Code: 
<script type="text/javascript"> 
jQuery(document).ready(function() {

                                      jQuery.fn.getTitle = function() {
			              var arr = jQuery("a.fancybox");
			              jQuery.each(arr, function() {
				      var title = jQuery(this).children("img").attr("title");
				      jQuery(this).attr('title',title);
	})
  }
    var thumbnails = 'a:has(img)[href$=".bmp"],a:has(img)[href$=".gif"],a:has(img)[href$=".jpg"],a:has(img)[href$=".jpeg"],a:has(img)[href$=".png"],a:has(img)[href$=".BMP"],a:has(img)[href$=".GIF"],a:has(img)[href$=".JPG"],a:has(img)[href$=".JPEG"],a:has(img)[href$=".PNG"]';
 
	
		jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();
                                

jQuery("a.fancybox").fancybox({
      'imageScale':false, 'padding':0, 'overlayShow':true, 'overlayColor':'#666666', 'opacity':true, 'overlayOpacity':0.3, 'enableEscapeButton':true,
 'autoDimensions':true, 'showCloseButton':true, 'hideOnOverlayClick':true, 'hideOnContentClick':false, 'centerOnScroll':true, 'transitionIn':'elastic', 'transitionOut':'elastic', 'titlePosition':'outside'          

             });


jQuery("a.iframe").fancybox({
      'width':'75%', 'height':'75%', 'autoScale': false, 'centerOnScroll': true, 'transitionIn':'none', 'transitionOut':'none', 'padding':0,
    'titleShow':false, 'type':'iframe'

             });


jQuery("a.inline").fancybox({
        'titlePosition':'inside','transitionIn':'none', 'transitionOut':'none', 'autoDimensions':true, 'type':'inline'
            
            });

})
 
</script>


Warum lassen sich manche Videos nicht öffnen (nur das schwarze x ist zu sehen) ? Irgendwie kommt mir vor, ich müsste dem Fenster 'mehr Zeit zum laden' geben....



EDIT: Hat sich erledigt. Ein Wordpress Plugin (XHTML-Video Plugin) hatte schuld.

LG
Mart
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück