prettyPhoto Lightbox

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

    prettyPhoto APIs have been integrated within VP MegaMart template so you can make full use of its features. It is very easy to setup your own image gallery or modal image/video zoom within your am article or in module.

    Some Examples

    Single Image:

    prettyPhoto can open single images. To do so, simply: Create a link (). Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”). Change the href of your link so it points to the full size image.

    You can also add a title and a description to your picture: To have display a title, add the title into the ALT attribute or your thumbnail image. To have display a description, add the description into the TITLE attribute or your link.

    Demo:

    This is the title

    Code:

    <a title="This is the description" href="images/prettyphoto/1.jpg" rel="prettyPhoto">
    <img class="img-polaroid" alt="This is the title" src="images/prettyphoto/thumbs/t_1.jpg" width="50" height="50">
    </a>

    Image Gallery:

    To open an image gallery simply: Create a link (). Add the rel attribute “prettyPhoto” to it and add your gallery name in square brakets (rel=”prettyPhoto“). Change the href of your link so it points to the full size image.

    Demo:

    Red round shape Nice building Fire! Rock climbing Fly kite, fly!

    Code:

    <a href="images/prettyphoto/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures.">
    <img class="img-polaroid" src="images/prettyphoto/thumbs/t_1.jpg" width="60" height="60" alt="Red round shape" />
    </a>
    <a href="images/prettyphoto/2.jpg" rel="prettyPhoto[pp_gal]">
    <img class="img-polaroid" src="images/prettyphoto/thumbs/t_2.jpg" width="60" height="60" alt="Nice building" />
    </a>
    <a href="images/prettyphoto/3.jpg" rel="prettyPhoto[pp_gal]">
    <img class="img-polaroid" src="images/prettyphoto/thumbs/t_3.jpg" width="60" height="60" alt="Fire!" />
    </a>
    <a href="images/prettyphoto/4.jpg" rel="prettyPhoto[pp_gal]">
    <img class="img-polaroid" src="images/prettyphoto/thumbs/t_4.jpg" width="60" height="60" alt="Rock climbing" />
    </a>
    <a href="images/prettyphoto/5.jpg" rel="prettyPhoto[pp_gal]">
    <img class="img-polaroid" src="images/prettyphoto/thumbs/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" />
    </a>

    Read more about jQuery lightbox for images, videos, YouTube, iframes, ajax | Stéphane Caron – No Margin For Errors on: www.no-margin-for-errors.com

    Contact Us

    Vestibulum sed et justo Vestibulum Vestibulum natoque orci porttitor Proin felis.

    +61-1-924073456
    info@vp-supermart.com

    Stay In Touch

    Follow us. Don't miss important updates in future.

    Top