CarouFredSel sliding issue - javascript

I have set up a caroufredsel, and have items inside of it. But when I click on my next and previous buttons, the first time it appears to shift 1 item, every click after that it shifts the entire width of the content and back to the beginning.
I have set my scroll items to 3. Does it have something to do with the width of the container?
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : 'auto',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});
It also seems that on slide, the height of the carousel changes for some reason. maybe this is related

I would also refactor your selector to be simpler as you are using IDs and there should only be one per page anyway:
Instead of:
jQuery('#tab-1').find('#carousel').carouFredSel();
Use this:
jQuery('#carousel').carouFredSel();

Switching the caroufredsel width to 100% did the trick.
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : '100%',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});

Related

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?

How to call a function on when a grid is resized in Ext js 4.0?

How to call a function on when a grid is resized in Ext js 4.0?
I am trying something like this but it ain't working.
Ext.define('App.view.EDM.DataModelling.Entity.entitySymbol' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.entitySymbol',
title:'Entity',
ddGroup : 'GridDDGroup',
hideHeaders : true,
stripeRows : false,
resizable : {
resize : function(e ) {
alert("hi1");
},
resizedrag : function(e ) {
alert("hi2");
},
beforeresize : function(e ) {
alert("hi3");
}
},
floating:true,
draggable : true,
loadMask : true,
height: 180,
width: 160
});
None of this is working.
You should add a listener to resize event
...
stripeRows : false,
listeners:{
resize: function(this, width, height, oldWidth, oldHeight, eOpts){
alert("hi4");
}
},
...

Extjs scroll two panels in parallel

I have two panel and both have autoScroll: true. I want them to scroll in parallel; that is, scroll one, the other should automatically scroll as well.
My Code:
Ext.define('CompareDailog', {
extend : 'Ext.window.Window',
width : '100%',
height : '100%',
resizable : true,
closeAction : 'destroy',
editMode : false,
padding : '1 1 1 1',
layout : {
type : 'border',
align : 'left',
padding : '5 5 5 5'
},
items : [{
xtype : 'panel',
id : 'originalDocument',
title : 'Original Document',
width : '50%',
height : '100%',
region : 'west',
autoScroll : true
}, {
xtype : 'panel',
id : 'modifiedDocument',
title : 'Modified Document',
width : '50%',
height : '100%',
region : 'east',
autoScroll : true
}],
buttons : [{
text : 'Cancel',
handler : function() {
this.up('window').close();
return;
}
}]
});
I search but not found any scroll listener or move scroll to anty specific position. nay help is appreciable. Thanks
Here is the another aspect for Ext.Panel component. Basically, you can set scrollbar position of an element by body.dom property.
ExtJS - Synchronize Two Panel Scrollbars
var panelOne = Ext.getCmp('originalDocument');
var panelTwo = Ext.getCmp('modifiedDocument');
panelOne.body.on('scroll', function(e) {
panelTwo.body.dom.scrollTop = panelOne.body.getScrollTop();
})
Here is fiddle. If you have any problem, let me know.
Synchronize Two Grid with Scroll
This seems an old post but I want to share my part of answer. See, when adding synching scrollbars, problem is the mousewheel scrolling is somewhat slow.
See this fiddle.
So, what I've come up with is to add a delay to the event:
var panelOne = Ext.getCmp('originalDocument');
var panelTwo = Ext.getCmp('modifiedDocument');
panelOne.body.on('scroll', function(e) {
panelTwo.body.dom.scrollTop = panelOne.body.getScrollTop();
}, panelOne.body, {delay: 50 }); //delay 50 seems to fine to me. adjust if you must

carouFredsel Responsive carousel with items:variable

I am trying to make a carouFredsel responsive carousel that should show a variable amount of elements depending on how many fit in the width. The problem I have is that whenever I set responsive to true, the elements get a 100% with and this is not what I need.
I managed to create a fiddle where I show:
1) a carousel with a 100% width that shows as many elements as they fit and when the browser window gets resized, more or less elements are shown
2) an item image that gets resized according to the size of the screen
I would like to combine 1 and 2 and have a carousel that behaves like 1 with elements that behave like 2.
It is not possible for me to know in advance how many items would fit (not even in percentage) since for each carousel the elements may have any width (though all of them have the same).
Is this possible ? What am I missing ?
http://jsfiddle.net/379zW/2/
var options = {
circular: true,
infinite: false,
auto : false,
responsive: false,
prev : {
button : "#p",
key : "left"
},
next : {
button : "#n",
key : "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);
This might solve your problem:
var options = {
circular: true,
infinite: false,
auto: false,
items: {
width: '100%',
height: 'variable',
visible: {
min: 1,
max: 999
}
},
responsive: false,
prev: {
button: "#p",
key: "left"
},
next: {
button: "#n",
key: "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);

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

Categories