如何把"大"图像和"小"图像到一个文件夹 - Caroufredsel缩略图

时间:2014-09-30 04:13:50

标签: javascript jquery caroufredsel

我想将缩略图放入一个包含大图像的文件夹中。我的剧本应该改变什么?

我不理解这个sintax

src = src.split( '/large/' ).join( '/small/' );

我试图做一些修改,但这些仍然不起作用。

这里是我使用的滑块的链接:

http://coolcarousels.frebsite.nl/c/61/

$(function() {
        var $carousel = $('#carousel'),
          $pager = $('#pager');

        function getCenterThumb() {
          var $visible = $pager.triggerHandler( 'currentVisible' ),
            center = Math.floor($visible.length / 2);

          return center;
        }

        $carousel.carouFredSel({
          responsive: true,
          items: {
            visible: 1,
            width: 1600,
            height: 'auto'
          },
          scroll: {
            fx: 'crossfade',
            onBefore: function( data ) {
              var src = data.items.visible.first().attr( 'src' );
              src = src.split( '/large/' ).join( '/small/' );

              $pager.trigger( 'slideTo', [ 'img[src="'+ src +'"]', -getCenterThumb() ] );
              $pager.find( 'img' ).removeClass( 'selected' );
            },
            onAfter: function() {
              $pager.find( 'img' ).eq( getCenterThumb() ).addClass( 'selected' );
            }
          }
        });
        $pager.carouFredSel({
          width: '100%',
          auto: false,
          height: 120,
          items: {
            visible: 'odd'
          },
          onCreate: function() {
            var center = getCenterThumb();
            $pager.trigger( 'slideTo', [ -center, { duration: 0 } ] );
            $pager.find( 'img' ).eq( center ).addClass( 'selected' );
          }
        });
        $pager.find( 'img' ).click(function() {
          var src = $(this).attr( 'src' );
          src = src.split( '/small/' ).join( '/large/' );
          $carousel.trigger( 'slideTo', [ 'img[src="'+ src +'"]' ] );
        });
      });

1 个答案:

答案 0 :(得分:0)

问题解决了!

我只是删除" / large /"和" / small /"在剧本中。

所以,脚本现在看起来像这样:

$(function() {
        var $carousel = $('#carousel'),
          $pager = $('#pager');

        function getCenterThumb() {
          var $visible = $pager.triggerHandler( 'currentVisible' ),
            center = Math.floor($visible.length / 2);

          return center;
        }

        $carousel.carouFredSel({
          responsive: true,
          items: {
            visible: 1,
            width: 1600,
            height: 'auto'
          },
          scroll: {
            fx: 'crossfade',
            onBefore: function( data ) {
              var src = data.items.visible.first().attr( 'src' );
              src = src.split( '' ).join( '' );

              $pager.trigger( 'slideTo', [ 'img[src="'+ src +'"]', -getCenterThumb() ] );
              $pager.find( 'img' ).removeClass( 'selected' );
            },
            onAfter: function() {
              $pager.find( 'img' ).eq( getCenterThumb() ).addClass( 'selected' );
            }
          }
        });
        $pager.carouFredSel({
          width: '100%',
          auto: false,
          height: 120,
          items: {
            visible: 'odd'
          },
          onCreate: function() {
            var center = getCenterThumb();
            $pager.trigger( 'slideTo', [ -center, { duration: 0 } ] );
            $pager.find( 'img' ).eq( center ).addClass( 'selected' );
          }
        });
        $pager.find( 'img' ).click(function() {
          var src = $(this).attr( 'src' );
          src = src.split( '' ).join( '' );
          $carousel.trigger( 'slideTo', [ 'img[src="'+ src +'"]' ] );
        });
      });