Yii 1.1: isotope-jquery

Isotope or Masonry Yii Extension copycat of pinterest, pose style
16 followers

Download the file and put it on your extension folder

Requirements

Yii 1.1.12 or above haven't tested 1.1.12 below

Usage

Extension is similar to CListView.

<?php
$this->widget('ext.isotope.Isotope',array(
    'dataProvider'=>new CActiveDataProvider('User'),
    'itemView'=>'_view',
    'itemSelectorClass'=>'item',
    'options'=>array(), // options for the isotope jquery
    'infiniteScroll'=>true, // default to true
    'infiniteOptions'=>array(), // javascript options for infinite scroller
    'id'=>'wall',
));

create a _view.php, make sure you put a width to make isotope works

<div class="post item" style="220px">
    <div class="well">
        <h4>
            <a href="<?php echo $data->link ?>" target="_blank"><?php echo $data->title ?></a>
        </h4>
        <div class="info">
            <span class="badge"><?php date('M jS, g:ia',strtotime($data->created_at)) ?></span>
        </div>
    </div>
</div>

Resources

Total 10 comments

#15762 report it
spyfx at 2013/12/15 11:00am
update with javascript

Is it possible to append new items on the top of the isotope list (default append is on the bottom of the list)

#14075 report it
rclai89 at 2013/07/17 11:04am
reLayout

If I remember correctly, to refresh it, you do:

$isoContainer.isotope('reLayout');

You can look here for more methods.

http://isotope.metafizzy.co/docs/methods.html

#14070 report it
Trần Minh Quang at 2013/07/17 08:02am
Update isotope like clistview ?

I just want to update an isotope like I usually do with ListViews...

$.fn.yiiListView.update("isotopeId");

Any ideas?

#11342 report it
DrMabuse at 2013/01/07 06:44am
the docu old

the docu old

<?php
$this->widget('wr_blog.extensions.isotope.Isotope',array(
    'dataProvider'=> $model,
    'itemView'=>'_testview',
    'template' => '{items}{pager}',
    'itemSelectorClass'=>'item',
    'options'=>array(
        'layoutMode' => 'masonry',
        'resizesContainer' => true,
        'animationEngine' => 'jQuery'
    ), // options for the isotope jquery
    'infiniteScroll'=>true, // default to true
    'infiniteOptions'=>array(
        'loading' => array(
            'msgText' => 'Bilder werden geladen ...',
            'finishedMsg' => 'Bilder wurden vollständig geladen'
        )
    ), // javascript options for infinite scroller
    'id'=>'wall',
));
?>
#11341 report it
DrMabuse at 2013/01/07 06:29am
issue with infinite Options

Hi . i want to change the loadingText here my Config

<?php
$this->widget('wr_blog.extensions.isotope.Isotope',array(
    'dataProvider'=> $model,
    'itemView'=>'_testview',
    'template' => '{items}{pager}',
    'itemSelectorClass'=>'item',
    'options'=>array(
        'layoutMode' => 'masonry',
        'resizesContainer' => true,
        'animationEngine' => 'jQuery'
    ), // options for the isotope jquery
    'infiniteScroll'=>true, // default to true
    'infiniteOptions'=>array(
        'loadingText' => 'Bilder werden geladen ...',
        'doneText' => 'keine weiteren Bilder ...'
    ), // javascript options for infinite scroller
    'id'=>'wall',
));

Here my output Js

var $isoContainer = $('#wall .items');$isoContainer.imagesLoaded(function(){$isoContainer.isotope({'layoutMode':'masonry','resizesContainer':true,'animationEngine':'jQuery','itemSelector':'.item'})});
    $isoContainer.infinitescroll({'loadingText':'Bilder werden geladen ...','doneText':'keine weiteren Bilder ...','navSelector':'#wall .pager','nextSelector':'#wall .pager .next a','itemSelector':'.item','debug':true},function( newElements ) { /* hide new items while they are loading*/ var newElems = jQuery( newElements ); $isoContainer.append(newElems).imagesLoaded(function(){$isoContainer.isotope( 'appended', newElems )});});

But nothing changed always the standard Text any ideas ?

#11315 report it
DrMabuse at 2013/01/05 09:02am
Ok found the failure

don set overflow hidden on html and body ^^ . Thx for nice Extension without bugs and clean Code. Some Trouble with Browser if i use Images i fix it with the follow Code.

$cs->registerScript('isotope',"var \$isoContainer = $('#{$this->itemContainerId} .{$this->itemsCssClass}');\$(window).load(function(){\$isoContainer.isotope(".CJavaScript::encode($this->options).")});");

$(window).load(function()

and for infinite i insert the elements and dont append

[php] protected function assignInfiniteCallback(){ // trigger Masonry as a callback $defaultCallback="function( newElements ) { /* hide new items while they are loading*/ var newElems = jQuery( newElements ); \$isoContainer.delay(500).isotope( 'insert', newElems );{$this->infiniteCallback}}"; return $defaultCallback; }



Maybe anyone helps out

#11298 report it
bryglen at 2013/01/04 06:50am
Doc

look at your queries. maybe your data has 10rows and doesnt have pagination anymore.

#11295 report it
DrMabuse at 2013/01/04 04:20am
Hello some problems to load the next page

this is my Config

<?php
$this->widget('wr_blog.extensions.isotope.Isotope',array(
    'dataProvider'=> $model,
    'itemView'=>'_testview',
    'itemSelectorClass'=>'item',
    'options'=>array(
        'layoutMode' => 'fitRows',
        'resizesContainer' => true,
        'animationEngine' => 'jQuery'
    ), // options for the isotope jquery
    'infiniteScroll'=>true, // default to true
    'infiniteOptions'=>array(
 
    ), // javascript options for infinite scroller
    'id'=>'wall',
));

when i scrolled to end of page there was no network action . My quetsion i have to configure the infinite ? i lokk at the demo and my script are the same like the demo

#11133 report it
bryglen at 2012/12/19 08:57am
Mbala

That's depend on your CSS framework, mine I'm using Bootstrap Twitter as my CSS framework when you check the http://bryantan.info/isotope/ and resized it! it is working perfectly.

but anyway congrats.

#11132 report it
mbala at 2012/12/19 08:52am
Nice Output

But when i resize the window style will not work properly.

Leave a comment

Please to leave your comment.

Create extension
Downloads