bxslider图像具有不同的宽度 [英] bxslider images with different widths

问题描述

我试图使用bxslider与不同大小的图片，我想要相同的高度和不同的宽度。我想要一个类似于 http://bxslider.com/examples/carousel-demystified上的示例的轮播。这些示例工作正常，但是，我有300，400和500像素宽，每个具有不同的高度，缩放到相同的高度400px的图像。我不想调整图像的宽度，所以他们是相同的或裁剪它。如何对不同宽度的图片使用bxslider？

如果这不能使用bxslider，那么一个jquery插件已经存在这个行为？

示例： http://jsfiddle.net/GdD52 / 2 /

 < ul class =slider1> 
< li class =slide>< img src =http://placehold.it/140x130&text=FooBar1/>< / li> 
< li class =slide>< img src =http://placehold.it/150x115&text=FooBar2/>< / li> 
< li class =slide>< img src =http://placehold.it/130x160&text=FooBar3/>< / li> 
< li class =slide>< img src =http://placehold.it/145x142&text=FooBar4/>< / li> 
< / ul> 
  

解决方案

小脚本创建一个具有不同宽度的图片的无限滚动图库： 小提琴

我知道你的愿望是改变画廊bxslider，但这个解决方案似乎可以接受
我认为bxslider画廊不会给你这个可能性

正如你可以看到，在我的小提琴有一个画廊有不同宽度的图像。

