Vimeo Integration mixed with images

[tobiasvielmetter]

Hi again,

in order to not work on several topics in one post, I am starting another one here. You have mentioned in my prior post, that I would be able to integrate Vimeo via my own factory method.

Regarding vimeo integration:
You can display anything in the Gallery by providing your own factory methods:
https://github.com/blueimp/Gallery#additional-content-types

What I am trying to achieve is something where I have several images and videos in one container, that all should be displayable in a light box:

<section id="content">
<p class="artwork-slide" id="galleryimg_xyz"><a href="public/images/artworks/xyzfile.jpg" title="title here"><img id="artistimg_xyz" src="public/images/artworks/xyzfile.jpg" alt="title here" title="title here" class="img-responsive"></a></p>
<p class="artwork-slide artwork-video text-content" title="title here"><iframe src="http://player.vimeo.com/video/abcde?title=0&byline=0&portrait=0&color=FFF&autoplay=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<p class="artwork-slide" id="galleryimg_xyz3"><a href="public/images/artworks/xyzfile.jpg" title="title here"><img id="artistimg_xyz3" src="public/images/artworks/xyzfile.jpg" alt="title here" title="title here" class="img-responsive"></a></p>
</section>

I guess where I am stuck right now is how to add all these to the Gallery lightbox. With just the images I was able to all add them and initiate the Gallery with:

document.getElementById('content').onclick = function (event) {
    event = event || window.event;
    var currentindex, target = event.target || event.srcElement,
    link = target.src ? target.parentNode : target,
    options = {
        index: link, 
        event: event,
        hidePageScrollbars: true,
        disableScroll: true
    },
    links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};

After adding the textFactory (in an additional js file) as suggested I am now wondering how to integrate the content of the p.text-content in the order of appearence mixed in with the images. I tried wrapping the iframes in a-tags in order to be captured by the this.getElementsByTagName() function... well basically I have no idea how to achieve this. Any hint would be appreciated.

Thanks for your endurance :-)

Best,

T

[blueimp]

I've got a vimeo video integration plugin in my local Gallery code repository, will probably publish it very soon.

[tobiasvielmetter]

Ok, thanks, I guess I will wait for you to publish the vimeo integration then. Thanks again! T

[blueimp]

New version is online: https://github.com/blueimp/Gallery#vimeo

Please note that there is currently a bug which prevents playback on IE8 with the Vimeo integration. Specifically, the Vimeo iframe doesn't send postMessage requests for dynamically created iframes on IE8. I've added a JSFiddle to demonstrate the problem: http://jsfiddle.net/VjL8e/embedded/result/ You'll see console statements for the ready event in all other browsers, but in IE only for the first video.

[tobiasvielmetter]

Thanks so much, this is great!

I have now my vimeo videos mixed with my images like this:

<section id="content">
<p class="artwork-slide artwork-video" id="galleryimg_0"><a href="https://vimeo.com/75976293" title="title Video" type="text/html" data-vimeo="75976293"><iframe src="http://player.vimeo.com/video/75976293?title=0&byline=0&portrait=0&color=FFF&autoplay=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></a></p>
<p class="artwork-slide artwork-slide-margin" id="galleryimg_1"><a href="http://192.168.178.28/vielmetter.com_basis/public/images/artworks/26/1293617779_1.jpg" title="title here"><img id="artistimg_38994" src="http://192.168.178.28/vielmetter.com_basis/public/images/artworks/26/1293617779_1.jpg" alt="title here" title="title here" class="img-responsive"></a></p>
</section>

an then I call the light box gallery with:

$('#content').click(function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
    link = target.src ? target.parentNode : target,
    options = {
        index: link, 
        event: event,
        hidePageScrollbars: true,
        disableScroll: true
    },
    links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
});

Practically the vimeo integration works like this. Some things are a bit confusing though:

• The controls of the lightbox and the controls of the vimeo video are both there and they interfere each other. Using the vimeo play/pause button or jumping within the video does sometimes stop the video or switches back to the gallery play button, even when the video is still playing in the background.
• Sliding to another content does not automatically stop the video, which is kind of confusing.
• The space bar starts the slide show function as well as the video playback/pause function for vimeo
• I think, Instead of using a static poster image with a play button overlay, it would be nicer to have the vimeo player there, which shows a poster dynamically and delivers its own controls. since the controls of the vimeo video (in universal player mode) cannot be hidden (at least i think so), this would be more straight forward.

Anyhow, thanks for integrating vimeo!

Best,

T

[blueimp]

The reason why the Gallery shows the poster image and play button instead of the video has two reasons:

• Swipe functionality: Swipe events on the YouTube/Vimeo players won't reach the Gallery, as they are displayed in Iframes. Also not all browsers support detecting swipe events on HTML5 video players, none on Flash players.
• Performance: The YouTube and Vimeo JavaScript APIs are loaded on demand, on start of the first video. The iframes for each player are also only loaded on click of the play button.

Regarding the space bar, my suggestion for now is to disable the functionality for the Gallery by setting toggleSlideshowOnSpace to false when displaying YouTube/Vimeo videos.

[Ailson-Varelo]

how do I go to load an html file within this plugin, there is that possibility.