isotope-jquery Follow @yiiframework

Isotope or Masonry Yii Extension copycat of pinterest, pose style

Requirements

Usage

Resources

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 7 comments

#11342

DocSnyder at 2013/01/07 06:44am

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

DocSnyder 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

DocSnyder 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

bryglen at 2013/01/04 06:50am

Doc

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

#11295

DocSnyder 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

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

mbala at 2012/12/19 08:52am

Nice Output

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

Please login to leave your comment.