Yii 1.1: egalleria

Extension to support Galleria JavaScript image gallery.
16 followers

EGalleria

Version: 0.2 Author: Dimitrios Meggidis <tydeas.dr (at) gmail.com>

Description

Yii extension to support the Galleria Javascript image gallery. The galleria files that are included are from commit: 373a3a77e83eef919046.

Install

Extract the zip file under the extension folder and should look like.

    ./webapp/protected/extension/EGalleria

or use the github.com and clone the repository under the extension folder.

    git clone https://github.com/dmtra/EGalleria

Configuration

Add import of EGalleria extension in your config/main.php file:

'imports'=>array(
        ...
        'application.extensions.EGalleria.*'
        ...
    ),

Use

You can use the widget in 2 diff ways. You can attach a dataProvider and the images will be rendered from that provider or you can create the dom structure need for the galleria plugin your own.

With Dataprovider

To bind a dataprovider with the widget you need to specify at least which of the model attributes is the url for the image.

This can be achieved in 2 ways: - By passing "binding" attribute at the initialization of widget. - Or adding EGalleriaBehavior in your model behaviors() function.

"Behavior" feature is usefull when you want to use same model for more than 1 EGalleria widget so you don't have to define binding again and again.

Behavior definition

In your model (lets call it ImageModel ) behaviors() function add:

class ImageModel extends CActiveRecord
{
    ...
    public function behaviors()
    {
        ...
        'egalleria'=>array(
            'class'=>'application.extensions.EGalleria.EGalleriaBehavior',
            'image'=>'image_field_name', //This is a required binding and will be the src of image element
            'description'=>'image_description', //Optional
            'title'=>'image_title', //Optional
            'link'=>'image_link', //NOT SUPPORTED IN CURRENT VERSION
            'author'=>'image's_author' //NOT SUPPORTED IN CURRENT VERSION
        ),
        ...
    }
...
}
Binding in initialization of widget

Check later in example. The available attributes are the same with the behavior above.

Examples

In your view file add.

  1. Use of dataprovider with behavior defined in model.
$data = new CActiveDataProvider('ImageModel');
$this->widget('EGalleria', array(
    'dataProvider'=>$data,    
));
  1. Define binding in init with no model behavior
$data = new CActiveDataProvider('ImageModel');
$this->widget('EGalleria', array(
    'dataProvider'=>$data,
    'binding'=>array(
        'image'=>'model_image_src_field',
    ),
));

Without a Dataprovider

You can use EGalleria widget without dataprovider like:

<?php
$this->beginWidget('EGalleria');
?>
<ul>
<img src"/testo.png" alt="Description of image" title="Title of image" />
<img src"/test1.png" />
<img src"/test2.png" />
<img src"/test3.png" />
<?php 
$this->endWidget();
?>

For more information on basic dom structure, check.

More options

There are more options that can be applied to the widget at definition. - "galleria"=>array(..) An associative array with all the options of the galleria plugin. - "srcPrefix"=>"protected/data/..", If this property is defined then it will be preappened in each image src url. $src = $srcPrefix.$image;

Ending

I have not tested all the galleria options, so i need some help on this by you :). Callback,themes and api features of galleria are not yet implemented, will be under request. Any suggestions or contributions are welcome, but please use the repository of github.com for such thinks. Please report bugs or leave comments.

Links

Total 14 comments

#9371 report it
fad at 2012/08/07 07:45am
error in install instruction

Update install instruction, link to github is wrong, correct link:

git clone https://github.com/dmtrs/EGalleria

#7126 report it
sobit at 2012/02/25 08:03am
@tydeas_dr

I figured the problem by myself. If someone got the same problem, here's the solution.

In the EGalleria.php file change line 101 from:

$cs->registerScript("egalleria_script_".$this->id, $galleriaScript, CClientScript::POS_READY);

to:

$cs->registerScript("egalleria_script_".$this->id, $galleriaScript, CClientScript::POS_END);
#7120 report it
dcreeves88 at 2012/02/24 06:02pm
DIRECTORY SEPERATOR

Just a heads up to tydeas & any Windows users. I was having an issue getting the JS & CSS to register. Turns out it was DIRECTORY_SEPARATOR messing up the path. Here's the changed code:

