Hello stackoverflow I need help, I've got 300px width blocks like in this link: http://vnjs.net/www/project/freewall/example/demo-filter.html and try to resize window until mobile, blocks vanish... How can we solve this problem? I was surfing all over the Internet and I can't find problem here is what values I used:
jQuery(function() {
jQuery(".free-wall").each(function() {
var wall = new freewall(this);;
wall.reset({
selector: '.size320',
animate: true,
cellW: 200,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
wall.fitWidth();
});
});
Related
I'm building a fancybox modal(v3) with inside it two owl carousels(v2). It's used as a product quick view function.
The problem I'm facing is that the second carousel (used for the thumbs) doesn't have core css styles applied, while the carousel is actually initialized.
So the two carousels are initialized but one just won't use styling from the actual owl-carousel.css stylesheet.
I'm completly confused.
I've created a fiddle here with the actual problem.
My html
<div id="quick-shop-modal" class="cd-quick-view" style="display:none;">
<div class="product-images-slider">
<div class="slider-container"></div>
<div class="thumbnail-slider-container"></div>
</div>
</div>
Quick shop
Jquery
$(document).ready(function() {
$(".quick_view").on('click', function() {
var url = 'some-url'
$.fancybox.open({
touch: false,
src: '#quick-shop-modal',
type: 'inline',
beforeShow: function() {
quick_shop(url)
}
});
});
});
function quick_shop(url) {
var $modal = $('#quick-shop-modal');
$.getJSON(url, function(data) {
$modal.data('product', data.product);
var product = data.product;
var images = '';
$.each(product.images, function(index, image_id) {
images += '<div class="item"><div class="content"><img src="https://via.placeholder.com/350x150" class="img-responsive"></div></div>';
});
$modal.find('.slider-container').html('<div id="slider" class="slider owl-carousel">' + images + '</div>')
$modal.find('.thumbnail-slider-container').html('<div id="thumbnailSlider" class="thumbnail-slider">' + images + '</div>')
$modal.find('.slider').owlCarousel({
loop: false,
nav: false,
items: 1
}).on('changed.owl.carousel', function(e) {
$modal.find('.thumbnail-slider').trigger('to.owl.carousel', [e.item.index, 300, true]);
});
$modal.find('.thumbnail-slider').owlCarousel({
loop: false,
margin: 10,
nav: false,
items: 3,
stagePadding: 40
}).on('click', '.owl-item', function() {
$modal.find('.slider').trigger('to.owl.carousel', [$(this).index(), 300, true]);
}).on('changed.owl.carousel', function(e) {
$modal.find('.slider').trigger('to.owl.carousel', [e.item.index, 300, true]);
});
});
}
1) I do not think that anyone would be able to help you without seeing live demo and probably no-one will spend time to create it for you.
2) From you code, it seems that changing one slider would trigger change callback on both sliders. IF that is true, than that could cause the issues.
3) It is not possible to tell what role of fancybox is here just by looking at those pieces of code (e.g., what is webdinge_quick_shop doing; if #webdinge-quick-shop-modal exists, then fancybox should work fine)
Edit & Answer to updated question -
Your 2nd own carousel is missing owl-carousel classname, simply add .owl-carousel to .thumbnail-slider element, see http://jsfiddle.net/zLfnmrx1/
when you check the elevateZoom on Mobile, the page scroll option does not work when we click on the image although we off the zoom option. which is a trouble.
We want to disable zoom option for Mobile devices or responsive sizes.
Is there any value or variable we can use to ONLY disable Zoom effect completely for mobile devices?
Can anyone suggest how to do this or if someone did it for their theme in past?
ElevateZoom API you can get:
var ezApi = $('#primaryImage').data('elevateZoom');
In order to enable/disable zoom you should use "changeState" method
ezApi.changeState('enable'); // or disable
To detect change media query breakpoint you can use matchMedia
var mq = window.matchMedia('(min-width: 768px)');
mq.addListener((b) => {
if (b.matches) {
// do something for screens > 768px, for example turn on zoom
ezApi.changeState('enable');
} else {
// do something for screens < 768px, for example turn off zoom
ezApi.changeState('disable');
}
});
Try Disable/Comment Touch events in jquery.elevatezoom.js or jquery.elevateZoom version min (my version: 3.0.8):
//touch events
/* self.$elem.bind('touchmove', function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
self.setPosition(touch);
});
self.zoomContainer.bind('touchmove', function(e){
if(self.options.zoomType == "inner") {
self.showHideWindow("show");
}
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
self.setPosition(touch);
});
self.zoomContainer.bind('touchend', function(e){
self.showHideWindow("hide");
if(self.options.showLens) {self.showHideLens("hide");}
if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
});
self.$elem.bind('touchend', function(e){
self.showHideWindow("hide");
if(self.options.showLens) {self.showHideLens("hide");}
if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
});
if(self.options.showLens) {
self.zoomLens.bind('touchmove', function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
self.setPosition(touch);
}); */
try to
var image = $('#primaryImage');
var zoomConfig = {};
var zoomActive = false;
image.on('click', function(){
zoomActive = !zoomActive;
if(zoomActive)
{
image.elevateZoom(zoomConfig);//initialise zoom
}
else
{
$.removeData(image, 'elevateZoom');//remove zoom instance from image
$('.zoomContainer').remove();// remove zoom container from DOM
}
});
Other option
$('#primaryImage').click(function(){
if($(window).width()>768){
$(this).elevateZoom({
zoomWindowPosition:1,
zoomWindowOffetx: 5,
zoomWindowWidth:$(this).width(),
zoomWindowHeight:$(this).height(),
});
}
else{
$.removeData($(this), 'elevateZoom');//remove zoom instance from image
$('.zoomContainer').remove(); // remove zoom container from DOM
return false;
}
});
https://github.com/elevateweb/elevatezoom/issues/8
Best Answer I've found and easiest from here: https://github.com/elevateweb/elevatezoom/issues/102#issuecomment-255942134
#media(max-width: $tablet-max) { /* The image that has zoom on it */ .product__img { pointer-events: none; } }
In js plugin add this option
touchEnabled: false,
With this option in desktop PC image will be zoom and in mobile device, zoom will be disabled.
Or you could just hide .zoomContainer using media queries?
For example:
#media screen and (max-width: 425px) {
.zoomContainer {
display: none;
}
}
I was having the same issue so I edit my js file and put a if, else condition on it. This condition will act similar as CSS media query.
//JQUERY CODE
if (window.matchMedia('(min-width: 500px)').matches) {
jQuery.fn.elevateZoom.options = {
zoomEnabled: true
}
}else{
jQuery.fn.elevateZoom.options = {
zoomEnabled: false
}
}
If you tried everything and nothing works for you, try a CSS cover (it works perfect for me)
In your HTML:
<figure class="product-main-image">
<div class="product-zoom-cover"> </div>
<img id="product-zoom" src="............">
</figure>
In your CSS:
.product-zoom-cover{
display: none;
}
#media screen and (max-width: 768px) {
.product-main-image{
position: relative;
}
.product-zoom-cover{
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 48;
}
}
Success to all and good code!
For those who still come from search engines to this topic, The best way to manage every option (like enable / disable on mobile) in different sizes is using plugin`s documentation!
Here we go:
First you have to manage global options for elevatezoom:
jQuery('.mainproimg').ezPlus({
easing: true,
lensFadeIn: 200,
lensFadeOut: 200,
zoomWindowFadeIn: 200,
zoomWindowFadeOut: 200,
zoomWindowPosition: 11,
zoomWindowWidth: 400,
zoomWindowHeight: 400,
borderSize:1,
responsive: true
});
Then add the following code:
respond: [
{
range: '320-991',
enabled: false,
showLens: false
}
]
So, the whole code would be:
jQuery('.mainproimg').ezPlus({
easing: true,
lensFadeIn: 200,
lensFadeOut: 200,
zoomWindowFadeIn: 200,
zoomWindowFadeOut: 200,
zoomWindowPosition: 11,
zoomWindowWidth: 400,
zoomWindowHeight: 402,
zoomWindowOffsetY: -8,
borderSize:1,
responsive: true,
enabled: true,
showLens: true,
respond: [
{
range: '320-991',
enabled: false,
showLens: false
}
]
});
In this case, elevatezoom will be disabled on devices that has 320px to 991px width.
Of course you can add more ranges and manage plugin options for each breakpoint.
unbind touchmove from element
$('#img-product-zoom').unbind('touchmove');
and then hide the container of zoom area
$('.ZoomContainer').hide();
use this code to detect mobile phone
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
///here put your code
}
Here's a link to the plugin:
Website
I tried all the options in the documentation as well as answers in SO but none worked for me.
My problem is simple I think. I just need to adjust the height of my fancybox relative to the height of my <div> that is inside it.
here's my code:
$("#home #_prcButtons input[type='button']").each(function() {
$('#' + this.id).click(function() {
var getId = (this.id === '_proceed') ?
$.fancybox({ href: '#questionToEnter', helpers: { overlay: { locked: false, css: { 'background' : 'rgba(58, 42, 45, 0.95)' } } }, openEffect: 'fade', closeEffect: 'fade'}) : window.location.href = "https://google.com";
});
});
Here's the css of my div:
#questionToEnter { display:none; width:450px; margin:auto; background:#f7d4d4; padding:10px;}
Here's how it looks:
As you can see, the fancybox won't adjust to the height of my div.
Please help me.
Cheers!
Solved my problem!
I realized that my <div> appears less than 100px in height.
Adjusting the minHeight did the trick:
minHeight: '60';
Cheers!
You can specify it using "height" attribute in fancybox. See this example:
<script type="text/javascript">
$(document).ready(function () {
$('.fancybox').fancybox({
type: "iframe",
padding: 0,
fitToView: false,
autoSize: false,
width: 718,
height: 503
});
});
</script>
I'm using this javascript/jQuery to open a dialog, however when I scroll down on the page and open another window after closing the first one, the window will open at my selection position, plus the position I scrolled down. When I try to move it around, it will keep jumping down, causing a very annoying result.
function showDialog(url) {
dialogFrame = $('<iframe style="width:100% !important;" frameborder="0" id="Dialog" src="' + url + '" />').dialog({
autoOpen: true,
height: 500,
width: 1000,
title: 'myWindow',
resizable: false,
modal: true,
position: {
my: "center",
at: "center",
of: window
}
});
}
How can I prevent this behavior? It's probably the position : { } but what should it be?
I had the same issues with a jQuery UI dialog when the body had the CSS property position:relative;. You might want to check if that is the case.
In my case I could not remove the position:relative; so I decided to override the top value and use a fixed positioning:
$(".dialogFrame").dialog({
// ...
open: function(event, ui) {
$(event.target).parent().css('position', 'fixed');
$(event.target).parent().css('top', '20px');
}
// ...
});
The script could be optimized by calculating the effective center of the screen.
I use Sorgilla jcarousel, just wondering can anyone spot something obvious as to why only in Google Chrome, when I zoom in or out, not at 100% the positioning of the carousels are completely off.
Im not sure what specific code to post but here are the 2 carousels being called. both have the same problem.
Im assuming its something to do with the pixels not adjusting for resize or something, but it isnt an issue in other browsers.
Any help would be great thanks.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
start: 2, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:7
});
});
jQuery(document).ready(function() {
jQuery('#top-carousel').jcarousel({
start: 2, // Configuration goes here
wrap: "circular",
auto: 12,
scroll: 1
});
});
</script>
You can use the workaround that works fine for me.
This is not the best solution, you can definitely try to improve it.
Here is how you can change your code
jQuery(document).ready(function() {
var animation = $.browser.safari ? null : "normal";
jQuery('#mycarousel').jcarousel({
start: 2, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:7,
animation: animation,
itemLoadCallback: {
onBeforeAnimation: function (instance) {
if ($.browser.safari) {
var itemPos = instance.first;
var pageWidth = instance.container.width();
var expectedItemPos = pageWidth * (1 - itemPos);
instance.container.prevObject.animate({ "left": expectedItemPos + "px" });
}
}
}
});
});
The code above is used for left to right carousel.
Additinal info about jcarousel configuration you can find here