Yii 1.1: jqprettyphoto

Integrates lightbox-like pretty photo jQuery plugin
20 followers

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

Snapshot

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:

<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

Total 20 comments

#14825 report it
MaestroOscuro at 2013/09/12 12:30pm
Error

it can't work in my project, have a error:

Non-static method jqPrettyPhoto::scriptName() should not be called statically

=(

#10173 report it
Aizaz Barki at 2012/10/09 02:59am
To pay thanks to and Appreciate @Sebastian K

Thank you Sebastian K.

It worked great for me , Thanks very much

#8721 report it
waterloomatt at 2012/06/21 10:29am
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!

#7639 report it
Dyego Nery at 2012/04/04 06:31am
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>
#7635 report it
Antonio Ramirez at 2012/04/04 04:48am
@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.

#7627 report it
Dyego Nery at 2012/04/03 05:02pm
@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>
#7469 report it
Antonio Ramirez at 2012/03/24 05:40am
@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

#7464 report it
Dyego Nery at 2012/03/23 12:57pm
Its ok

Thanks anyway. I'll continue trying make it works, with your suggest.

Hug

#7463 report it
bennouna at 2012/03/23 12:48pm
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.

#7459 report it
Dyego Nery at 2012/03/23 10:40am
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>
#7457 report it
bennouna at 2012/03/23 09:55am
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?

#7455 report it
Dyego Nery at 2012/03/23 08:52am
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.

#7454 report it
bennouna at 2012/03/23 08:08am
RE: Question

Edit: oops, where does this tag come from?

</img>

@dyegonery I have forgotten that, but it seems you need "rel" attribute in your img tags, like this:

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

And if you have different galleries on the same page, you can differentiate them by

rel="prettyPhoto[someId]"
#7453 report it
Dyego Nery at 2012/03/23 07:53am
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>
#7450 report it
bennouna at 2012/03/23 04:15am
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)

<a href="URL_TO_IMAGE_TO_OPEN"><img src="URL_TO_IMAGE_TO_SHOW"/></a>

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.

#7443 report it
Dyego Nery at 2012/03/22 11:25pm
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?

#7394 report it
Antonio Ramirez at 2012/03/20 07:09am
@abennouna

Thank you so much for the tip... will update the file asap :)

#7393 report it
bennouna at 2012/03/20 06:52am
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:
1. Update jquery.prettyPhoto.js to its latest version.
2. Or, if you don't want to deal with the original plugin's directory structure change, just patch the current js file (thanks to this post):
2.1. uncompressed 3.0 version: change line 719 from

var results = regex.exec( pp_images[i] );

to

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

classname=/(.*?).(jpg|jpeg|png|gif)$/.exec(pp_images[b])? "":"default";

to

classname=/(.*?).(jpg|jpeg|png|gif)$/.exec((pp_images[b]).toLowerCase())? "":"default";

Hope it helps

#5808 report it
codesutra at 2011/11/15 07:45am
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.

#4462 report it
Sebastian K. at 2011/07/11 09:15am
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.

Leave a comment

Please to leave your comment.

Create extension