private function registerScripts()
    {
        $cs = Yii::app()->clientScript;
 
        if($this->css===null) {
            $cssFolder = dirname(__FILE__).'/'.$this->themePath.'/';
            $cssFolder .= $this->themeName.'/';
 
            $cssAssetPath = Yii::app()->getAssetManager()->publish($cssFolder);
            foreach($this->cssFiles as $file)
            {
                $cs->registerCssFile($cssAssetPath.'/'.$file);
            }
        }
        if($this->js===null) {
            $jsPath = dirname(__FILE__).'/'.$this->jsPath.'/';
 
            if(!$cs->isScriptRegistered('jquery')) {
                $cs->registerCoreScript('jquery');
            }
            $this->jsAssetPath = Yii::app()->getAssetManager()->publish($jsPath);
            foreach($this->jsFiles as $file)
            {
                $cs->registerScriptFile($this->jsAssetPath.'/'.$file, CClientScript::POS_HEAD);
            }
        }
        $galleriaScript = "var jsn = eval(".CJSON::encode($this->galleriaOptions)."); $('#egalleria_".$this->id."').galleria(jsn);";
        $cs->registerScript("egalleria_script_".$this->id, $galleriaScript, CClientScript::POS_READY);
    }
    public function init()
    {   
        $this->avOptions = require_once(dirname(__FILE__).'/'."galleria.options.php");
        $this->initGalleria();
 
        $this->registerScripts();
 
        echo "<div id='egalleria_".$this->id."' >";       
        parent::init();

Anyways, thanks for the excellent extension!

#7099 report it
sobit at 2012/02/23 03:01pm
@tydeas_dr

Hi again. Didn't you tried this?

#7051 report it
sobit at 2012/02/21 01:08pm
@tydeas_dr

I'm getting the same problem on Google Chrome 17 on Mac OS X and on Google Chrome 15 on Windows. Please do the following steps to view the problem:

With your Google Chrome: 1. Open http://luxbrazilguide.com/ 2. There's only one record showing in "Escorts of the Month", open it from the main page 3. You will see 4 pics showing near each other 4. Then hit F5 to reload the page and find that everything's ok

#7050 report it
tydeas_dr at 2012/02/21 12:55pm
@Sobit

Hello there, There is something must be wrong with your local setup. I have checked it with: - Google Chrome 17.0.963.56 - Firefox 3.6.24 On a linux Fedora 14 versions and everything looks fine. Pretty good pictures over there :) The code is pretty much simple to give you this trouble.

#7044 report it
sobit at 2012/02/21 02:30am
Update link in the description

Also update please a link to the beginners guide. It doesn't work.

http://galleria.aino.se/getting_started/beginners_guide/

#7042 report it
sobit at 2012/02/21 01:25am
@tydeas_dr

Hi again. Here's where I'm getting the problem.

Opera works perfect. Chrome doesn't open it until you refresh the page. Mozilla opens it only once and nothing helps to show it again until you restart the browser. Here's the code:

#7039 report it
tydeas_dr at 2012/02/20 05:04pm
@Sobit

Hello there Sobit, Thank you. Can you provide with more information related to your problem. Some code snippets of what you are doing and screenshots would be ideal. BUT please don't do it here, use pastebin.com or similar tool and share the link. Friendly and geeky, Tydeas

#7038 report it
sobit at 2012/02/20 03:49pm
Extension not loading for the first time

Hi,

Firstly I would like to thank you for that great extension. But I've got a problem. Galleria widget used on some page and when I open it for the first time, it doesn't show the gallery itself. It's shown only on page reload. What might be a problem of this?

Thanks in advance, Sobit

#5093 report it
Dan S.K. at 2011/09/14 08:21am
require...

you might want to change

$this->avOptions = require_once(dirname(__FILE__).DIRECTORY_SEPARATOR."galleria.options.php");

to

$this->avOptions = require(dirname(__FILE__).DIRECTORY_SEPARATOR."galleria.options.php");

otherwise only first egalleria widget on the page will accept options

#4750 report it
edanb at 2011/08/11 03:33am
DIRECTORY_SEPARATOR 2.0

@trejder You are right, I had the same issue.

I believe DIRECTORY_SEPARATOR should only be used on file system directories and not URL's.

In a URL it should always be / (forward slash)

Btw awesome extensions, I might use it in my project.

#3357 report it
Trejder at 2011/04/05 05:14pm
DIRECTORY_SEPARATOR

Hi,

First of all - thank you for a great extensions. Looks superb! :)

However, I noticed strange thing only partially related to your extension, but to PHP in general.

You're using DIRECTORY_SEPARATOR, as I was doing and as I was told to do. But I found out that under Windows and XAMPP, DIRECTORY_SEPARATOR is being changed to Windows-like slash () and - if I'm not mistaken - this is not acceptable by Windows (XAMPP) version of Apache (strange), because this causes images, CSS files and JS scripts NOT to be loaded.

For example, your extension has generated such code for me:

<script type="text/javascript" src="/burdzy/assets/e8a2fa9c\galleria.js"></script>
<script type="text/javascript" src="/burdzy/assets/e8a2fa9c\galleria.classic.js"></script>

Which is wrong and is NOT WORKING under Windows + XAMPP. Have you (or any other developer using this great extension) noticed something similar?

#3055 report it
Gustavo at 2011/03/10 09:29pm
wrong link

the link to the official galleria site is wrong

other that

thanks for sharing the extension, it looks great

Leave a comment

Please to leave your comment.

Create extension