Permalink
Browse files

carousel:fixed some size problems made a function for outer width of …

…an item

Signed-off-by: ivankuzev <ivankuzev@hotmail.com>
  • Loading branch information...
ivankuzev committed Dec 5, 2011
1 parent 78f6251 commit 1a812722dcb13234e2f02573fd8eefc5c76f622d
Showing with 22 additions and 12 deletions.
  1. +6 −6 demos/carousel/default.html
  2. +1 −1 demos/carousel/images.html
  3. +3 −2 themes/base/jquery.ui.carousel.css
  4. +12 −3 ui/jquery.ui.carousel.js
@@ -34,9 +34,9 @@
<script type="text/javascript">
$(document).ready(function(){
- $('.sl:lt(2)').carousel({orientation:'horizontal',width:200,height:40});
+ $('.sl:lt(2)').carousel({orientation:'horizontal'});
$('.sl:eq(2)').carousel({'click':function(event,data){alert($(data.target).text())}});
- $('.sl:eq(3)').carousel({'height':200,'width':100});
+ $('.sl:eq(3)').carousel();
$('.act1').click(function(){
$('.sl:eq(1)').carousel('option','focusItem',12);
});
@@ -46,7 +46,7 @@
</head>
<body>
<span class='act1'>act1</span>
- <ul class='sl'>
+ <ul style='width: 300px;height:200px;' class='sl'>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
@@ -63,7 +63,7 @@
<li><a href='#'>13</a></li>
</ul>
<div style="height: 100px;"></div>
- <ul class='sl'>
+ <ul style='width: 200px;height:200px;' class='sl'>
<li><a href='stamps.php?category=4'>Охранителни надписи</a></li>
<li><a href='stamps.php?category=5'>Животни</a></li>
@@ -81,7 +81,7 @@
</ul>
<div style="height: 10px;"></div>
- <ul class='sl'>
+ <ul style='width: 100px;height:200px;' class='sl'>
<li><a href='stamps.php?category=4'>Охранителни надписи</a></li>
<li><a href='stamps.php?category=5'>Животни</a></li>
@@ -98,7 +98,7 @@
<li><a href='stamps.php?category=30'>Птици и цветя</a></li>
</ul>
<div style="height: 10px;"></div>
- <ul class='sl'>
+ <ul style='width: 30%;height:200px;' class='sl'>
<li><a href='stamps.php?category=4'>Охранителни надписи</a></li>
<li><a href='stamps.php?category=5'>Животни</a></li>
@@ -40,7 +40,7 @@
</style>
</head>
<body>
- <ul class='sl ui-corner-all' style="width: 100px;height:300px">
+ <ul class='sl ui-corner-all' style="width: 200px;height:400px">
<li><a href='#'><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="none">Alpha</a></li>
<li><a href='#'><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="none">Beta</a></li>
@@ -7,8 +7,9 @@
}
li.ui-carousel-item{
float:left;
- width:75px;
- height:75px;
+ width:80px;
+ height:80px;
+ cursor:pointer;
}
.ui-carousel > div{
float:left;
View
@@ -60,6 +60,14 @@
// and reloading
this.refresh();
},
+ //setting outer width
+ _setOuterSize:function(object,width,height){
+ if (width === null)width = object.outerWidth();
+ if (height === null)height = object.outerHeight();
+ var outerHeightAddition = object.outerHeight() - object.height();
+ var outerWidthAddition = object.outerWidth() - object.width();
+ object.height(height-outerHeightAddition).width(width-outerWidthAddition);
+ },
reCenter: function(){
this.element.find('li.ui-carousel-item').each(function(){
@@ -207,18 +215,19 @@
//todo
},
_reOrientate:function(){
- if(this.options.orientation === ''){
+ if(this.options.orientation === ''){
if(this.element.width() >= this.element.height()){
this.options.orientation = 'horizontal';
}else{
this.options.orientation = 'vertical';
}
}
if(this.options.orientation === 'vertical'){
- this.element.find('li.ui-carousel-item').width(this.element.width()); //todo maybe later for outer height.width function
+ this._setOuterSize(this.element.find('li.ui-carousel-item'),this.element.width(),null);
this.element.removeClass('ui-carousel-horizontal').addClass('ui-carousel-vertical');
}else if(this.options.orientation === 'horizontal'){
- this.element.find('li.ui-carousel-item').height(this.element.height());
+
+ this._setOuterSize(this.element.find('li.ui-carousel-item'),null,this.element.height());
this.element.removeClass('ui-carousel-vertical').addClass('ui-carousel-horizontal');
}
this._refreshNavigation();

0 comments on commit 1a81272

Please sign in to comment.