jqPrettyPhoto Extension for Yii

Yii Framework

I am currently developing a site for a real estate business and it is all built with Yii Framework -I am alone here so I need the best allies for this job :) . During this development I come up with the creation of some cool extensions that I am, of couse, going to share with all of you.

Introducing jqPrettyPhoto

This extension is making use of the grrrreat jQuery plugin called PrettyPhoto. Here is its description in detail:

rettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes. It’s a full blown media lightbox.

It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6.

It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!

How to Install

Unzip the contents of the downloaded package below and copy its contents into your application’s protected/extensions folder.

How to Use

Once we have move the contents of the zipped file into the extensions folder we are ready to go. Use it at your own will into your views like this:

</p>
Yii::import('ext.jqPrettyPhoto');
jqPrettyPhoto::addPretty('.gallery a',jqPrettyPhoto::PRETTY_GALLERY,jqPrettyPhoto::THEME_FACEBOOK);

Wow! That was easy! Please allow me to explain the addPretty function. It comes with three 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>
<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.

Download

** If you have problems please use this link.

http://www.ramirezcobos.com/wp-content/plugins/downloads-manager/img/icons/default.gif download: jqPrettyPhoto Yii Extension (72.29KB)
added: 21/10/2010
clicks: 2715

Agile Web Application Development with Yii 1.1 and PHP5

20 comments

  1. Vicente   •  

    Hola Antonio.

    El motivo de este comentario es que he actualizado a la versión 1.1.5 del Yii y tras ello tu extensión jqPrettyPhoto genera errores de javascript, con la versión 1.1.4 funcionaba perfectamente. Era para que lo tuvieras en cuenta.

    Saludos.

    Vicente (viseser)

  2. Antonio Ramirez   •     Author

    La libreria fue creada con esa version. Puedes decirme que ocurre para ver si lo puedo solucionar? Gracias!

  3. Nikita   •  

    The problem with your plugin is that when you press the button “Expand” image is enlarged but it is possible to view only the left part of the image. In the right side of the image remains off screen.

  4. Pingback: Website

  5. Steve Chen   •  

    Thank you for the post. I got it working, mostly… I got a question:
    Can it do multiple galleries on the same page?
    For example, I have 6 pictures divided into, say, two groups. Each group has 3 pictures. If a user click on any of the images, only the images of the group would load.

    I checked PrettyPhoto site, it seems to be capable by adding a rel=”groupname” in . But I couldn’t get it to work!

    Any help would be appreciated.

  6. Steve Chen   •  

    Correction:
    I checked PrettyPhoto site, it seems to be capable by adding a rel=”groupname” in “a” tags. But I couldn’t get it to work!

  7. Steve Chen   •  

    Sorry, I figured it out.

    By adding rel=”prettyPhoto[galleryName]” in “a” tags AND by multiple $pretty->addPretty(…) commands

  8. Abdelaziz   •  

    Thanks Antonio for this great Yii extension.

    Thanks also to Steve for his tip for multiple jqPrettyPhotos.

    And sieppl stated in Yii’s extension page, it’s easily extended to support dynamically added images.

    Great contribution.

  9. fery   •  

    hi , the jqPrettyPhotos light box is not working when i view the second page item…when i click the image, it just go to that image url without lightbox effect.
    can you tell me, what i am wrong?

    thanks

  10. fery   •  

    hi, it is working now, Thanks Antonio And sieppl stated in Yii’s extension page.

    thanks

  11. Dyego Nery   •  


    Dyego Nery:

    Hello Antonio,
    I’m having problems with your extension. I just tried everything, but the problem persist. When i click in the image, the firefox don’t open the gallery. It open the image in other page, out of the site.
    Here’s my HTML result:

    The Firebug don’t show any errors of javascript, and at the end of the body, is the script generated correctly.

    /**/

    Sorry for my english.

  12. Antonio Ramirez   •     Author

    I do not see any code to help you out…

    It seems that the file wasn’t uploaded? Could you write the code instead?

  13. Antonio Ramirez   •     Author

    Dyego I have seen your HTML at the Yii extension’s repository and I would like to ask why you have the image tag with rel=prettyPhoto? I think that is the issue

  14. Dyego Nery   •  


    Antonio Ramirez:

    Dyego I have seen your HTML at the Yii extension’s repository and I would like to ask why you have the image tag with rel=prettyPhoto? I think that is the issue

    Yeah. Its working fine now.
    I don’t understand why. Thanks anyway Antonio.
    The extension is great.

  15. Rulas   •  

    When using images inside a CGridView initially PrettyPhoto works fine but when I filter the CGridView with the “search” function (with data and images), the images now work as a normal link.

    How can I fix this problem?

    Thank you.
    Rulas

  16. Antonio Ramirez   •     Author

    Every time you update the grid, the binding needs to be re-created.

  17. Kike Campos   •  

    Que tal, soy novato total en Yii, descargué la extensión, usé el codigo tal cual lo tienes en el ejemplo

    Yii::import(‘ext.jqPrettyPhoto’);
    jqPrettyPhoto::addPretty(‘.gallery a’,jqPrettyPhoto::PRETTY_GALLERY,jqPrettyPhoto::THEME_FACEBOOK);

    y nada, me marca error:
    Non-static method jqPrettyPhoto::scriptName() should not be called statically

    no entiendo entonces como se debe configurar, he usado el addgallery y en 10 minutos funcionó, pero no me gusta, y esta extensión que se ve mucho mejor nomás no funciona…

  18. Antonio Ramirez   •     Author

    Hola Kike,

    Disculpa la tardanza. Sinceramente, hace mucho tiempo que no reviso la librería, pero te descargaste la ultima version? Mira si tienes la funcion tal que así:


    /**
    * @brief retrieve the script file name
    */
    protected static function scriptName($css=false) { // statica!!!
    return $css ? '/css/prettyPhoto.css' : 'jquery.prettyPhoto.js';
    }

    Pienso que te descargaste una mala version… Descargala de aqui: http://www.yiiframework.com/extension/jqprettyphoto/

  19. Rob   •  

    Very nice! Many thanks!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>