Videos / Iframe

[psweeting1]

I'm aware that xZoom is for zooming into images, but is possible to use xZoom to pull in a video source and display it in the main image section? I'm currently using the gallery and when selecting a gallery thumb nail image I want to pull video which I can play (not zoom of course).

<!-- main image source -->
<img class="xzoom" id="main_image" src="mid-image.jpg" xoriginal="high-image.jpg">

<!-- normal thumbnail image in gallery -->
<div><a href="high-image.jpg"><img class="xzoom-gallery" src="low-image.jpg" xpreview="preview-image.jpg"></a></div>

<!-- Youtube source to be displayed in main image source -->
<div><a href="youtube-link"><iframe class="xzoom-gallery" src="thumb-nail.jpg"></a></div>

This is just an idea above, but if it isn't possible, please feel free to just close this issue.

[payalord]

I think it is probably possible, but not easy task and cool idea to add video support as native option in the future releases.

I'll try to find a work around with xZoom API to implement video. Will let you know a little later.

[psweeting1]

Great, thank you. Yeah I think if it had native video support such as youtube videos as well as HTML5 videos, that would be a really neat feature to include. I'm using Fancybox so I'm thinking maybe I can't play a video through the main image source, instead use a preview image of some sort in the main image source area and then open the video in Fancybox maybe? But I'd rather have the user not play it through Fancybox if I can help it.

[payalord]

I was able to use title/caption functionality of xZoom to output video on the page with xZoom. Or another words, title/caption container comes on top of zoomed window inside it and has it's own css class by the way( so you can style it as you wish ) and as title/caption you can use any text or html. So i thought why not to use html code of video then. The only thing left now is to setup proper mouse leave event so to make it close zoom if there is not a video. While with video case need to think how would be better to open zoom-video window and close.

(function ($) {
    $(document).ready(function() {
        var xzoom = $('.xzoom, .xzoom-gallery').xzoom({position: "inside", title: true});
        xzoom.eventleave = function(element) {
          //For video we don't need to close on mouse leave, so overwrited this
          console.log('Zoom Close');
        }
    });
})(jQuery);

<!-- main image source -->
<img class="xzoom" id="main_image" src="mid-image.jpg" xoriginal="high-image.jpg">

<!-- Youtube source to be displayed in main image source via caption/title container  -->
<div>
    <a href="high-image.jpg">
        <img class="xzoom-gallery" src="low-image.jpg" xpreview="preview-image.jpg" xtitle='<iframe width="420" height="315" src="https://www.youtube.com/embed/DHTpmG41kOs"></iframe>'/>
    </a>
</div>

[psweeting1]

Awesome, that's a nice idea and it works pretty well, the concept is there. But yes if it isn't a video it doesn't close properly. I feel like it's almost there though, needs maybe a type of condition to pick up if it's a video or not (easier said than done though).

[payalord]

Ok, lets say the video will be always the last one in the list. Then we can use the next JS code to determine - are we on the last element right now and not close zoom on mouseleave. In all other cases zoom will be closed:

(function ($) {
    $(document).ready(function() {
        var xzoom = $('.xzoom, .xzoom-gallery').xzoom({position: "inside", title: true});
        var L = $('.xzoom-gallery').length;
        
        xzoom.eventleave = function(element) {
            //Don't close only on last element
            var index = xzoom.gallery().index;

            if (index < L - 1) element.xon('mouseleave', function(event){
                xzoom.closezoom(event);
            });
        }
    });
})(jQuery);

In case on other than last position for the video we can use index and create condition when to close or not like this example.

[psweeting1]

This is great thank you, I'm sure this is going to be really handy for someone wanting use videos like myself. The only problem is what if there was more than one video? I'm pulling in images and videos from a database, some of the web pages that are using xZoom will have images and videos and some wont so I have different video conditions I guess. (Sorry I don't think I mentioned this in my last couple of messages.)

[payalord]

In this case, I think we can check does the xtitle attribute of current element have "<iframe" string pattern and then decide to close or not xZoom:

(function ($) {
    $(document).ready(function() {
        var xzoom = $('.xzoom, .xzoom-gallery').xzoom({position: "inside", title: true});

        xzoom.eventleave = function(element) {
            //Don't close if video
            var index = xzoom.gallery().index;
            var title = $('.xzoom-gallery').eq(index).attr('xtitle');
            if (!title || title.indexOf('<iframe') == -1) element.xon('mouseleave', function(event){
                xzoom.closezoom(event);
            });
        }
    });
})(jQuery);

[psweeting1]

Ah nice, but I can't seem to get this to work, when my mouse is off the video disappears.

<img class="xzoom" id="xzoom" src="images/gallery/preview/01_b_car.jpg" xoriginal="images/gallery/original/01_b_car.jpg" />
          <div class="xzoom-thumbs">
            <a href="images/gallery/original/01_b_car.jpg"><img class="xzoom-gallery" width="80" src="images/gallery/thumbs/01_b_car.jpg"  xpreview="images/gallery/preview/01_b_car.jpg" title="The description goes here"></a>
            <a href="images/gallery/original/02_o_car.jpg"><img class="xzoom-gallery" width="80" src="images/gallery/preview/02_o_car.jpg" title="The description goes here"></a>
            <a href="images/gallery/original/03_r_car.jpg"><img class="xzoom-gallery" width="80" src="images/gallery/preview/03_r_car.jpg" title="The description goes here"></a>
            <a href="images/gallery/original/04_g_car.jpg"><img class="xzoom-gallery" width="80" src="images/gallery/preview/04_g_car.jpg" title='<iframe width="420" height="315" src="https://www.youtube.com/embed/DHTpmG41kOs"></iframe>'/></a>
            <a href="images/gallery/original/04_g_car.jpg"><img class="xzoom-gallery" width="80" src="images/gallery/preview/04_g_car.jpg" title='<iframe width="420" height="315" src="https://www.youtube.com/embed/DHTpmG41kOs"></iframe>'/></a>
          </div>

(function ($) {
    $(document).ready(function() {
        var xzoom = $('.xzoom, .xzoom-gallery').xzoom({position: "inside", title: true});

        xzoom.eventleave = function(element) {
            //Don't close if video
            var index = xzoom.gallery().index;
            var title = $('.xzoom-gallery').eq(index).attr('xtitle');
            if (!title || title.indexOf('<iframe') == -1) element.xon('mouseleave', function(event){
                xzoom.closezoom(event);
            });
        }
    });
})(jQuery);

Above is all my script, that I used to test it.

[payalord]

Ah, looks like instead of xtitle you are using regular title attribute. In this case JS part must be:

(function ($) {
    $(document).ready(function() {
        var xzoom = $('.xzoom, .xzoom-gallery').xzoom({position: "inside", title: true});

        xzoom.eventleave = function(element) {
            //Don't close if video
            var index = xzoom.gallery().index;
            var title = $('.xzoom-gallery').eq(index).attr('title');
            if (!title || title.indexOf('<iframe') == -1) element.xon('mouseleave', function(event){
                xzoom.closezoom(event);
            });
        }
    });
})(jQuery);

[payalord]

The reason why there is exist xtitle is only when user don't want to popup text on mouse hover on the image as regular title do, but still wants to show the caption when zoom is opened.

[psweeting1]

Doh! That's me switching computers and projects. Having xtitle makes total sense.

PERFECT!!! Thank you for your time and help, this is what I'm after.

[ablyanant]

I am unable to get the same thing done with this shared code. Could you please guide me

[payalord]

Probably i should add this as an example to https://github.com/payalord/xzoom-sandbox later today.