They know a one plugin that let me change/transform a vertical (desktop view) carousel to a horizontal carousel on mobile devices?
Now I'm working with slick plugin but I can't get the result that I need, this is my JS code:
$('.demo-slider).slick({
vertical: true;
});
var windowWidth = $(window).width();
if(windowWidth < 768){
$('.demo-slider').slick('unslick',function(){
$('.demo-slider).slick({
vertical: false;
});
});
}
$('.demo-slider).slick({
vertical: true,
responsive: [
{
breakpoint: 767,
settings: {
vertical: false
}
}]
});
Slick have own responsive breakpoints. This will be work much better
I think where you are going wrong is you're initializing slick() twice (you also forgot closing ' on your jQuery selectors). I would switch the faux media query to be out of slick()'s initialization, like this:
// 1- Get window width
var windowWidth = $(window).width();
// 2- For all devices under or at 768px, use horizontal orientation
if(windowWidth <= 768) {
$('.demo-slider').slick({
vertical: false,
});
}
// 3- For all devices over 768px, use vertical orientation
else {
$('.demo-slider').slick({
vertical: true,
});
}
*note, I've never used slickslider, just looking at your JS.
Related
I have an issue with an Owl Carousel (v2.3.4) that I can't see how to fix. On devices it seems to randomly resize the carousel and the images disappear. Sometimes I can see the Carousel has loaded correctly but then suddenly changes, it also seems to change when I interact with another Owl Carousel I have loaded. I have tried adding a separate wrapper to control the width, using one / two calls to load the two Carousels, delaying initialization etc..
It is the second Owl Carousel in the Green block that has the above issues. You can see the development page here: http://37.128.128.31/~thecropbrighton/
As I only want this slider to be on devices I am currently using the below Javascript:
$(function() {
if ($(window).width() < 768) {
startCarousel();
} else {
$('.mob-carousel').addClass('off');
}
$(window).on('resize', function() {
if ($(window).width() < 768) {
startCarousel();
} else {
stopCarousel();
}
});
function startCarousel() {
$('.mob-carousel').owlCarousel({
loop: true,
margin: 0,
nav: false,
dots: false,
items: 1,
mouseDrag: true,
touchDrag: true,
navText: ["<img src='" + get_template_directory_uri + "/assets/images/right.svg'>", "<img src='" + get_template_directory_uri + "/assets/images/swipe-left.svg'>"],
});
}
function stopCarousel() {
var owl = $('.mob-carousel');
owl.trigger('destroy.owl.carousel');
owl.addClass('off');
}
on owl-carousel write "autoWidth: true", it will set auto width.
I have this slider on my WP page, which is vertical. I would like to convert it so it his horizontal. As I understood I need to change my JS code.
jQuery(function($) {
var image_es;
var zoom_timer;
var win_width = 0;
function resize_venedor_thumbs() {
if (win_width != $(window).width()) {
if (image_es) {
image_es.destroy();
}
image_es = $('#thumbnails-slider-756').elastislide({
orientation : 'vertical',
minItems: 4
});
win_width = $(window).width();
}
if (zoom_timer) clearTimeout(zoom_timer);
}
$(window).load(resize_venedor_thumbs);
$(window).resize(function() {
clearTimeout(zoom_timer);
zoom_timer = setTimeout(resize_venedor_thumbs, 400);
});
});
I tried to change vertical to horizontal in inspect element mode but it did not change at all.
If you change the orientation to 'horizontal' in inspect element mode, you need to make sure the resize_venedor_thumbs function is called.
It looks like it is called on load or resize (try resize because loading will erase your edits); or you can call it in the console yourself resize_venedor_thumbs(); or, of course, edit the source and load the page.
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
}
Some of my webpages contain several text elements that expand and collapse with a jQuery "accordion" effect:
function show_panel(num) {
jQuery('div.panel').hide();
jQuery('#a' + num).slideToggle("slow");
}
function hide_panel(num) {
jQuery('div.panel').show();
jQuery('#a' + num).slideToggle("slow");
}
This causes the window size to change so jScrollPane has to be reinitialized, which will also change the length of the scrollbar. To achieve a smooth length adjustment of the scrollbar, I set the "autoReinitialise" option to "true" and the "autoReinitialiseDelay" to "40" ms:
$(document).ready(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#content');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css({
'width': 1,
'height': 1
});
// Now make it the size of the window...
container.css({
'width': win.width(),
'height': win.height()
});
isResizing = false;
container.jScrollPane({
showArrows: false,
autoReinitialise: true,
autoReinitialiseDelay: 40
});
}
}).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#content').width() != win.width()) {
win.trigger('resize');
}
});
The effect is ok, but on the cost of a very high CPU usage which makes my fan go wild.
This is a jsfiddle which shows the settings and the effect: http://jsfiddle.net/VVxVz/
Here's an example page (in fact it's an iframe within the webpage shown): http://www.sicily-cottage.net/zagaraenausfluege.htm
Is there a possibility to achieve the same "smooth" transition of the scrollbar length without using the "autoReinitialise" option, maybe with an additional script, some modification of the jscrollpane.js, or simply a css animation of the scrollbar and then calling the reinitialise manually?
I'm absolutely useless at javascript so any help would be greatly appreciated.
There is no need to initialise jScrollPane on your content everytime window is resized. You should do it only once - on $(document).ready(). Also, there is no need in using autoReinitialize if your content is staic. You should reinitialise jScrollPane to update scrollbar size only when you slideUp/slideDown one of your container or on window.resize. So, code become less and more beautiful :)
function togglePanel(num) {
var jsp = $('#content').data('jsp');
jQuery('#a' + num).slideToggle({
"duration": "slow",
"step": function(){
jsp.reinitialise();
}
});
return false;
}
$(document).ready(function () {
var container = $('#content').jScrollPane({
showArrows: false,
autoReinitialise: false
});
var jsp = container.data('jsp');
$(window).on('resize', function(){
jsp.reinitialise();
});
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if (container.width() != $(window).width()) {
jsp.reinitialise();
}
});
I'm creating a gallery for a responsive lay-out - I am using jQuery Riding Carousels for the thumbnails.
When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal ...
I'm doing it like this at present:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
</script>
... the JS simply hooks up a class, but it doesn't do so if you re-size the browser window by dragging it - you need to refresh the page.
Is there a way to destroy the script and re-initialize it on the fly?
Please check Working exmpale: http://codebins.com/bin/4ldqpba/1/Jcarousel%20vertical%20on%20resize
Tested in all browsers and works perfectly fine. bounty is mine :)
In the example i have give threshold widht 350 you can test it by resizing the result pane and as soon as you start havin horizontal scroll bar it will converted to vertical.
1 possible issue depending on your requirement is if you ahve any handlers on images they will be gone after changing display way. the solution for it is wrap your #mycarousel in a div and use Jquery delegate to handle events on the wrapper so no issue with events also.
Let me know if you come under this situation.
Following code is exactly as per your need.
When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal .
which is revers form the example as for me it makes more sense if width is less make it vertical.
jQuery(document).ready(function() {
var widthCheck = 1008;
var resizeTimer = null,
verticalFlg = $(window).width() > widthCheck;
var obj = jQuery('#mycarousel').clone();
$('#mycarousel').jcarousel({
vertical: verticalFlg,
scroll: 2
});
jQuery(window).resize(function() {
resizeTimer && clearTimeout(resizeTimer); // Cleraring old timer to avoid unwanted resize calls.
resizeTimer = setTimeout(function() {
var flg = ($(window).width() > widthCheck);
if (verticalFlg != flg) {
verticalFlg = flg;
$('#mycarousel').closest(".jcarousel-skin-tango").replaceWith($(obj).clone());
$('#mycarousel').jcarousel({
vertical: verticalFlg,
scroll: 2
});
}
}, 200);
});
})
Or you can look at the source. I'm guessing you are using version 0.2
Looking at the source
https://github.com/jsor/jcarousel/blob/0.2/lib/jquery.jcarousel.js
we can see that there are two lines (80 and 81) which are only done in object init. Those lines are
this.wh = !this.options.vertical ? 'width' : 'height';
this.lt = !this.options.vertical ? (this.options.rtl ? 'right' : 'left') : 'top';
also this line at 149
if (!this.options.vertical && this.options.rtl) {
this.container.addClass('jcarousel-direction-rtl').attr('dir', 'rtl');
}
It might be if you add those to the callback you will get better results.
You could also try version 0.3 of the plugin.
Prior answer:
Can't test it myself right now, but try this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
reloadCallback: function () {
this.options.vertical = $(window).width() > 1008;
},
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
var sizeCheck = function() {
return $(window).outerWidth() >= 1024
}
jQuery('#mycarousel').jcarousel({
vertical: sizeCheck(),
scroll: 3,
});
var jCarousel = jQuery('#mycarousel').data('jcarousel');
window.onresize = function() {
jCarousel.options.vertical = sizeCheck(); // maybe you have to access the option through jCarousel.plugin.options.vertical
jCarousel.reset();
}
});
</script>
Maybe this works.
I haven't tested the following code, but I am fairly sure the following code should work:
<script type="text/javascript">
var carousel;
jQuery(window).resize(function() {
if(carousel !== undefined) carousel.destroy();
carousel = jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
</script>
or even better something along the lines of:
<script type="text/javascript">
var carousel;
jQuery(document).ready(function() {
carousel = jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
jQuery(window).resize(function() {
//NOT SURE WHICH OF THE BELOW LINES WOULD WORK, try both and check which works
carousel.options.vertical = $(window).width() > 1008;
carousel.vertical = $(window).width() > 1008;
carousel.reload();
});
</script>
If it does not, you should add a console.log(carousel) to your code and check out what the prototype is of the outputted value (check F12). There should be something along the lines of destroy (or alternatively check console.log($.jcarousel())).