同位素 - 单击可在左上角展开图像和位置

时间：2014-12-17 17:35:41

标签： javascript jquery css jquery-isotope

我使用了以下示例中的代码：

http://jsfiddle.net/desandro/zhbLL/3/embedded/result,js,css,html,resources/

但是想要将所选项目作为第一项，使其位于左上角，如下例所示：

http://jsfiddle.net/desandro/8QkEw/

我已经合并了两个示例中的JQuery函数，但是，我正在努力让这个工作，因为我对JQuery不太好。有人可以帮忙吗？

    <div id="iso-container" class="photos clearfix">
        <div class="photo">
             <a href="People_JJ.jpg"><img src="People_JJ-150x150.jpg" class="small-image" alt="People_JJ"  /></a>
        </div>
        <div class="photo">
            <a href="People_CF.jpg"><img src="People_CF-150x150.jpg" class="small-image"  alt="People_CF"  /></a>
        </div>
        <div class="photo">
            <a href="People_HH.jpg"><img src="People_HH-150x150.jpg" class="small-image"  alt="People_HH"  /></a></p>
        </div>
        <div class="photo">
            <p><a href="People_SF.jpg"><img src="People_SF-150x150.jpg" class="small-image"  alt="People_SF"  /></a></p>
        </div>
    </div>

    jQuery(function(){

      var $container = jQuery('#iso-container'),
          $photos = $container.find('.photo'),
          $loadingIndicator = jQuery('<div class="loading"><span><img src="http://i.imgur.com/IE7iw.gif" /></span></div>');

      // trigger Isotope after images have loaded
      $container.imagesLoaded( function(){
          $container.isotope({
              itemSelector : '.photo',
              masonry: {
                columnWidth: 187
          },
          getSortData : {   //code added from second example
              selected : function( $item ){
                             // sort by selected first, then by original order
                             return ($item.hasClass('selected') ? -1000 : 0 ) + $item.index();
                         }
              },
              sortBy : 'selected'
          });
      });

      // shows the large version of the image
      // shows small version of previously large image
      function enlargeImage( $photo ) {
          $photos.filter('.large').removeClass('large');
          $photos.find('.details').hide();
          $photo.addClass('large');
          $container.isotope('reLayout');
          $photo.children('.details').show();
      }

      $photos.find('a').click( function() {
          var $this = jQuery(this),
              $photo = $this.parents('.photo');

          var $previousSelected = $('.selected'); //code added from second example
          if ( !$this.hasClass('selected') ) {
              $this.addClass('selected');
          }

          $previousSelected.removeClass('selected'); //code added from second example

          // update sortData for new items size  //code added from second example
          $container
              .isotope( 'updateSortData', $this )
              .isotope( 'updateSortData', $previousSelected )
              .isotope();   

          if ( $photo.hasClass('large') ) {
              // already large, just remove
              $photo.removeClass('large');
              $container.isotope('reLayout');
          } else {
              if ( $photo.hasClass('has-big-image') ) {
                  enlargeImage( $photo );
              } else {
                  // add a loading indicator
                  $this.append( $loadingIndicator );

                  // create big image
                  var $bigImage = jQuery('<img>', { src: this.href });

                  // give it a wrapper and appended it to element
                  jQuery('<div>', { 'class': 'big-image' })
                      .append( $bigImage )
                      .appendTo( $this )
                      .imagesLoaded( function() {
                          $loadingIndicator.remove()
                          enlargeImage( $photo );
                      });

                  // add a class, so we'll know not to do this next time
                  $photo.addClass('has-big-image');            
              }
          }

          return false;
      });    
   });

P.S。：上面的工作原理是它会在选中之前移动并打开，直到我添加第二个例子中的代码。即getSortData和var $previousSelected = $('.selected');

中的代码

2 个答案:

答案 0 :(得分：1)

首先，您的代码中缺少此代码：

...,
    getSortData : {
      selected : function( $item ){
        // sort by selected first, then by original order
        return ($item.hasClass('selected') ? -1000 : 0 ) + $item.index();
      }
    },
    sortBy : 'selected'
...

和

  $container
      .isotope( 'updateSortData', $this.parent() )
      .isotope( 'updateSortData', $previousSelected )
      .isotope();
    return false;
  });

和

var $previousSelected = $('.selected');
if ( !$this.parent().hasClass('selected') ) {
  $this.parent().addClass('selected');
}

$previousSelected.removeClass('selected');

和

你必须更改/或删除你的变速器的宽度，因为它不正确

#container {
  border: 2px solid;
  width: 800px;
}

这是demo

答案 1 :(得分：0)

我对你的第二小提琴做了一些改变。这是http://jsfiddle.net/8QkEw/476/预期的解决方案吗？ 的 HTML                            

  <div class="photo">
    <img class="small-image" src="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" />
  </div>

  <div class="photo">
   <img class="small-image" src="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" />
  </div>

  <div class="photo">
    <img class="small-image" src="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" />
  </div>

  <div class="photo">
   <img class="small-image" src="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" />
  </div>

  <div class="photo">
    <img class="small-image" src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" />
  </div>

  <div class="photo">
   <img class="small-image" src="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8_b.jpg" />
  </div>

  <div class="photo">
    <img class="small-image" src="http://farm5.static.flickr.com/4124/5013646314_c7eaf84918.jpg" />
  </div>

  <div class="photo">
   <img class="small-image" src="http://farm5.static.flickr.com/4089/5013040075_bac12ff74e_b.jpg" />
  </div>
</div>

<强>的Javascript 

$(function(){


  var $container = $('#container'),
      $items = $('.photo');

  $container.isotope({
    itemSelector: '.photo',
    masonry: {
      columnWidth: 60
    },
    getSortData : {
      selected : function( $item ){
        // sort by selected first, then by original order
        return ($item.hasClass('selected') ? -1000 : 0 ) + $item.index();
      }
    },
    sortBy : 'selected'
  })

  $items.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    var $previousSelected = $('.selected');
    if ( !$this.hasClass('selected') ) {
      $this.addClass('selected');
    }

    $previousSelected.removeClass('selected');

    // update sortData for new items size
    $container
      .isotope( 'updateSortData', $this )
      .isotope( 'updateSortData', $previousSelected )
      .isotope();

  });

});

<强> CSS 

.photo {
  width: 50px;
  height: 50px;
  padding:15px 5px;
  float: left;
}
.photo img {
max-width:100%;
}

.photo.selected {
  width: 170px;
  height: auto;
  background: none;
}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/ *结束：推荐的同位素样式* /

相关问题
最新问题