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 _custommarkup 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: _'darkrounded', _'darksquare', 'facebook', _'lightrounded', and _'lightsquare'. 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).
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
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);content links
content links mentioned above is simply something like that:
~~~
[html]
click here
~~~
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');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.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.