Vanilla 2

oneworld95

Is it possible to have a prettyGallery that, when an item is clicked, it fires off the prettyPhoto? I need to have the prettyPhoto with some HTML at the bottom of each picture. Also, is it possible to have overlay captions on the prettyGallery pictures?

amdibble

I have the same question. Is this answered anywhere?
This site, http://www.webresourcesdepot.com/sliding-jquery-image-gallery-prettygallery-and-prettyphoto-a-jquery-lightbox-clone/, makes it seem as if this functionality is innate in prettyGallery, but that doesn't seem to be the case. Any answers?

anguzito

Same question here! Somebody please help us.

skampsta

Simple answer - yes this can be done. I've just made this work using the lastest PP and PG downloads.

Simply set up the PG and PP downloads as per the documentation and combine them similar to the mark-up below:


        <ul class=\"gallery\">
            <li>
                <a href=\"Images/Site/Gallery/P4H1102/PH41102-01-before_700w.jpg\" rel=\"prettyPhoto[P4H1101]\">
                    <img class=\"rounding10\" src=\"Images/Site/Gallery/P4H1102/PH41102-01-before_200x139.jpg\" alt=\"community hall: initial\" />
                </a>
            </li>
            <li>
                <a href=\"Images/Site/Gallery/P4H1101/PH41101-PA01.03_700w.jpg\" rel=\"prettyPhoto[P4H1101]\">
                    <img class=\"rounding10\" src=\"Images/Site/Gallery/P4H1101/PH41101-PA01.03_200w.jpg\" alt=\"domestic extension: inital elevations\" />
                </a>
            </li>
            <li>
                <a href=\"Images/Site/Gallery/P4H1101/PH41101-PA01.02_700w.jpg\" rel=\"prettyPhoto[P4H1101]\"\">
                    <img class=\"rounding10\" src=\"Images/Site/Gallery/P4H1101/PH41101-PA01.02_200w.jpg\" alt=\"domestic extension: inital floor plans\" />
                </a>
            </li>
            <li>
                <a href=\"Images/Site/Gallery/P4H1101/PH41101-PA01.05_700w.jpg\" rel=\"prettyPhoto[P4H1101]\">
                    <img class=\"rounding10 last_item\" src=\"Images/Site/Gallery/P4H1101/PH41101-PA01.05_200w.jpg\" alt=\"domestic extension: approved elevations\" />
                </a>
            </li>
            <li class=\"last-item\">
                <a href=\"Images/Site/Gallery/P4H1101/PH41101-PA01.04_700w.jpg\" rel=\"prettyPhoto[P4H1101]\"\">
                    <img class=\"rounding10 last\" src=\"Images/Site/Gallery/P4H1101/PH41101-PA01.04_200w.jpg\" alt=\"domestic extension: approved floor plans\" />
                </a>
            </li>
        </ul>

The gallery style on the "UL" element invokes PG and the "a" elements inkoves PP. The one issue I did find was that you needed to have both the PG and PP jscript functions in the same script element:


<script type=\"text/javascript\" charset=\"utf-8\">
    $(document).ready(function () {
        $(\"a[rel^='prettyPhoto']\").prettyPhoto({ theme: 'dark_rounded', social_tools: false, slideshow: false });
        $(\"ul.gallery\").prettyGallery({ itemsPerPage: 4, navigation: 'bottom' });
    });
</script>

If you have them each in their own script element it works ok in IE but FF the column layout seems to break.

Hope that helps future visitors. Both these plugins are great! Top marks to the PP and PG developer!

Ols

skampsta

You can see an example of PP and PF combined here: http://www.plans4home.co.uk/Portfolio.aspx

Vanilla 2

Howdy, Stranger!

Categories