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>
Nice Output
But when i resize the window style will not work properly.
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.
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
Doc
look at your queries. maybe your data has 10rows and doesnt have pagination anymore.
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 outissue 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 ?
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', )); ?>Update isotope like clistview ?
I just want to update an isotope like I usually do with ListViews...
$.fn.yiiListView.update("isotopeId");
Any ideas?
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
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)
Can't put multiple isotope instances on same view
I'm trying to put two isotope widgets on same view...but only the last is rendered.
Any clue?
PS: The two isotope widgets works separately.
... <div id="cont_following"> <?php $this->widget('ext.isotope.Isotope',array( 'dataProvider'=> $dp_siguiendo, 'itemView'=>'_viewFollowing', 'itemSelectorClass'=>'item_following', 'options'=>array(), 'infiniteScroll'=>false, 'infiniteOptions'=>array(), 'id'=>'iso_siguiendo', )); ?> </div> ... <div id="cont_follwed"> <?php $this->widget('ext.isotope.Isotope',array( 'dataProvider'=> $dp_seguido, 'itemView'=>'_viewFollowed', 'itemSelectorClass'=>'item_followed', 'options'=>array(), 'infiniteScroll'=>false, 'infiniteOptions'=>array(), 'id'=>'iso_seguido', )); ?> </div> ...Thx.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.