isotope-jquery

isotope-jquery 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 ¶

4 0

1 638

Yii Version: 1.1

License: BSD-2-Clause

Category: User Interface

Developed by:

bryglen

Created: Dec 17, 2012

Updated: 12 years ago

Downloads

isotope.zip

show all

Related Extensions

#11132

0 0

Nice Output

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

mbala at Dec 19, 2012, 1:52:49 PM

#11133

0 0

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.

bryglen at Dec 19, 2012, 1:57:49 PM

#11295

0 0

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

DrMabuse at Jan 4, 2013, 9:20:56 AM

#11298

0 0

Doc

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

bryglen at Jan 4, 2013, 11:50:45 AM

#11315

0 0

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

DrMabuse at Jan 5, 2013, 2:02:58 PM

#11341

0 0

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 ?

DrMabuse at Jan 7, 2013, 11:29:22 AM

#11342

0 0

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',
));
?>

DrMabuse at Jan 7, 2013, 11:44:52 AM

#14070

0 0

Update isotope like clistview ?

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

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

Any ideas?

Trần Minh Quang at Jul 17, 2013, 12:02:20 PM

#14075

0 0

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

rclai89 at Jul 17, 2013, 3:04:23 PM

#15762

0 0

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)

spyfx at Dec 15, 2013, 4:00:57 PM

#18589

0 0

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.

jorgito_ml at Nov 24, 2014, 11:09:24 AM

Please only use comments to help explain the above extension.
If you have any questions, please ask in the forum instead.

Join the conversation to share a note.