Magento Forum

   
JQuery Isotope implementation on homepage
 
jquarrles
Jr. Member
 
Total Posts:  4
Joined:  2011-02-02
 

I been trying for the past week get this jQuery Isotope plugin to work with my site http://0317ec4.netsolhost.com/Refine/ .  I will attach my files to this post. If anyone could assist me with a screen share it would be much appreciated. The homepage should look like this http://isotope.metafizzy.co/ .  I have a few question , first where do i place the no conflict , secondly why didn\’t the short name work, also do I have to change every $ into $j only on the homepage script or also in other files?

<script src=\"prototype.js\"></script>
<script src=\"jquery.js\"></script>
<script>
var $j = jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function(){
$j(\"div\").hide();
});

// Use Prototype with $(...), etc.
$(\’someid\’).hide();

$list = $(\’#super-list\’);

$(\’#filter a\’).click(function(){
var filterName = $(this).attr(\’data-filter\’);
$list.isotope({ filter : filterName });
return false;
});

$(\’#sort a\’).click(function(){
var sortName = $(this).attr(\’data-sort\’);
$list.isotope({ sortBy : sortName });
return false;
});

var currentLayout = \’fitRows\’;

$(\’#layouts a\’).click(function(){
var layoutName = $(this).attr(\’href\’).slice(1);
$list.removeClass( currentLayout ).addClass( layoutName );
currentLayout = layoutName;
$list.isotope({ layoutMode : layoutName });
return false;
});


// switches selected class on buttons
$(\’#options\’).find(\’.option-set a\’).click(function(){
var $this = $(this);

// don\’t proceed if already selected
if ( !$this.hasClass(\’selected\’) ) {
$this.parents(\’.option-set\’).find(\’.selected\’).removeClass(\’selected\’);
$this.addClass(\’selected\’);
}

});

