Comments (13)
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.
from xzoom.
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.
from xzoom.
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>
from xzoom.
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).
from xzoom.
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.
from xzoom.
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.)
from xzoom.
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);
from xzoom.
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.
from xzoom.
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);
from xzoom.
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.
from xzoom.
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.
from xzoom.
I am unable to get the same thing done with this shared code. Could you please guide me
from xzoom.
Probably i should add this as an example to https://github.com/payalord/xzoom-sandbox later today.
from xzoom.
Related Issues (20)
- there is a dependency with foundation js? HOT 1
- Please Update this to work with JQuery v3.1 or later. HOT 2
- While i'm click the first time small preview it the there is that possible to hide this in mobile devices. HOT 3
- xZoom Lens is not adjusting in small size of image HOT 9
- xZoom lens in mobile HOT 5
- how can I make the zoom result image bigger than the container HOT 2
- rootOutput HOT 2
- Capturing current zoom scale HOT 1
- Page Not Scrolling HOT 1
- Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../images/xloading.gif' in 'C:\Users\fhsna\Projetos de software\lojafinal\loja\node_modules\xzoom\dist' HOT 3
- Add xzoom event on dynamic images HOT 2
- Is it possible to use it with Vue.js? HOT 10
- php laravel HOT 2
- Thumbnail image click not working HOT 1
- Lens is not working - overlapping lens frame on hover HOT 1
- Question - xzoom container size adjustability HOT 1
- i made the thumbnail in left side of the image like amazon but its throwing error in js HOT 2
- Zoom aspect ratio changes when adding image of the same size as of the demo car images HOT 2
- Either cursor is not working or Popup image window position is not right HOT 2
- Perfect plugin ,Why no arrows button HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xzoom.