xflexslider Follow @yiiframework

A widget wrapper for excellent JQuery FlexSlider plugin

Update

Update ¶

Ver 2.1.1

fix js_thumb - not defined - tinny

Ver 2.1

support Thumbnail ControlNav Pattern - thanks to @got 2 doodle
support Carousel Slider as Navigation

Ver 2.0 -- upgrade flexslider to ver 2.0; -- code changes as per suggestion by clem & extj, thx;

Overview ¶

Looking around for a good slider widget, ends up with FlexSlider. Here is quote from the site:

Flexslider An awesome, fully responsive jQuery slider plugin.

XFlexSlider is a wrapper widget which allow Yii-er to have nice slider with easy. It supports sliding image - local or remote, html content from view, take a look you won't be disappointed.

Requirements ¶

Tested in Yii-1.1.10
JQuery core script

Install ¶

unzip content xflexslider.zip to /protected/extensions/

it also comes with a full yii scaffold site with xflexslider demo on homepage.

Usage ¶

in your view file

<?php
$this->widget('ext.xflexslider.XFlexSlider',array(
    'slides'=>array(
        //use content
        'slide1' => array(
            'id'=>'slide1',
            'caption'=>'Captions and cupcakes. Winning combination.',
            'content'=>'<img src="' . Yii::app()->request->baseUrl . '/images/demo-stuff/inacup_samoa.jpg" />',
        ),
        //use view
        'slide2'=>array(
            'caption'=>'This image is wrapped in a link!',
            'view'=>'_slide2',
        ),
    ),
 
    'flexsliderOptions'=>array(
    //  'animation' => "'slide'",
    //  'slideDirection' => 'vertical',
        'mousewheel' => true,
    ),
));
?>

Resources ¶

demo from original plugin (removed)

Total 8 comments

#12614

v_bogdan at 2013/04/01 06:39pm

Thumbs

Thats work. Just add an option:

'controlNav'=> "thumbnails"

That's must be in doc's. Enjoy.

#9844

zanforlin at 2012/09/14 03:01pm

Thumbs

Still cannot use this with thumbs. What can I do?

#9398

got 2 doodle at 2012/08/08 04:02pm

To use the thumbnails

Modify the extension renderSlides function

foreach($this->slides as $id=>$slide)
{
     if(isset($slide['thumb']))
        {
        echo '<li data-thumb="'.$slide['thumb'].'" >'."\n";
                     } else {
        echo "<li>\n";
                              }
//echo '<div id="block" style="width:300px;height:250px;">';
 
    echo '<div id="flexslide-block-' . $id . '"'; 
...

Set up the data like this

//use content
      'slide1' => array(
      'id'=>'slide1',
      'caption'=>'Captions and cupcakes. Winning combination.',
      'thumb'=>Yii::app()->request->baseUrl . '/images/slider/thumb1.jpg',
      'content'=>'<img src="' . Yii::app()->request->baseUrl . '/images/slider/slider1.jpg" />',
        ),

doodle

#9397

got 2 doodle at 2012/08/08 03:42pm

Thumbnaiils?

It appears that it is not supporting thumbnail navigation? Or am I missing something?

<li data-thumb="slide2-thumb.jpg">
      <img src="slide2.jpg" />
    </li>

doodle

#9337

Clem at 2012/08/04 07:34am

New version

Thanks a lot for this extension! very usefull.

FlexSlider V2 is here! No many changes... juste replace the js file in your archive.

I changed the line

$param = $this->prepareFlexSliderOptions();

$param = CJavaScript::encode($this->flexsliderOptions);

Now we can use callback function like:

'before' => 'js:function(slider) { console.log("test"); }'

#9333

Extj at 2012/08/04 04:35am

Edit XFlexSlider.php

I find two errors in this file.

First, if any value of flexsliderOptions is false, like this:

'flexsliderOptions' => array('keyboardNav' => false)

In line

$param .= $key . ":" . $value . ",\n";

Value of false = ''. And it take error in JS. I solved it:

if($value === false)
    $param .= $key . ":" . "false" . ",\n";
else
    $param .= $key . ":" . $value . ",\n";

Next, IE7 expects param after last ',' and take error. My solution:

if ($param)
{
    // For IE7 remove last ','
    $param = substr($param, 0, strlen($param)-2);
    $param = "{\n" . $param . "}";
}
return $param;

Edit your XFlexSlider.php like this.

#7939

rootbear at 2012/04/27 10:00am

sorry, original site of this plugin has changed their website

hi, peter

thanks for the finding, original site of this plugin has changed their website so the demo page is not available anymore.

however, you could still download xflexslider-demo-site.zip, it's yii scaffold site with this extension demo installed. i did mine in windows xampp, so you may want to adjust yii path in your index.php file if you using linux or others.

i have removed the original demo link from this page, sorry about that. i guess i need host a demo myself or maybe Qiang and team want provide us a playground here, ;-)

-rb

#7934

Peter JK at 2012/04/27 03:59am

error on the original plugin website..

hi root beer,

the demo link cannot be opened. is that something wrong?..

Please login to leave your comment.