isotope - click to expand image and position in top left corner

Question

I have used the code in the following example:

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

but would like to make the selected item the first item so its in the top left corner like the example below:

I have merged the JQuery functions from both examples, however, I am struggling getting this to work as am not great with JQuery. Can anyone help?

    
        
             
        
        
            
        
        
            
        
        
            
        
    

    jQuery(function(){

      var $container = jQuery('#iso-container'),
          $photos = $container.find('.photo'),
          $loadingIndicator = jQuery('');

      // 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('', { src: this.href });

                  // give it a wrapper and appended it to element
                  jQuery('', { '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.: The above worked in that it would move and open up when selected until I added the code from the 2nd example. ie the getSortData and the code from var $previousSelected = $('.selected');

Abdallah Arffak · Accepted Answer

First this code is missing in your code:

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

and

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

and

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

$previousSelected.removeClass('selected');

and

you have to change/or remove the width of your conainer because it is not correct

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

this is a demo

isotope - click to expand image and position in top left corner

Answers (2)

Related Questions