prettyPhoto Pluggin

prettyPhoto Pluggin

I have the working code a the Pretty Photo Pluggin , but i wanted to understand the code better 

Below is the html code . 

and below is the Jquery code . 

  2. jQuery("body").on("click", "a[rel^='prettyPhoto']", function() {
  3.     jQuery.prettyPhoto.open(jQuery(this).attr("href"),"","");
  4.     return false;
  5. });

  7. jQuery(document).ready(function(){
  8. $('a > img').parent().attr('rel', 'prettyPhoto');
  9. jQuery("a[rel^='prettyPhoto'], a[rel^='lightbox']").prettyPhoto({
  10. theme: 'facebook', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
  11. animation_speed: 'fast', /* fast/slow/normal */
  12. slideshow: 5000, /* false OR interval time in ms */
  13. autoplay_slideshow: false, /* true/false */
  14. opacity: 0.80, /* Value between 0 and 1 */
  15. show_title: true, /* true/false */
  16. allow_resize: true, /* Resize the photos bigger than viewport. true/false */
  17. default_width: 500,
  18. default_height: 344,
  19. counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
  20. horizontal_padding: 20, /* The padding on each side of the picture */
  21. hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
  22. wmode: 'opaque', /* Set the flash wmode attribute */
  23. autoplay: true, /* Automatically start videos: True/False */
  24. modal: false, /* If set to true, only the close button will close the window */
  25. deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
  26. overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
  27. keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
  28. changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
  29. callback: function(){}, /* Called when prettyPhoto is closed */
  30. ie6_fallback: true
  31.     /* 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 */
  32. });
  33. jQuery(".toggle_content").hide();
  34. });


Can somebody explain to me on the secound line 

  1. jQuery.prettyPhoto.open(jQuery(this).attr("href"),"","");
what is the above doing , also on the secound last line . 


  1. jQuery(".toggle_content").hide();
What is the above doing ? 

Also i understand that the 7th line is initializing the prettyPhoto Pluggin 

  1. jQuery("a[rel^='prettyPhoto'], a[rel^='lightbox']").prettyPhoto
But why the secound selector i.e . 

  1. a[rel^='lightbox']
I have the working Js fiddle if it helps . 


Will appreciate ur help , Thank You . 


Gautam