We Keep Coding

How can I move each bxSlider slider from opposite side?

I am using three bxSlider based slider. I want to move each slider from opposite side. I have tried and done it for first two round but in the end of second round slide starting to move from same direction of previous slide.
Here is all script which I have tried so far.
I am sorry if the question is not clear, kindly check the fiddle so that you will understand about my issue and thank you in advance for that.
Below is the main script, which is I am trying
jQuery(document).ready( function($) {
let slideOneFirstInterval = true;
let slideTwoFirstInterval = true;
let slideThreeFirstInterval = true;
let slideOne = $('#owlSlide1');
slideOne.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : false,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideThreeFirstInterval) {
setTimeout(function() {
//slideTwo.goToNextSlide();
slideThree.goToNextSlide();
console.log('True Statement.. 1');
}, 2000);
slideThreeFirstInterval = false
} else {
setTimeout(function() {
slideThree.goToPrevSlide();
console.log('False Statement.. 1');
}, 2000);
}
},
autoDelay : 0,
});
let slideTwo = $('#owlSlide2');
slideTwo.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideTwoFirstInterval) {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('True Statement.. 2');
}, 2000);
slideTwoFirstInterval = false
} else {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('false Statement.. 2');
}, 2000);
}
},
});
let slideThree = $('#owlSlide3')
slideThree.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
autoDelay : 0,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToPrevSlide();
console.log('True Statement.. 3');
}, 2000);
},
});
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToNextSlide();
console.log('false Statement.. 3');
}, 3000);
});

Assuming you want everything to slide from left to right as opposed to right to left, just replace all occurrences of goToNextSlide() with goToPrevSlide(). You may need to re-order your images in your HTML but it's easier to do that than tangle with a library.

Use quick-view in fancybox

I using fancybox in my project and now data attribute is gallery
Here is code
$(".hotel_gallery").attr("data-fancybox", "gallery")
.fancybox({
prevEffect: "none",
nextEffect: "none",
closeBtn: true,
arrows: true,
beforeShow() {
this.title = this.src;
},
helpers: { title : { type : "inside" } }
});
I want to use quick - view
So I rewrite code like this
$(".hotel_gallery").attr("data-fancybox", "quick-view")
.fancybox({
prevEffect: "none",
nextEffect: "none",
closeBtn: true,
arrows: true,
beforeShow() {
this.title = this.src;
},
helpers: { title : { type : "inside" } }
});
But it still have gallery
But here attribute is changed
Here it is
<a class="hotel_gallery thumb_a" href="https://aobtravel.s3.amazonaws.com/hotelpictures/004/075/389/LON-91A-2.jpg?1387235916" data-fancybox="quick-view">
Where is problem can be?

So after making searches I make write code.
Here is js code
$(".hotel_gallery").attr("data-fancybox", "quick-view")
.fancybox({
prevEffect: "none",
nextEffect: "none",
closeBtn: true,
arrows: true,
beforeShow() {
this.title = this.src;
},
afterLoad(instance, current ){
if ( instance.group.length > 1 && current.$content ) {
current.$content.append('<a data-fancybox-next class="button-next" href="javascript:;">→</a><a data-fancybox-previous class="button-previous" href="javascript:;">←</a>');
}
current.$content.append('<a data-fancybox-close class="button-close" href="javascript:;">×</a>');
},
helpers: { title : { type : "inside" } }
});
It changes default stuff to custom

Fancybox and Cloudzoom to zoom a rotated image

I am admittedly new to this but I have a working Fancybox application and wish to add the ability to zoom into the images, I have done so but occasionally the images require Fancybox rotation to be right side up. When the zoom hover is used, the zoomed image is that of the original non-rotated image. I'm guessing it's because I tell CloudZoom to use .fancybox-image.
Here's my fancybox:
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : true,
arrows : false,
nextClick : true,
autoDimension : true,
helpers : {
title : {
type: 'Over'
},
thumbs : {
width : 75,
height : 75
},
buttons : {
tpl: '<div id="fancybox-buttons"><ul><li><a class="btnRotateL" title="left" href="javascript:;"></a></li><li><a class="btnRotateR" title="right" href="javascript:;"></a></li></ul></div>',
beforeShow: function (opts, obj) {
}
}, // buttons
},
maxWidth: 712,
maxHeight:968,
afterShow: function(){
var $image = $('.fancybox-image');
$image.CloudZoom({zoomPosition:'inside', zoomOffsetX:0});
},
beforeLoad: function(){
var $image = $('.fancybox-image');
if ($image.data('CloudZoom')) $image.data('CloudZoom').destroy();
},
beforeClose: function(){
var $image = $('.fancybox-image');
if ($image.data('CloudZoom')) $image.data('CloudZoom').destroy();
}
});
Do you know of a way to tell CloudZoom to use the image as currently displayed by Fancybox so that a rotated image can be zoomed?

Post title in fancybox jquery

How can i call to the post title in this code in fancybox?
jQuery(document).ready(function() {
jQuery("a.popup, a[rel=group]").fancybox({
closeClick : true,
helpers : {
overlay : {
locked : false
}
}
});
jQuery(".video-popup").fancybox({
'width' : '70%',
'height' : '80%',
'autoScale' : false,
'type' : 'iframe',
closeClick : true,
helpers : {
overlay : {
locked : false
}
}
});
jQuery('.menu a').click(function(){
var href = jQuery(this).attr('href').replace('#filter=','').replace(',+.menu', '');
jQuery('.element.portfolio a.popup').attr('data-fancybox-group', 'invisible');
jQuery('a.popup', href).attr('data-fancybox-group', 'visible');
});
});

Why is this Fancybox height and width not working?

This is what I have:
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
I added this line:
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
But it still doesn't work. What can I do to have a custom height and width that is also automatic. Meaning if the content in there exceeds my width and height it should be able to become dynamic and change.

Try setting 'autoSize':false . For example:
$.fancybox({
'content':$("#element").html(),
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});

You must have like me found the documentation for V1 since it comes up on Google Search first, this is the documentation for the latest fancybox:
http://fancyapps.com/fancybox/#docs