$(function(){

$list.isotope({
layoutMode : \’fitRows\’,
masonry : {
columnWidth: 220
},
getSortData : {
related : function( $elem ) {
return $elem.attr(\’data-related\’);
},
width : function( $elem ) {
return $elem.width();
}
}
});

// Sites using Isotope markup
var $sites = $(\’#sites\’),
$sitesTitle = $(\’<h2 class=\"loading\"><img src=\"http://i.imgur.com/qkKy8.gif\" />Loading sites using Isotope</h2>\’),
$sitesList = $(\’<ul class=\"clearfix\"></ul>\’);

$sites.append( $sitesTitle ).append( $sitesList );

$sitesList.isotope({
layoutMode: \’cellsByRow\’,
cellsByRow: {
columnWidth: 290,
rowHeight: 400
}
});

var ajaxError = function(){
$sitesTitle.removeClass(\’loading\’).addClass(\’error\’)
.text(\’Could not load sites using Isotope :(\’);
};

// dynamically load sites using Isotope from Ember app
$.getJSON(\’http://api.emberapp.com/users/view/\’ +
\’desandro/collections/view/isotope.json?callback=?\’)
.error( ajaxError )
.success(function( data ){

// proceed only if we have images
if ( !data.response || !data.response.images ) {
ajaxError();
return;
}
var images = data.response.images,
items = [],
item, image;

for ( var i=0, len = images.length; i < len; i++ ) {
image = images;
item = \’<li><a href=\"\’ + image.url + \’\">\’
+ \’<b>\’ + image.name + \’</b>\’
+ \’<img src=\"\’ + image.file.src.replace(\’/m.\’, \’/s.\’) + \’\” />\’
+ \’</a></li>\’;
items.push( item );
}

var $items = $j( items.join(\’\’) );

$items.imagesLoaded(function(){
$sitesTitle.removeClass(\’loading\’).text(\’Sites using Isotope\’);
$sitesList.isotope( \’insert\’, $items );
});

});


});
</script>

 
Magento Community Magento Community
Magento Community
Magento Community
 
magedziner
Sr. Member
 
Avatar
Total Posts:  246
Joined:  2009-09-02
 

Copy js files to your theme/skin/js.

jquery-1.5.1.min.js
jquery
.isotope.min.js
fake
-element.js

Copy css to your theme/skin/css.

style.css

Call css and js into page.xml as below code:

<action method="addCss"><stylesheet>css/style.css</stylesheet></action>
<
action method="addItem"><type>skin_js</type><name>js/jquery-1.5.1.min.js</name><params/></action>
<
action method="addItem"><type>skin_js</type><name>js/jquery.isotope.min.js</name><params/></action>
<
action method="addItem"><type>skin_js</type><name>js/fake-element.js</name><params/></action>

Call the html code in the page where you need to display.
Hope it helps!

 
Magento Community Magento Community
Magento Community
Magento Community
 
jquarrles
Jr. Member
 
Total Posts:  4
Joined:  2011-02-02
 

Thank you, I did those steps, but my problem is with the jquery conflicting with prototype. The fact that I have multiple java sub languages runnning stops me from using the $. How do I work around that on magento and if there is a way to run my plugin; could you explain it to beginners.

 
Magento Community Magento Community
Magento Community
Magento Community
 
magedziner
Sr. Member
 
Avatar
Total Posts:  246
Joined:  2009-09-02
 

Create new js file add

jQuery.noConflict()
and save it jquerynoConflict.js
Call it in page.xml
<action method="addItem"><type>skin_js</type><name>js/jquerynoConflict.js</name><params/></action>

Try using jQuery instead of $.
Hope this helps!

 
Magento Community Magento Community
Magento Community
Magento Community
 
jquarrles
Jr. Member
 
Total Posts:  4
Joined:  2011-02-02
 

I have a question I add the other .js files to the pages file. Do I also have to add the jQuery.noConflict() to all the js files.

<action method="addJs"><script>jquery/jquery-1.5.1.noConflict.min.js</script></action>
            <
action method="addJs"><script>jquery/jquery.isotope.min.js</script></action>
            <
action method="addJs"><script>jquery/jquery.infinitescroll.min.js</script></action>
            <
action method="addJs"><script>jquery/fake-element.js</script></action>

For the script I placed it in the the CMS/ managed page/ content. Please comment if it looks correct. I used a var for the $ so that it would execute.

<script>
  var 
$j jQuery.noConflict();
     
     
// Use jQuery via $j(...)
     
$j(document).ready(function(){
       $j
("div").hide();
     
});
     
     
// Use Prototype with $(...), etc.
     
$('someid').hide();
     
     
     
    
$list $j('#super-list');
  
    
$j('#filter a').click(function(){
      
var filterName $j(this).attr('data-filter');
      
$list.isotope({ filter filterName });
      return 
false;
    
});
  
    
$j('#sort a').click(function(){
      
var sortName $j(this).attr('data-sort');
      
$list.isotope({ sortBy sortName });
      return 
false;
    
});
  
    var 
currentLayout 'fitRows';
  
    
$j('#layouts a').click(function(){
      
var layoutName $j(this).attr('href').slice(1);
      
$list.removeClasscurrentLayout ).addClasslayoutName );
      
currentLayout layoutName;
      
$list.isotope({ layoutMode layoutName });
      return 
false;
    
});
  
    
      
// switches selected class on buttons
      
$j('#options').find('.option-set a').click(function(){
        
var $this $j(this);

        
// don't proceed if already selected
        
if ( !$this.hasClass('selected') ) {
          $this
.parents('.option-set').find('.selected').removeClass('selected');
          
$this.addClass('selected');
        
}

      }
);



    
$j(function(){
      
      $list
.isotope({
        layoutMode 
'fitRows',
        
masonry {
          columnWidth
220
        }
,
        
getSortData {
          related 
: function( $elem {
            
return $elem.attr('data-related');
          
},
          
width : function( $elem {
            
return $elem.width();
          
}
        }
      }
);
      
      
// Sites using Isotope markup
      
var $sites $j('#sites'),
          
$sitesTitle $j('<h2 class="loading"><img src="http://i.imgur.com/qkKy8.gif" />Loading sites using Isotope</h2>'),
          
$sitesList $j('<ul class="clearfix"></ul>');
          
      
$sites.append$sitesTitle ).append$sitesList );

      
$sitesList.isotope({
        layoutMode
'cellsByRow',
        
cellsByRow{
          columnWidth
290,
          
rowHeight400
        }
      }
);
      
      var 
ajaxError = function(){
        $sitesTitle
.removeClass('loading').addClass('error')
          .
text('Could not load sites using Isotope :(');
      
};
      
      
// dynamically load sites using Isotope from Ember app
      
$.getJSON('http://api.emberapp.com/users/view/' 
                  
'desandro/collections/view/isotope.json?callback=?')
        .
errorajaxError )
        .
success(function( data ){
          
          
// proceed only if we have images
          
if ( !data.response || !data.response.images {
            ajaxError
();
            return;
          
}
          
var images data.response.images,
              
items [],
              
itemimage;
          
          for ( var 
i=0len images.lengthleni++ ) {
            image 
images[i];
            
item '<li><a href="' image.url '">'
              
'<b>' image.name '</b>'
              
'<img src="' image.file.src.replace('/m.''/s.') + '" />'
              
'</a></li>';
            
items.pushitem );
          
}
          
          
var $items $jitems.join('') );
          
          
$items.imagesLoaded(function(){
            $sitesTitle
.removeClass('loading').text('Sites using Isotope');
            
$sitesList.isotope'insert'$items );
          
});
          
        
});
      
      
    
});
  
