Yii 1.1: flexpictureslider

Slideshower - Adjust the pictures to specified dimensions

This extension adjusts the pictures to specified width and height without stretch or changing picture's ratio. So there is no need to resize your image or worry about the resolution of user's screen The extension uses javascript functions to show a centered part for each picture.


  • Developed and tested with Yii 1.1.12 but may working with older versions too.
  • JQuery


1) extract folder in /protected/extensions

2) include the flex slider in page by code like this

Yii::app()->clientScript->registerCoreScript('jquery'); //if you do not set yet
  //you have to put this code in your view file
  array('imageBlockSelector' => '#myslider', //the jquery selector
  //or with full custom parameters
    'imageBlockSelector' => '#myslider', //the jquery selector
    'widthSlider' => '900', //or you can use jquery '$(window).width()/1.6',
    'heightSlider' => '275', //or you can use jquery '$(window).height()/1.6',
    'slideUnitSize' => 'px', //px or %
    'timeBetweenChangeSlider' => 4000,
    'slideRandomStart' => true, //only for version 1.0
    'timeDelayAnimation' => 1000, //the time before slider starts in miliseconds
    'sliderStartFrom' => 0, //if sliderSuffle is set false, only for version 1.1
    'sliderSuffle' => true, //suffle the pictures for random display, only for version 1.1
//first include your images in your path like <site root>images/01.jpg <site root>images/02.jpg etc
  <div id="myslider">
  echo CHtml::image(Yii::app()->request->baseUrl . '/images/01.jpg', 'alt 1');
  echo CHtml::image(Yii::app()->request->baseUrl . '/images/02.jpg', 'alt 2');
  echo CHtml::image(Yii::app()->request->baseUrl . '/images/03.jpg', 'alt 3');
  echo CHtml::image(Yii::app()->request->baseUrl . '/images/04.jpg', 'alt 4');
  echo CHtml::image(Yii::app()->request->baseUrl . '/images/05.png', 'alt 5');


imageBlockSelector: the jquery selector of the slider (like #mydiv)
slideRandomStart: if the slider start with random image or not (false,true) (only ver 1.0)
widthSlider: the width of desired area (like '800' or $(window).width()/1.6)
heightSlider: the height of desired area (like '600' or  $(window).height()/1.6)
slideUnitSize: the unit 'px' or '%'
timeBetweenChangeSlider: the time between changing of images in miliseconds (like 2000)
timeDelayAnimation: the time before slider starts in miliseconds
sliderStartFrom: slider starts from n-th picture (if sliderSuffle is set false) only ver 1.1
sliderSuffle: false-true, suffle the pictures for random display, only ver 1.1


Try out a demo

Total 8 comments

#19976 report it
brzk at 2016/11/14 01:30pm
add caption

it's great extensions, thank you but i want to add caption in my imageblocksector. can you tell me how to make it happen?

#15995 report it
ahabsy at 2014/01/08 01:25am

thaank you for the photos in folder reply

#15985 report it
Kostas Apazidis (KonApaz) at 2014/01/07 09:33am
RE: full folder

You must first specify the images. This extension affects by javascript the images so you could generate all images like that

<div id="myslider">
$images = glob($yourDir . DIRECTORY_SEPARATOR . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
foreach ($images as $imagePath) {
 $imageUrl = //... create the image url by path $imagePath
 echo CHtml::image($imageUrl, 'alt image...');
} ?>
#15978 report it
ahabsy at 2014/01/07 02:33am
full folder

is it possible to get full folder, without specifying the photos

#15704 report it
Kostas Apazidis (KonApaz) at 2013/12/08 12:38pm
RE: #15701

Hi InterBoy

could you give us please more specific details about the error?

#14796 report it
andromeda at 2013/09/10 07:37am

sorry bro, i'm forget about some code.. slider was succcesfull.. thnks

#14795 report it
Kostas Apazidis (KonApaz) at 2013/09/10 05:44am
RE: 14793

Hi andromeda

could you give us more details about the ERROR ? Thanks :)

#14793 report it
andromeda at 2013/09/10 05:13am
about slider


Leave a comment

Please to leave your comment.

Create extension