Yii 1.1: prettyphoto

Encapsulates the prettyPhoto jQuery lightbox clone
22 followers

PrettyPhoto encapsulates the prettyPhoto jQuery lightbox clone.

prettyPhoto is a full blown media lightbox that supports images, videos, flash, YouTube, iframes and ajax, or any other content through its custom_markup option (see the custom content tutorial for details)

Requirements

Tested with Yii 1.1.8, but should work with any version

Inheritance

PrettyPhoto » CWidget » CBaseController » CComponent

Properties

Defined by PrettyPhoto

  • assetsUrl string URL to PrettyPhoto assets. If empty the assets under the widget's directory will be published.
  • cssFile string Name of the CSS file to be published. This must be in the css directory under the assets URL. Defaults to 'prettyPhoto.css'
  • htmlOptions array HTML options for the enclosing tag.
  • gallery boolean Whether prettyPhoto is in gallery (many items) or single item mode. Defaults to true (gallery mode)
  • options array Additional options for prettyPhoto. Defaults to array()
  • scriptFile string Name of the javaScript file to be published. This must be under the assets URL. Defaults to 'jquery.prettyPhoto.js'
  • tag string The enclosing tag. Defaults to 'div'
  • theme string The prettyPhoto theme to use. Built-in prettyPhoto themes are: 'dark_rounded', 'dark_square', 'facebook', 'light_rounded', and 'light_square'. Defaults to 'facebook'

See the CWidget documentation for inherited properties.

Installation

Extract the files in the download to the application directory of your choice.

Usage

To use the widget put the following code in a view:

$this->beginWidget('path.to.PrettyPhoto', array
  id'=>'pretty_photo',
  // prettyPhoto options
  'options'=>array(
    'opacity''=>0.60,
    'modal'=>true,
  ),
));
 
echo Content links here;
 
$this->endWidget('path.to.PrettyPhoto');

Content links do not require the rel="prettyPhoto" attribute; this is added by the widget.

By configuring the options property, you may specify the options that need to be passed to prettyPhoto. Please refer to the prettyPhoto documentation for possible options (name=>value pairs).

Resources

Demos

prettyPhoto Documentation

Total 5 comments

#12033 report it
glyph at 2013/02/22 12:15am
Nice extension but...

It doesn't work well when multiple galleries are ajax loaded in a single view, and has conflicts with other plugins due to the use of global single-letter javascript variables.

For example, code like:

var n = RegExp("[\\?&]" + e + "=([^&#]*)").exec(m);

and

var s = this, p = false, c, t, q, v, l, k, h = a(window).height(), g = a(window).width(), i;

makes it difficult for someone to make sense of your code. It's also more likely to cause conflicts with other plugins than declaring vars with a few more letters.

We can spare the cpu cycles and bandwidth to add 3 extra letters to variable names, so before sprinkling your script with 1 letter variables, please think of your fellow coders.

Thanks.

p.s. As an update to this - I did manage to fix this javascript so it would work within any number of dynamically loaded ajax blocks, and any number of galleries in a view.

In the javascript you have to change all the usage of the c variable to window.c

Also there are some changes to how you have to call the widget, as mentioned in another comment. Here's how I call mine. I added one argument to the widget.

jqPrettyPhoto::addPretty('.'.$relSelector,jqPrettyPhoto::PRETTY_GALLERY,jqPrettyPhoto::THEME_FACEBOOK, $options, $relName);

Note the addition of the relname argument.

And in jqPrettyPhoto.php:

public static function addPretty($jsSelector=".gallery a", $gallery=self::PRETTY_GALLERY, $theme=self::THEME_FACEBOOK, $opts=array(),$relName){
 
        self::registerScript();
 
        $opts['theme']=$theme;
 
        Yii::app()->clientScript->registerScript($relName,'
        $("a[rel^=\''.$relName.'\']").prettyPhoto('.CJavaScript::encode($opts).');
        $(".micro-gallery img, .gallery img, .gallery-add img").show();
        ',CClientScript::POS_READY);
 
    }

With this method, replacing the rel with time() becomes unnecessary, since you pass the relname as an argument.

Finally, my gallery html is generated like so:

jqPrettyPhoto::addPretty('.'.$relSelector,jqPrettyPhoto::PRETTY_GALLERY,jqPrettyPhoto::THEME_FACEBOOK, $options, $relName);       
            $myGallery = '<div id="eventGallery_'.$mySmp->id.'" class="micro-gallery">';
            if ($mySmp->images) foreach ($mySmp->images as $img)  if ($img['path_micro']) {
                 if ($img['image']) $fileStr=$img['image'];
                 if ($img['magnification']) $magStr=' @ '.$img['magnification'].'x';
                 $myGallery .= '<a class="'.$relSelector.'" href="'.$img['path_lrg'].'" title="'.$fileStr.$magStr.'" rel="'.$relName.'['.$relSelector.']"><img class="hidden" src="'.$img['path_micro'].'" border=0 /></a>'; 
            }

In this way you can build multiple thumbnail galleries in nested loops from your Yii model(s), and they will all load up as separate grouped galleries.

Overall a very nice looking lightbox so I decided to stick with it for my application, but for reasons stated above it's a good idea to use longer var names, and also to think about the fact that people may be loading your widget via ajax calls, and may want to use multiples in a single view. So if anyone else gets the seemingly random, intermittent "TypeError: c is undefined," errors causing your gallery loading to fail, due to variable clobbering from multiple ajax requests, you'll know why.

If anyone wants my javascript file that has the c var replaced with window.c, here it is: http://pastebin.com/Lhbf1BHP

Hope my suffering helps someone else.

#7351 report it
russellfeeed at 2012/03/16 05:54am
Example contains syntax errors

Should be this...

$this->beginWidget('path.to.PrettyPhoto', array(
  'id'=>'pretty_photo',
  // prettyPhoto options
  'options'=>array(
    'opacity'=>0.60,
    'modal'=>true,
  ),
));
 
echo Content links here;
 
$this->endWidget('path.to.PrettyPhoto');
#6500 report it
pligor at 2012/01/15 05:05am
content links

content links mentioned above is simply something like that:

<a href="http://pligor.com/photo1.jpg">
click here
</a>
#5668 report it
Davey at 2011/10/31 08:11am
Multiple widgets

I noticed this script didn't handle multiple widgets on one page. To fix this, replace in PrettyPhoto.php:

Yii::app()->clientScript->registerScript(__CLASS__,"
            jQuery('#$id a').attr('rel','prettyPhoto".($this->gallery?'[]':'')."');
            jQuery('a[rel^=\"prettyPhoto\"]').prettyPhoto(".$options.');
        ',CClientScript::POS_END);

with:

Yii::app()->clientScript->registerScript('prettyPhoto_'.$id,"
            jQuery('#".$id." a').attr('rel','prettyPhoto_".$id."".($this->gallery?'[]':'')."');
            jQuery('a[rel^=\"prettyPhoto_".$id."\"]').prettyPhoto(".$options.');
        ',CClientScript::POS_END);
#4962 report it
bonnie at 2011/09/01 11:07am
Nice and powerful extension.

Thanks Yeti. It was a minute to get my listing working with this extension. Spending the whole day looking for such powerful extension. It saved me from rewriting my code. One thing to mention is that it does not link to next image in internet explorer 9, but have not tested in other version in firefox in works fine with the magic of prettyPhoto. Thanks again

Leave a comment

Please to leave your comment.

Create extension