New Version

So I have somewhat redone the grid-list-jquery and put it in a separate file. The script now checks if the cookies already exists (this is what caused the problem before, because the cookie was only set after the first page load). All the hover effects and the toggle are now working.

Files

You can download the files here. Simply unpack the archive and overwrite these files in your /wp-contents/themes/ folder. (I have only added the files I made changes to.)

Demo

I hope this helps everyone who is still using this theme. You can see the working demo here: http://grid.alpipego.com/, the previous posts can be found at Part I and Part II.

Be sure to head over to their site today to get the latest news.
Join the berlinhipsterfestival2012 movement today.

So I can get the grid view by default, showing the right icons and all. But the one thing I couldn’t do was to get the rollover-effect on the first load of the page. Since I suppose most people don’t play around with the grid/list toggle… it is not that useful.

1. You have to modify a line on each of the index.php, loop.php and archive.php.
    
   • index.php Line 5:
     <a href="javascript: void(0);" id="mode"<?php if ($_COOKIE['mode'] == 'list') echo ' class="flip"'; ?>></a>

    

   • loop.php line 3:
     <div id="loop" class="<?php if ($_COOKIE['mode'] == 'list') echo 'list'; else echo 'grid'; ?> clear">

    

   • archive.php line 22:
     <a href="javascript: void(0);" id="mode"<?php if ($_COOKIE['mode'] == 'list') echo ' class="flip"'; ?>></a>
2. Then you’ll also have to modify the js/script.js.
   • script.js lines 45-63:
     

     /*** View mode ***/
     
             if ( $.cookie('mode') == 'grid' ) {
                 grid_update();
             } else if ( $.cookie('mode') == 'list' ) {
                 list_update();
             }
     
             $('#mode').toggle(
                 function(){
                     if ( $.cookie('mode') == 'list' ) {
                         $.cookie('mode','grid');
                         grid();
                     } else {
                         $.cookie('mode','list');
                         list();
                     }
                 },
                 function(){
                     if ( $.cookie('mode') == 'grid') {
                         $.cookie('mode','list');
                         list();
                     } else {
                         $.cookie('mode','grid');
                         grid();
                     }
                 }
             );
     
             function grid(){
                 $('#mode').removeClass('flip');
                 $('#loop')
                     .fadeOut('fast', function(){
                         grid_update();
                         $(this).fadeIn('fast');
                     })
                 ;
             }
     
             function list(){
                 $('#mode').addClass('flip');
                 $('#loop')
                     .fadeOut('fast', function(){
                         list_update();
                         $(this).fadeIn('fast');
                     })
                 ;
             }
     
             function grid_update(){
                 $('#loop').addClass('grid').removeClass('list');
                 $('#loop').find('.thumb img').attr({'width': '190', 'height': '190'});
                 $('#loop').find('.post')
                     .mouseenter(function(){
                         $(this)
                             .css('background-color','FFEA97')
                             .find('.thumb').hide()
                             .css('z-index','-1');
                     })
                     .mouseleave(function(){
                         $(this)
                             .css('background-color','#f5f5f5')
                             .find('.thumb').show()
                             .css('z-index','1');
                     });
                 $('#loop').find('.post').click(function(){
                     location.href=$(this).find('h2 a').attr('href');
                 });
                 $.cookie('mode','grid');
             }
     
             function list_update(){
                 $('#loop').addClass('list').removeClass('grid');
                 $('#loop').find('.post').removeAttr('style').unbind('mouseenter').unbind('mouseleave');
                 $('#loop').find('.thumb img').attr({'width': '290', 'height': '290'});
                 $.cookie('mode', 'list');
             }
     

 

3. Finally you will have to rotate the images/mode.png by 180°

That should do it. As you can see it worked for me.
You might have to change the color in line 100. If you changed colors elsewhere…

If you don’t want to modify the files yourself, write me an email and I’ll send mine.
Cheers!

[imagebrowser id=3]

[imagebrowser id=1]