Fancybox Bilder und Video in derselben Galerie

Ich bin mit fancy box für meine Pop-up-Galerie, aber ich habe ein Problem mit. Ich möchte Bilder und Videos in derselben Galerie haben. Ich habe ein Thumbnail, das verschiedene Arbeiten in meinem Portfolio zeigt, und wir sind eine Design- und Videogesellschaft, daher ist es wichtig, dass ich beides in derselben Pop-Up-Galerie machen kann. Hat jemand anderes schon einmal mit diesem Problem zu tun? Ich könnte mir vorstellen, dass es ziemlich üblich ist, dass Leute das machen wollen.Fancybox Bilder und Video in derselben Galerie

Hier ist meine Auszeichnungs ... ich das gleiche Attribut rel haben, so dass sie in der gleichen Galerie sind, aber ich bin ein anderes Skript aufrufen, so dass der Typ richtig eingestellt werden kann.

$("a#brianguehring").fancybox(); 

$("a#brianguehring-video").fancybox({ 
    'type'   : 'swf', 
    'transitionIn'  : 'none', 
    'transitionOut'  : 'none', 
}); 

<span> 
<a class="grouped_elements icon_camera" rel="group-brian" id="brianguehring" title="Brian Guehring Website" href="images/portfolio/brianguehring-one.png"></a> 
</span> 

<span> 
<a class="grouped_elements" rel="group-brian" id="brianguehring-video" title="Pasquale Vitello'Showreel 2010" href="http://vimeo.com/24081323">&nbsp;</a> 
</span>

Quelle

2012-03-29 user1301091

welche version von fancybox? Ich denke, Ihr Ansatz richtig ist aber könnten Sie einige Elemente in Ihrem Skript fehlt, zum Beispiel glaube ich nicht, sollten Sie setzen '‚Typ‘:‚swf'' für Ihre Videos, aber '‘ statt iframe''. Möglicherweise müssen Sie auch, wie die in dem 'embed' Code von Vimeo-Website bereitgestellt, um die URL zu ändern, wie' http://player.vimeo.com/video/24081323?title=0 & rechte Seite = 0 & Portrait = 0 'usw. Als letztes versuchen Sie, Klassen anstelle von ID zu verwenden, damit Sie denselben Code für mehrere Elemente in Ihrem Code verwenden können. – JFK

Hier habe ich es funktioniert. Ich nehme an, Sie möchten das Bild und das Video in der gleichen Gruppe. Ich legte das Arbeitsbeispiel hier auf JS Fiddle - http://jsfiddle.net/4pAQz/1/

Ihr JS Anruf würde so aussehen. Und alles muss in einem Anruf sein.

$(document).ready(function(e) { 
$("a[rel=example_group]").fancybox({ 
    'transitionIn'  : 'none', 
    'transitionOut'  : 'none', 
    'titlePosition'  : 'over', 
    'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) { 
     return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + '/' + currentArray.length + ' ' + title + '</span>'; 
    } 
}); 
});

Ihre HTML würde wie folgt aussehen: HINWEIS: Beachten Sie, dass die href für die Vimeo-Player die player.vimeo.com/video/YourIDHere ist. Keine Notwendigkeit für den SWF-Code. Es funktioniert einfach. Sie müssen auch beide Anker rel = "" denselben Namen haben, damit die Objekte in die gleiche Gruppe eingefügt werden.

<div> 
<a rel="example_group" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg"> 
<img alt="" src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg" /> 
</a> 
<a rel="example_group" title="Title of video here" class="various iframe" href="http://player.vimeo.com/video/24081323?title=0&amp;byline=0&amp;portrait=0"> 
<img alt="" src="http://farm3.static.flickr.com/2591/4135665747_3091966c91_m.jpg" /> 
</a></div>

Quelle

2012-03-29 15:29:17 ClosDesign

Nachdem ich 'type': 'swf' hinzugefügt habe, erhalte ich immer noch ein leeres Video, das auftaucht und nicht wirklich abgespielt wird. Gibt es einen Grund dafür? http://2012.delineamultimedia.com/ -> Ich arbeite mit den Top 2 Bildern. – user1301091

Der JS Fiddle Link, den du gesendet hast, funktioniert nicht für mich. Ich habe versucht, meinen Cache zu löschen, aber das hat es nicht geschafft. – user1301091

hmm JS Fiddle Link es selbst funktioniert nicht? oder das Beispiel funktioniert nicht. Ich habe es gerade ausprobiert und es hat funktioniert. Es sieht so aus, als ob dein Beispiel auf deiner Demo-Site funktioniert. Es gibt ein Problem mit dem Über-Punkt, da der Pfeil links die Wiedergabetaste für die Vimeo-Wiedergabetaste abdeckt. Vielleicht möchten Sie einige der CSS für den Bereich des Pfeils der FancyBox übernehmen. – ClosDesign

Fancybox Bilder und Video in derselben Galerie

Antwort

Verwandte Themen