Yii 1.1: xflexslider

A widget wrapper for excellent JQuery FlexSlider plugin
18 followers

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

#14554 report it
sergmoro1 at 2013/08/22 08:43am
bag - 1. all ids are equal on a page, 2. All triggers have the same name

So, some changes:

When define slides you should define unique id. I did it like this

$defs[]=array('slides'=>$slides,'flexsliderOptions'=>$options,'htmlOptions'=>array('id'=>'flexslider_'.$position.$i));

Changes in XFlexSlider.php

public function run()
{
...
if(!isset($this->htmlOptions['id']))
    $this->htmlOptions['id']=$this->getId();
    //$this->htmlOptions['id']=self::DEFAULT_SLIDER_ID;
...
}
...
public function registerClientScript()
{
...
//trigger the slider
$cs->registerScript(
      'flexslider_trigger_'.$this->htmlOptions['id'],
      '
        $(window).load(function() {
        $(\'#' . $this->htmlOptions['id'] . '\').flexslider(' . $param  . ');
            ' . $js_thumb . '
        });
      ',
      CClientScript::POS_END
    );      
}

That's work.

#14545 report it
sergmoro1 at 2013/08/22 04:52am
more then one slider on page

Tried to put tree sliders, but work only last. Is it a problem or I did't set something?

#13501 report it
fernandrez at 2013/06/02 01:04am
undefined

I try to use thunbnails for navigation but I get an undefined url for the image.

#12614 report it
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 report it
zanforlin at 2012/09/14 03:01pm
Thumbs

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

#9398 report it
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 report it
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 report it
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();

by

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

Now we can use callback function like:

'before' => 'js:function(slider) { console.log("test"); }'
#9333 report it
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 report it
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 report it
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?..

Leave a comment

Please to leave your comment.

Create extension