Yii 1.1: flexpictureslider

Slideshower - Adjust the pictures to specified dimensions
6 followers

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

Total 7 comments

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

thaank you for the photos in folder reply

#15985 report it
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">
<?php
$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...');
} ?>
</div>
#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
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
forget

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

#14795 report it
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

ERROR

Leave a comment

Please to leave your comment.

Create extension