Premium Templates

 WebPlus Templates

Image Galleries

 PrettyPhoto

 Hover Zoom

Image Effects

 Nivo Slider

 Circle Navigation

 Piecemaker 2

 EasySlider

 Image Slider

 Slide Thumbs

 Sliding Boxes

 Featured List

 Before and After

Video Players

 NonverBlaster:hover

 Flowplayer Video

Audio Player

 Mp3 NonverBlaster

Other Effects

 Animated Portfolio New

 Jquery Fade In/Out

 Accordion

 Smooth scrolling

 Unique scrollbar

 Page Peel

 News Ticker

Copyright © Flying Cow Labs All Rights Reserved.

Website crafted using the Serif Software Suite

Home Templates About Newsletter
Home

If you’ve found these tutorials useful please help the world's poorest communities by making a small donation to WaterAid - Even if it’s just a one-off gift of £2 it would be massively appreciated.

PrettyPhoto Demo

Simple text or image hyperlink to PrettyPhoto

Add a hyperlink to text or an image in your web page, then in the URL address add the image file location followed by the rel=”prettyPhoto” attribute.




    prettyphoto/images/fullscreen/bridge_lrg.jpg" rel="prettyPhoto
    

Example: Bridge image

Create Galleries

Add multiple galleries that can be scrolled using the ‘prev’ and ‘next’ buttons in PrettyPhoto.

As above but include the [gallery] attribute, ie:



To add multiple galleries to a single page, simply change the word ‘gallery’ for something else for each gallery.

    prettyphoto/images/fullscreen/tunnel_lrg.jpg" rel="prettyPhoto [gallery]
    

External Web Content

Open pages from external website’s in PrettyPhoto



Set the size of the window or set to open at 100% of the viewers monitor.

     


Examples:

Set to open at 800 x 400 pix          Google.com   

Set to open at 100%                    Google.com         

    http://www.google.com?iframe=true&width=800&height=400" rel="prettyPhoto[iframes]
    
    http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]
    

YouTube Video

Open youTube videos seamlessly within your website



        

Example:    YouTube.com


    http://www.youtube.com/watch?v=Wso13n4kHZ4&feature=rec-r2" rel="prettyPhoto"
    

Additional settings

For extra settings, visit the script authors website at www.no-margin-for-errors.com

This is Part 2 of the PrettyPhoto tutorial, click here for Part 1