orbitslider

Yii Framework Extensions

Createnew extension

Popular Tags

orbitslider A Images Slider - With Images Count and Navigation Horizental and Vertical Images Slider

Requirements
Usage
Resources

This extension could be used to create a slider of Images to display in horizontally and vertically.

This is based on Orbit Slider.

http://www.zurb.com/playground/jquery_image_slider_plugin

Requirements ¶

Yii 1.1.5

Usage ¶

Copy the OrbitSlider folder to the extensions

$this->widget('application.extensions.OrbitSlider.OrbitSlider',
              array(
                    'images'=>array(
                        array(
			'img'=>'images/banner/banner_1.png',
			 'url'=>'url',
			), 
                        array(
			'img'=>'images/banner/banner_2.png',
			 'url'=>'url2',
			), 
                        array(
			'img'=>'images/banner/banner_3.png',
			 'url'=>'url3',
			),                     
                    ),
                    'slider_options'=>array(
                        'width'=>'1000',
                        'height'=>'330',
                        'animation'=>'horizontal-slide',
                        'bullets'=>true,
                     ),
              )

                
);

Resources ¶

...external resources for this extension...

5 5

12 followers

2 087 downloads

Yii Version: 1.1

License: BSD-2-Clause

Category: User Interface

Developed by: PeRoChAk

Created on: Dec 29, 2010

Last updated: 13 years ago

Downloads

OrbitSlider1.3.zip

show all

Related Extensions

User Contributed Notes 5

#2425

1 0

Doesn't seem to work properly?

All of the image are overlapping each other and the descriptions just appear as a unordered list behind the images.

No javascript errors, the css and javascript file both seem to be linked properly, my image urls are valid and match the structure needed for the gallery.

One thing I did notice is that demo url you posted is running jQuery 1.4.2, Yii 1.1.5 uses jQuery 1.4.4..

DarkNSF at Dec 29, 2010, 8:24:42 PM

#2464

1 0

Updated

Updated Caption error

PeRoChAk at Jan 6, 2011, 11:26:04 AM

#2833

1 0

Not working properly

I guess you need to make test first before uploading extensions here...

ejac at Feb 15, 2011, 5:49:31 AM

#5816

1 0

Needs work

First go to http://www.zurb.com/playground/jquery_image_slider_plugin and download the latest version of the plugin. Then move the new jquery.orbit.js to assets/js, and the new orbit.css and orbit image folder to assets/css.

Second there are three parameters you can pass to the image array: img, caption and url. img is the file path to the image, caption is the caption, ect...

Third here is my modified ext\OrbitSlider\OrbitSlider.php. It's got a modified makeImages function and is cleaned up a bit.

<?php
/**
 * Description of OrbitSlider
 *
 * @author Perochak  <me@perochak.com> <me@perochak.com>
 * @uses Yii v.1.1.5
 *  Ver : 1.3
 */

class OrbitSlider extends CWidget {

    public $name = 'orbit';
    public $images=array();
    public $slider_options=array();
    public $default_options=array(
        'timer'=>true,
        'bullets'=>true,
        'animation'=>'fade',
        'width'=>'400',
        'height'=>'300',
        'opacity'=>'0.5',
        'animationSpeed'=>'800',
        'advanceSpeed'=>'5000',
        'startClockOnMouseOut'=>true,
        'startClockOnMouseOutAfter'=>'5000',
        'directionalNav'=>true,
    );
    public function init() {
        parent::init();
    }

    public function makeImages() {
        $html = '<div id="' . $this->name . '">' . "\n";
        $i=0;
        $caption='';
        foreach ($this->images as $img) {
            $image = '<img src="' . $img['img'] . '"';
            if(isset($img['caption'])){
                $image.=' alt="" data-caption="#htmlCaption'.$i.'"';
                // $image.=' alt="dasdf" caption="#img'.$i.'"';
                //$caption .= '<span class="orbit-caption" id="img'.$i.'">' . $img['caption'] . '</span>' . "\n";
                $caption .= '<span class="orbit-caption" id="htmlCaption'.$i.'">' . $img['caption'] . '</span>' . "\n";
            }
            $image.= '/>';

            if(isset($img['url']))
            {
             /* Originally the url parameter only accepted controller/action string not links to an external site like http://www.example.com.
              * My fix is below. Now when I want to link to an external site I pass a plain string but
              * if I want a controller/action I wrap it in an array. Checking for "http://" at the beginning would be another way to do it.  */
                if(is_array($img['url'])) {
                    $image = '<a href="'.Yii::app()->createUrl($img['url'][0]).'" data-caption="#htmlCaption'.$i.'">'.$image.'</a>';
                } else {
                    $image = '<a href="'.$img['url'].'" data-caption="#htmlCaption'.$i.'">'.$image.'</a>';
                }
            }
            $html.=$image . "\n";
            $i++;
        }
        $html .= '</div>' . "\n";
        $html .=$caption;
        return $html;
    }

    /**
     * Run the widget, including the js files.
     */
    public function run() {
        $cs = Yii::app()->clientScript;

        $dir = dirname(__FILE__) . DIRECTORY_SEPARATOR;
        $baseUrl = Yii::app()->getAssetManager()->publish($dir . 'assets');

        foreach($this->slider_options as $key=>$val){
            $this->default_options[$key]=$val;
        }
        $this->default_options = CJavaScript::encode($this->default_options);

        $clientScript = Yii::app()->getClientScript();

        $clientScript->registerCssFile($baseUrl . '/css/orbit.css'); //http_build_query($cssparams)

        $clientScript->registerCoreScript('jquery');

        $clientScript->registerScriptFile($baseUrl . '/js/jquery.orbit.min.js');

        $js =  "$(window).load(function() {
            $('#{$this->name}').orbit(
        $this->default_options
            );
        });";

        $cs->registerScript('Yii.Orbit' . $this->name, $js);
        echo $this->makeImages();
    }

}
?>

TomTheGeek at Nov 16, 2011, 6:03:28 AM

#7805

0 0

Modified OrbitSlider

Nice extension, needed to make a few updates for my requirements though.

Have put in the changes and bug fixes posted earlier for links and captions.
Added the ability to have HTML content slides, custom css on each slide, working width/height options, and updated to the latest version of OrbitSlider.

Codes @ http://github.com/an0nz/yii-orbitslider if anyone is interested

an0nz at Apr 19, 2012, 11:18:44 AM

Categories