[prettyphoto]
The prettyPhoto website… Please go here for more information and donate if you like it
We need to place all the files needed in the header.php of the theme we use. If we’re using many jquery then we should make no-conflict jquery for this plugin also. Notice ‘/prettyphoto’ is ‘prettyphoto’ folder in the root of the theme folder.
<!-prettyphoto–>
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo(‘template_url’); ?>/prettyphoto/css/prettyPhoto.css” />
<script src=”<?php bloginfo(‘template_url’); ?>/prettyphoto/js/jquery.prettyPhoto.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var $jP=jQuery.noConflict();
$jP(document).ready(function(){
});
</script>
<script src=”<?php bloginfo(‘template_url’); ?>/prettyphoto/facebook.js” type=”text/javascript”></script>
<!-end prettyphoto–>
This is the facebook.js with jquery no conflict implemented.
$jP(document).ready(function(){
$jP(“a[rel^=’prettyPhoto’]”).prettyPhoto({theme:’facebook’,slideshow:5000, autoplay_slideshow:false});
});
To assign file types for different players, we need to create players and modify the “jquery.prettyPhoto.js”
function _getFileType(itemSrc){if(itemSrc.match(/youtube.com/watch/i)){return’youtube’;}else if(itemSrc.match(/vimeo.com/i)){return’vimeo’;}else if(itemSrc.match(/b.mp4b/i)){return’jw’;}else if(itemSrc.match(/b.wmvb/i)){return’wmp’;}else if(itemSrc.match(/b.avib/i)){return’wmp’;}else if(itemSrc.match(/b.mpgb/i)){return’wmp’;}else if(itemSrc.match(/b.m4vb/i)){return’quicktime’;}else if(itemSrc.match(/b.movb/i)){return’nonver’;}else if(itemSrc.match(/b.flvb/i)){return’jw’;}else if(itemSrc.match(/b.swfb/i)){return’jw’;}else if(itemSrc.match(/biframe=trueb/i)){return’iframe’;}else if(itemSrc.match(/bajax=trueb/i)){return’ajax’;}else if(itemSrc.match(/bcustom=trueb/i)){return’custom’;}else if(itemSrc.substr(0,1)==’#’){return’inline’;}else{return’image’;};};
Image Gallery
2014×1132 image in prettyPhoto with the expand button on the top-right corner.
<a title=”HTML” href=”https://www.dognmonkey.com?iframe=true&width=90%&height=80%” rel=”prettyPhoto”>HTML </a>
<p style=”text-align: center;”><strong><em><a title=”PDF display” href=”/media/teststuff/lockcoding.pdf?iframe=true&width=90%&height=100%” rel=”prettyPhoto”>PDF file</a></em></strong></p>
<p style=”text-align: center;”><strong><em><a title=”dognmonkey” href=”https://www.youtube.com/watch?v=iJT9HZye1PQ?fs=1&autoplay=1″ rel=”prettyPhoto”>YouTube full url autoplay</a></strong></em></p>
<p style=”text-align: center;”><strong><em><a title=”dognmonkey” href=”https://www.youtube.com/embed?listType=playlist&list=PLuRzvc_tEcZST27lPO1_WgftNO1pVUZZY?iframe=true” rel=”prettyPhoto”>YouTube playlist iframe</a></strong></em></p>
<p style=”text-align: center;”><a title=”Short Love Story” href=”https://vimeo.com/1618300&fullscreen=1″ rel=”prettyPhoto”>Vimeo Url </a></p>
<p style=”text-align: center;”><em><strong><a title=”a8.flv” href=”/media/teststuff/a8.flv?&image=/media/teststuff/tn_cab04_76.JPG&backcolor=000000&skin=/jwplayer5_1/fs31.zip&bufferlength=8&volume=50″ rel=”prettyPhoto[vide]”>JWplayer .flv Player Test </a></strong></em></p>
NonverBlaster .mov Player Test
<p style=”text-align: center;”><strong><em><a title=”ltooz560b.mov” href=”/media/teststuff/a8.mov?&teaserURL=/media/teststuff/tn_cab04_75.JPG” rel=”prettyPhoto[vide]”>NonverBlaster .mov Player Test </a></em></strong></p>
<p style=”text-align: center;”><em><strong><a title=”tasting.m4v” href=”/media/teststuff/tasting.m4v” rel=”prettyPhoto[vide]”>Quicktime .m4v Player Test </a></strong></em></p>
<p style=”text-align: center;”><strong><em><a href=”https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1001+Fairgrounds+Dr,+Vallejo,+CA&sll=37.0625,-95.677068&sspn=51.443116,135.263672&ie=UTF8&hq=&hnear=1001+Fairgrounds+Dr,+Vallejo,+Solano,+California+94589&ll=38.146168,-122.226076&spn=0.023625,0.036478&z=14&iwloc=A&output=embed?iframe=true&width=100%&height=100%” rel=”prettyPhoto”>sixflag marineworld</a></em></strong></p>
14 Comments
I missed something like, where did you find the prettyphoto[vide] line? what should I modify in jquery.prettyphoto.js?
Hello Chasez,
I don’t understand your question. What do you want to do? You want to play videos with different types of players?
I’m trying to get jwplayer to open with prettyphoto pop-up and I don’t get what do I have to do. whit this tutorial I can’t even get the vimeo link to open with prettyphoto. btw – yes I’m noob 😀
Hello chasez,
it’s a lot of work to get jwplayer in the js file, why don’t you get my modified js file and put it the prettyphoto folder and use it. The only things you must change (in the first few lines of the js file) is the path (your server path) of jwplayer and nonverblaster (if you want to use it)
Let me know if it works for you.
any chance you could upload the modified js file again? it seems to have gone.
trying to get .mp4 and .flv to play with nonverblaster.
here you go
//www.l2pages.org/downloads/prettyphotomods.js.zip
thanks! do you have an uncompressed version? still not working but getting close.
(function($){$.prettyPhoto={version:’3.1′};$.fn.prettyPhoto=function(pp_settings){pp_settings=jQuery.extend({animation_speed:’fast’,player:’/idogjs/jwplayer5_1/player.swf’,player1:’/idogjs/fancybox/NonverBlaster.swf’,
just replace these ‘/idogjs/jwplayer5_1/player.swf’ and ‘/idogjs/fancybox/NonverBlaster.swf’ to your URL and it should work.
I modified the compressed version of the original ones.
thnaks, working now 🙂
thanks for the ?iframe=true&width=90%&height=100%” rel=”prettyPhoto”
I got my PDF files working now 🙂