1. Requirements
2. Usage
3. Resources

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.

Requirements ¶

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

Usage ¶

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
  $this->widget('ext.FlexPictureSlider.FlexPictureSlider',
  array('imageBlockSelector' => '#myslider', //the jquery selector
  );
 

  //or with full custom parameters
  $this->widget('ext.FlexPictureSlider.FlexPictureSlider',
  array(
    '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">
  <?php
  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');
  ?>
  </div>

Parameters

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
 

Resources ¶

Try out a demo