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)
error on the original plugin website..
hi root beer,
the demo link cannot be opened. is that something wrong?..
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
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.
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"); }'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
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
Thumbs
Still cannot use this with thumbs. What can I do?
Thumbs
Thats work. Just add an option:
'controlNav'=> "thumbnails"That's must be in doc's. Enjoy.
undefined
I try to use thunbnails for navigation but I get an undefined url for the image.
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?
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.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.