This extension is making use of the grrrreat jQuery lightbox type plugin called PrettyPhoto
For an extended explanation of this extension please visit my blog
ChangeLog ¶
Tuesday-01-02-2011
- Fixed bug when using static method addPretty (thanks guil182)
Thursday-30-12-2010
- Fixed some minor bugs for the Extension Version
- Updated javascript script (fixed imgSrc undefined bug)
Requirements ¶
This was built with Yii.1.1. I didn't test backwards compatibility.
Usage ¶
Copy the unzipped contents of the extension into your application's protected/extensions folder.
// import the extension
Yii::import('ext.jqPrettyPhoto');
$options = array(
'slideshow'=>5000,
'autoplay_slideshow'=>false,
'show_title'=>false
);
// call addPretty static function
jqPrettyPhoto::addPretty('.gallery a',jqPrettyPhoto::PRETTY_GALLERY,jqPrettyPhoto::THEME_FACEBOOK, $options);
Update ¶
I have updated the widget version to the latest of prettyPhoto plugin so now you can use all the options included in the jquery plugin and make use of slide thumbnails and slideshows.
Hope you enjoy!
¶
In case you want to use jqPrettyPhoto as a widget I have included a widget version (I think that is best suited as a widget than as a Yii extension... anyway, I uploaded both). To make use of the widget please unzip its contents and place them into your application/protected/widgets folder and then to use it do:
// make an instance of the widget in your code
$pretty = $this->createWidget('widgets.jqPrettyPhoto');
// config options (**NEW UPDATE**)
// see the jqPrettyPhoto.php file to get a list of the available options
$options = array(
'slideshow'=>5000,
'autoplay_slideshow'=>false,
'show_title'=>false
);
// .gallery a, is the images jquery selector!
$pretty->addPretty('.gallery a',$pretty::PRETTY_GALLERY,$pretty::THEME_FACEBOOK, $config);
The addPretty function has four parameters:
1) element/s selector: the JQUERY SELECTOR to the links you want to set pretty photo to. In the example above I had the following on the view’s HTML:
[html]
<p><div class="gallery"><br />
<a href="URL_TO_IMAGE_TO_OPEN"><img src="URL_TO_IMAGE_TO_SHOW"/></a><br />
2) The second parameter is of the value jqPrettyPhoto::PRETTY_GALLERY or jqPrettyPhoto::PRETTY_SINGLE, which tells the extension whether the selector will be a list of a gallery images or just a single file.
3) The third one is what theme to use -please refer to jqPrettyPhoto.php’s code to see more options on this one.
4) The configuration options
Project page dl link is outdated
The download link on your "project page" is dated 2010, just FYI.
@intel 352
That was the time it was added. Is it wrong? If you check the date on this download section it states: Created on: Oct 22, 2010
Cheers
To clarify
My point was that the file has been updated as of spring 2011 (at least here on the Yii page), but the date on your project page doesn't reflect that.
Just a heads up in case you weren't linking to the latest file from your project page.
Using prettyPhoto with dynamic content
I have a grid view with images which is updated via ajax. To reassign pretty photo after updating the grid view I have tweaked the extension as follows:
In jqPrettyPhoto.php I have added:
public static function addPretty($jsSelector=".gallery a", $gallery=self::PRETTY_GALLERY, $theme=self::THEME_FACEBOOK, $opts=array()){ self::registerScript(); $opts['theme']=$theme; Yii::app()->clientScript->registerScript('prettyPhotoFunction',' function assignPrettyPhoto() { $("'.$jsSelector.'").attr("rel","prettyPhoto'.($gallery==self::PRETTY_GALLERY?'['.time().']':'').'"); $("a[rel^=\'prettyPhoto\']").prettyPhoto('.CJavaScript::encode($opts).'); } ',CClientScript::POS_HEAD); Yii::app()->clientScript->registerScript(__CLASS__,' assignPrettyPhoto(); ',CClientScript::POS_READY); }And adding following property to my CGridView:
'afterAjaxUpdate' => 'js:function(id, data) {assignPrettyPhoto();}',Now my prettyPhoto gallery is always in sync with my CGridView.
Need to update a Div with ajax inside a lightbox.
Hi,
I Need to update a div inside a lightbox.Ajax button is working fine but it is not updating a div inside a Lightbox.Anybody can help me.
A little bug with UPPERCASE extensions
Thank you Antonio. I've been using this extension (with prettyPhoto 3.0) for several weeks with sieppl's patch to allow for dynamic assignment (which was a mandatory feature for me).
Recently (in production) we've run through a little annoying problem: thumbnails in the modal were replaced with black squares with a white play icon (I've used the Facebook theme).
After some headaches, I understood that some users used pictures uppercase extensions (e.g. JPG instead of jpg). That, I had not tested :-) and it appears to be a (little) known bug, corrected in later plugin versions.
Anyway, tl;dr, if you face the same problem:
2.1. uncompressed 3.0 version: change line 719 from
[javascript] var results = regex.exec( pp_images[i] );to
~~~
[javascript]
var results = regex.exec( (pp_images[i]).toLowerCase() );
~~~
2.2. or compressed 3.0 version: do the same, by finding and changing this code from
~~~
[javascript]
classname=/(.?).(jpg|jpeg|png|gif)$/.exec(pp_images[b])? "":"default";
~~~
to
~~~
[javascript]
classname=/(.?).(jpg|jpeg|png|gif)$/.exec((pp_images[b]).toLowerCase())? "":"default";
~~~
Hope it helps
@abennouna
Thank you so much for the tip... will update the file asap :)
Question
Hello Antonio,
Congrats for the plugin, but i had some problems.
Here's my code:
<div id = "thumbs"> <?php foreach ($mfotos as $j => $foto) { echo CHtml::link("<img class='img_thumbs' src=".$foto->img_path."></img>",'#',array() ); } Yii::import('ext.jqPrettyPhoto'); $options = array( 'slideshow' => 5000, 'autoplay_slideshow' => false, 'show_title' => false ); jqPrettyPhoto::addPretty('#thumbs a',jqPrettyPhoto::PRETTY_GALLERY,jqPrettyPhoto::THEME_FACEBOOK, $options); ?> </div>When i click in some photo, the gallery isn't showed.
I don't know if i missed something.
Can you take a look?
RE: Question
@dyegonery
Ok, the question is addressed to Antonio. But let me say that you should eventually obtain the following syntax (see the Usage above)
~~~
[html]
~~~
I don't think that your PHP code puts an actual link around your images, just "#", which wouldn't be correct.
If I'm wrong, please post your resulting HTML code.
Question
Hi abennouna
Thanks for the answer.
i tried this, but when i put the url in href of the link, and click this, the firefox open the img out of the site. My doubt is how to show the photo like the posted at this post.
Heres my html result:
<div id = "thumbs"> <a href="/emc001/fotos/03-2012/2037146.jpg"><img class='img_thumbs' src=/emc001/fotos/03-2012/2037146.jpg></img></a> </div>RE: Question
Edit: oops, where does this tag come from?
~~~
[html]
~~~
@dyegonery
I have forgotten that, but it seems you need "rel" attribute in your img tags, like this:
~~~
[html]
~~~
And if you have different galleries on the same page, you can differentiate them by
~~~
[html]
rel="prettyPhoto[someId]"
~~~
Question
Yeah, i've tried this.
But in the "a" tag, the "Rel" attribute is generated, with prettyPhoto[someId].
<div id = "thumbs"> <a href="/emc001/fotos/03-2012/2037146.jpg"><img class='img_thumbs' src=/emc001/fotos/03-2012/2037146.jpg rel='prettyPhoto'></a> </div>The problem continues. When i click in the img, the firefox open the image out of the page, but don't show the gallery.
RE: Question
@dyegonery
Please remove the class in your images, and put double quotes around the src value, and if possible, normalize quotes and double quotes in your HTML.
On another hand, can you check Firefox's console to see if there's any javascript errors?
Question
Nothing yet.
<div id = "thumbs"> <a href="/emc001/fotos/03-2012/2037146.jpg"><img rel="prettyPhoto" src="/emc001/fotos/03-2012/2037146.jpg"/></a> </div>I don't know more what i should modify, to the extension works. :(
The Firebug don't show errors in the Java Script.
And, in the bottom of the page, the script is called correctly. Here is.
<script type="text/javascript"> /*<![CDATA[*/ jQuery(function($) { $("#thumbs a").attr("rel","prettyPhoto[1332513305]") $("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'}); }); /*]]>*/ </script>Well I don't see
@dyegonery I'm very sorry. I really don't see where the problem is. Hopefully you or someone will find. Try anyway to put your gallery alone in another page with nothing else in it to see if it works in your setup.
Its ok
Thanks anyway.
I'll continue trying make it works, with your suggest.
Hug
@dyegonery
I think that your issue relies that your img tag has the 'rel' attribute. Please, follow the directions of the documentation:
<a href="URL_TO_IMAGE_TO_OPEN"><img src="URL_TO_IMAGE_TO_SHOW"/></a><br />See? There is no rel="prettyPhoto" on the img tag, that is automatically created by the extension
@tonydspaniard
Well tony.
Well, it works in part.
Look, when i use “PRETTY_SINGLE”, its ok.
But, when i try using “PRETTY_GALLERY”, the photo is opened in a new window of firefox. Not in the Gallery.
My Html Result:
<div id = "thumbs"> <a href="/emc001/fotos/04-2012/2300Ferrari_do_Teobaldo.jpg"><img class="img_thumbs" src="/emc001/fotos/04-2012/thumb_2300Ferrari_do_Teobaldo.jpg" alt="Teste" /></a><a href="/emc001/fotos/04-2012/2301Ferrari_do_Teobaldo.jpg"><img class="img_thumbs" src="/emc001/fotos/04-2012/thumb_2301Ferrari_do_Teobaldo.jpg" alt="Teste" /></a><a href="/emc001/fotos/04-2012/2302Ferrari_do_Teobaldo.jpg"><img class="img_thumbs" src="/emc001/fotos/04-2012/thumb_2302Ferrari_do_Teobaldo.jpg" alt="Teste" /></a> </div> </div>@dyegonery
Can you post the resulting HTML not the one that you used? To do that, please use FIREBUG or CHROME TOOLS to get the resulting HTML. I need to check the 'rel' of your HTML.
Here is
<div id="thumbs"> <a href="/emc001/fotos/04-2012/2300Ferrari_do_Teobaldo.jpg" rel="prettyPhoto[1333533718]"><img alt="Teste" src="/emc001/fotos/04-2012/thumb_2300Ferrari_do_Teobaldo.jpg" class="img_thumbs"></a> <a href="/emc001/fotos/04-2012/2301Ferrari_do_Teobaldo.jpg" rel="prettyPhoto[1333533718]"><img alt="Teste" src="/emc001/fotos/04-2012/thumb_2301Ferrari_do_Teobaldo.jpg" class="img_thumbs"></a> <a href="/emc001/fotos/04-2012/2302Ferrari_do_Teobaldo.jpg" rel="prettyPhoto[1333533718]"><img alt="Teste" src="/emc001/fotos/04-2012/thumb_2302Ferrari_do_Teobaldo.jpg" class="img_thumbs"></a> </div>Single preview image for gallery
Hi,
I have a busy page that I want to display a large, single image. Any idea if this component supports a single preview image that when clicked opens to display a full gallery? Sorta like an album preview.
Thanks!
To pay thanks to and Appreciate @Sebastian K
Thank you Sebastian K.
It worked great for me , Thanks very much
Error
it can't work in my project, have a error:
Non-static method jqPrettyPhoto::scriptName() should not be called statically
=(
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.