prettyphoto Follow @yiiframework

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.

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');

content links mentioned above is simply something like that:

<a href="http://pligor.com/photo1.jpg">
click here
</a>

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);

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