脚本只是一个例子，如果你投票我的答案我会改善它。 p>

 < script type =text / javascript> 
 $（document）.ready（function（）{
 
 var wid = 0; 
 var maskWidth = 0; 
 var arr = []; 
 $（'＃images img'）。each（function（i）{
 wid + = parseInt（$（this）.attr（'data-width'））; 
 arr.push this）.attr（'data-width'））; 
 if（i <3）{maskWidth + = parseInt（$（this）.attr（'data-width'））;} 
} ; 
 //设置容器宽度= 3 *更大的图像
 var largest = Math.max.apply（null，arr）* 3; 
 $（'＃container'）。css 'width'，最大+'px'）; 
 //设置掩码宽度=第3幅图像的宽度
 $（'＃mask'）css（{'width':( maskWidth + 36） 'px'}）; 
 // set images width = width of all images 
 $（'＃images'）。css（{'width'：wid +'px'}）; 
 // set attribute data-last on thirdi image 
 $（'＃images img：eq（2）'）。attr（'data-pos'，'last'）; 
 
 b 
 $ b //下一个和上一个点击的位置不同的图像div 
 $（'。next'）。 
 var widthx = $（'＃mask'）。width（）; 
 var next = parseInt（$（'＃images'）。find（'img [data-pos =last]'）。next（'img'）。attr（'data-width'））+ 12; 
 $（'＃images'）。find（'img [data-pos =last]'）。next（'img'）。attr（'data-pos'，'last'）; 
 $（'＃images'）。find（'img [data-pos =last]：first'）。removeAttr（'data-pos'）; 
 var ind = $（'＃images'）。find（'img [data-pos =last]'）。 
 var collection = $（'＃images'）。find（'img'）。slice（ind-3，ind）; 
 var newWidth = 0; 
 $（collection）.map（function（i，element）{
 newWidth + = parseInt（$（element）.data（'width'）+12）; 
} 
 var diff = widthx-newWidth; 
 var delta = parseInt（next）+（diff）; 
 $（'＃images'）。animate（{'left'：' -  ='+（delta）+'px'}，1000）; 
 $（'＃mask'）。animate（{'width':( newWidth）+'px'}，1000，function（）{
 $（'img：first'）。appendTo（' #images'）; 
 $（'＃images'）。css（{'left'：'0px'}）; 
}）; 
}）; 
 
 $（'。prev'）。click（function（e）{
 e.preventDefault（）; 
 var widthx = $（'＃mask'）。width ）; 
 $（'img：last'）。prependTo（'＃images'）; 
 var largh = parseInt（$（'img：first'）。attr（'data-width'）） +12; 
 $（'＃images'）。css（{'left'：largh * -1 +'px'}）; 
 var collection = $（'＃images'）。find 'img'）slice（0,3）; 
 var newWidth = 0; 
 $（collection）.map（function（i，element）{
 newWidth + = parseInt ）.data（'width'）+12）; 
}）; 
 $（'＃mask'）。animate（{'width'：newWidth +'px'}，1000）; 
 $（'＃images'）。animate（{'left'：'+ ='+ largh +'px'}，1000）; 
 $（'＃images img'）。removeAttr（'data-pos' ）; 
 $（'img：nth-​​child（3）'）attr（'data-pos'，'last'）; 
} 
 
}）
< / script> 
  

因为我喜欢这个问题在这其他 FIDDLE ，您会发现此图库的另一个改进版本， b $ b同样，脚本coul可以改进下一步可能是：

N1使画廊响应
的
N2在jQuery插件中转换小程序插件

/ p>

I'm trying to use the bxslider with images of different sizes that I'd like to be the same height and different widths. I'd like to have a carousel like the examples on http://bxslider.com/examples/carousel-demystified. These examples work fine, however, I have images that are 300, 400, and 500 pixels wide, each with different heights that are scaled to the same height of 400px. I do not want to resize the width of the image so they are the same or crop it. How do I use bxslider with images of different widths?

If this cannot be done using bxslider, then does a jquery plugin already exist for this behavior?

Example: http://jsfiddle.net/GdD52/2/

<ul class="slider1">
    <li class="slide"><img src="http://placehold.it/140x130&text=FooBar1"/></li>
    <li class="slide"><img src="http://placehold.it/150x115&text=FooBar2"/></li>
    <li class="slide"><img src="http://placehold.it/130x160&text=FooBar3"/></li>
    <li class="slide"><img src="http://placehold.it/145x142&text=FooBar4"/></li>
</ul>

解决方案

Given my love for web galleries I thought to write a little script to create an infinite scrolling gallery with images of different width: Fiddle
I am aware that your wish was to change the Gallery bxslider but this solution seems acceptable
I think that bxslider Gallery does not give you this possibility
As you can see in my fiddle there is a gallery with images with differnt widths.
The script is just an example and it can be improved if you vote my answer I will improve it.

<script type="text/javascript">
$(document).ready(function(){

    var wid=0;
    var maskWidth=0;
    var arr=[];
    $('#images img').each(function(i){
        wid+=parseInt($(this).attr('data-width'));
        arr.push($(this).attr('data-width'));
        if(i<3){maskWidth+=parseInt($(this).attr('data-width'));}
        });
    //set container width = 3* mor larger image
    var biggest = Math.max.apply( null, arr )*3;
    $('#container').css('width',biggest+'px');
    //set mask width= width of first 3 images
    $('#mask').css({'width':(maskWidth+36)+'px'});
    //set images width=width of all images
    $('#images').css({'width':wid+'px'});
    //set attribute data-last on thirdi image
    $('#images img:eq(2)').attr('data-pos','last');



    //next and prev click are differnent for the position of image div
    $('.next').click(function(e){
        e.preventDefault();
        var widthx=$('#mask').width();
        var next=parseInt($('#images').find('img[data-pos="last"]').next('img').attr('data-width'))+12;
        $('#images').find('img[data-pos="last"]').next('img').attr('data-pos','last');
        $('#images').find('img[data-pos="last"]:first').removeAttr('data-pos');
        var ind=$('#images').find('img[data-pos="last"]').index()+1;
        var collection=$('#images').find('img').slice(ind-3,ind);
        var newWidth=0;
         $(collection).map( function( i, element ) {
             newWidth+= parseInt($(element).data( 'width' )+12);
         });
         var diff=widthx-newWidth;  
         var delta=parseInt(next)+(diff);
         $('#images').animate({'left':'-='+(delta)+'px'},1000 );
         $('#mask').animate({'width':(newWidth)+'px'},1000,function(){
             $('img:first').appendTo('#images');
             $('#images').css({'left':'0px'});
        });
    });

    $('.prev').click(function(e){
        e.preventDefault();
        var widthx=$('#mask').width();
        $('img:last').prependTo('#images');
        var largh=parseInt($('img:first').attr('data-width'))+12;
        $('#images').css({'left':largh*-1+'px'});
        var collection=$('#images').find('img').slice(0,3);
        var newWidth=0;
         $(collection).map( function( i, element ) {
             newWidth+= parseInt($(element).data( 'width' )+12);
         });
         $('#mask').animate({'width':newWidth+'px'},1000);
         $('#images').animate({'left':'+='+largh+'px'},1000);
         $('#images img').removeAttr('data-pos');
         $('img:nth-child(3)').attr('data-pos','last');
    });

})
</script>

Since i like this question in this other FIDDLE you'll find another improved version of this gallery with the buttons for browse images in group of tree
Again, the script coul be improved the next step could be:
N1 make the gallery responsive
N2 transform the scipt in a jQuery plugin

这篇关于bxslider图像具有不同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！