</script>
]

 
Magento Community Magento Community
Magento Community
Magento Community
 
magedziner
Sr. Member
 
Avatar
Total Posts:  246
Joined:  2009-09-02
 

If we create a js file and called it in page.xml it works for all conflicts with jquery and prototype.
We do not need to add in all js files.

You can try once using jQuery instead of $j.
Hope it helps !

 
Magento Community Magento Community
Magento Community
Magento Community
 
brunomarshall
Guru
 
Avatar
Total Posts:  367
Joined:  2009-08-04
 

Hello ,

please replace all $ symbol with the Word jQuery

and then try any more question please let me know.

 
Magento Community Magento Community
Magento Community
Magento Community
 
DFS
Jr. Member
 
Total Posts:  25
Joined:  2011-01-03
 
brunomarshall - 19 June 2011 07:42 PM

Hello ,

please replace all $ symbol with the Word jQuery

and then try any more question please let me know.

I am sorry this is not working for me. hummmm

I am starting off with a very simple jQuery code to test.

so I created a js file and added only the following

var jQ jQuery.noConflict()

On the XML i added

<action method="addjs"><script>myJS-extension/jquerynoConflict.js </script></action>
      <
action method="addjs"><script>myJS-extension/jquery.js</script></action>
<
action method="addjs"><script>myJS-extension/emailCapture.js</script></action>

emailCapture.js has the following code

function initCapture(){

        
if (!getCookie('emailCapture'))
        
{
        
(function(jQ){
                jQ
("#emailCap").fadeTo("fast",1);            
            
})(jQuery);
        
}
        else{
            document
.location.href="htpp://www.domain.com";
        
}
    }

the Jquery still works but it still conflicting with prototype.

Am i missing something?

thanks in advance.

 
Magento Community Magento Community
Magento Community
Magento Community
 
neofelis
Jr. Member
 
Avatar
Total Posts:  23
Joined:  2009-05-24
Timmendorfer Strand
 

Has anyone a ready hardcoded solution for jQuery isotope Integration with filter, sort and infinite scroll?

 
Magento Community Magento Community
Magento Community
Magento Community
 
benjjj6
Jr. Member
 
Total Posts:  4
Joined:  2011-07-07
 

Has anyone managed to solve this?

If you could explain how to integrate Isotope with Magento it would really help me.

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
CodepoolLtd
Jr. Member
 
Avatar
Total Posts:  2
Joined:  2012-12-15
Manchester
 

We offer a module that will in integrate isotope nicely for you:

http://www.magentocommerce.com/magento-connect/catalog/product/view/id/15643/

If you have any difficulties let me know!

 
Magento Community Magento Community
Magento Community
Magento Community
 
GitaStreet
Jr. Member
 
Total Posts:  1
Joined:  2011-08-07
Aalborg, Danmark
 

I found this Magento Extension for Isotope. Haven’t tested it yet, but the demo looks promising.

http://www.magebay.com/extension/isotope-filter-navigation.html

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top