✔ Fancybox & Inline-Content

thigle · 18. Februar 2010

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

Maik · 18. Februar 2010

Hi,

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

mfg Maik

thigle · 18. Februar 2010

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

Quaese · 18. Februar 2010

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

thigle · 18. Februar 2010

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

Quaese · 18. Februar 2010

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

Maik · 18. Februar 2010

Siehe hierzu auch die Übersicht der verfügbaren Optionen ("Available options"), und die korrekte Syntax ihrer jeweiligen Datentypen.

http://fancybox.net/api

mfg Maik

thigle · 18. Februar 2010

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();

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

thigle · 18. Februar 2010

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

✔ Fancybox & Inline-Content

thigle

Mitglied

Maik

thigle

Mitglied

Quaese

Moderator

thigle

Mitglied

Quaese

Moderator

Maik

thigle

Mitglied

thigle

Mitglied

Neue Beiträge