prettyPhoto

I was Using prettyPhoto for opening portfolio gallerys and photos in donboulton.com, prettyPhotos rel="" attribute was not SEO or search engine friendly using data-gal instead iof rel="" and the way to impliment mobile functions in prettyPhoto below.
 

Using Orchard 1.7.2 I would like to be a html5 compliant as possible. PrettyPhoto in its stock form is not html5 ccs3 compliant, so I needed a way to fix this.

I have lots of links that have the rel="author", for google+1, facebook est, any oauth 2.0 needs to use the rel="author" or rel="me" attribute for authorship. I changed the rel="" attribute in prettyPhoto.js to data-gal, the usage is data-gal=[prettyPhoto].

page script full:

<script type="text/javascript">// <![CDATA[
jQuery("body").on("click", "a[data-gal^='prettyPhoto']", function() {
    jQuery.prettyPhoto.open(jQuery(this).attr("href"),"","");
    return false;
});
 
jQuery(document).ready(function(){
$('a > img').parent().attr('data-gal', 'prettyPhoto');
jQuery("a[data-gal^='prettyPhoto'], a[data-gal^='lightbox']").prettyPhoto({
theme: 'dark_rounded', /* facebook / light_rounded / light_square / dark_square / facebook */
animation_speed: 'fast', /* fast/slow/normal */
slideshow: 5000, /* false OR interval time in ms */
autoplay_slideshow: false, /* true/false */
opacity: 0.80, /* Value between 0 and 1 */
show_title: true, /* true/false */
allow_resize: true, /* Resize the photos bigger than viewport. true/false */
default_width: 500,
default_height: 344,
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
horizontal_padding: 20, /* The padding on each side of the picture */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
wmode: 'opaque', /* Set the flash wmode attribute */
autoplay: true, /* Automatically start videos: True/False */
modal: false, /* If set to true, only the close button will close the window */
deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
callback: function(){}, /* Called when prettyPhoto is closed */
ie6_fallback: true
    /* Read full article >> 
http://aslamise.blogspot.in/2013/02/add-pretty-photo-jquery-plugin-to-your-page
-and-automate-assigning-the-rel-prettyphoto-tag-for-each-image-at-once.html */
});
jQuery(".toggle_content").hide();
});// ]]></script>

Initializing the link with

data-gal="prettyPhoto[pp_gal]"   for gallerys.
data-gal="prettyPhoto[pp_inline]"  for single photos:
data-gal="prettyPhoto[pp_iframe]"  for external sites, adding to the end of the url:
?iframe=true&width=100%&height=100%
iframe example: to google http://www.google.com?iframe=true&width=100%&height=100%

see: prettyPhoto documentation for more.

Changed all hooks in the .js file from rel to data-gal. I created a fork of the fiddle below, the fiddle for this at http://jsfiddle.net/85xxy/ and using a custom .prettyPhoto.js file that is css3 html5 compliant with data-gal hooks at download location, My CDN:  jquery.prettyPhoto-3.1.4-W3C.js

 

1 Comment

  • CT limo

    Thank you for another informative blog. Where else may just I am getting that type of information written in such a perfect
    manner? I've a venture that I am just now working on, and I have been at the look out for such information.

Comments are Moderated, from, "(Spam-bots)", before they are posted.

 15204 Views