jQuery Conflict in Revolution Slider and prettyPhoto

Question

So I am trying to use both Revolution Slider and prettyPhoto here - http://vgoford.com/index3.html

But there is a possible conflict in their jQuery. The prettyPhoto refuses to work. Any idea what could be the issue?

Here's the code for both of them -

<!-- Revolution Slider -->
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.revolution.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/fullwidth.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/revolution-settings.css" media="screen" />

<script type="text/javascript">

            var tpj=jQuery;
            tpj.noConflict();

            tpj(document).ready(function() {

            if (tpj.fn.cssOriginal!=undefined)
    tpj.fn.css = tpj.fn.cssOriginal;

    tpj('.fullwidthbanner').revolution(
    {
    delay:9000,
    startwidth:890,
    startheight:450,

    onHoverStop:"on",        // Stop Banner Timet at Hover on Slide on/off

    thumbWidth:100,        // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
    thumbHeight:50,
    thumbAmount:3,

    hideThumbs:200,
    navigationType:"bullet",        //bullet, thumb, none, both     (No Shadow in Fullwidth Version !)
    navigationArrows:"verticalcentered",        //nexttobullets, verticalcentered, none
    navigationStyle:"round",                //round,square,navbar

    touchenabled:"on",        // Enable Swipe Function : on/off

    navOffsetHorizontal:0,
    navOffsetVertical:20,

    stopAtSlide:-1,        // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
    stopAfterLoops:-1,        // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic

    fullWidth:"on",

    shadow:0        //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)

    });

        });
        </script>

<!-- /Revolution Slider -->

and

    <!-- PrettyPhoto -->
    <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
    $("area[rel^='prettyPhoto']").prettyPhoto();

    $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',theme:'pp_default',slideshow:4000, opacity: 0.50, deeplinking: false, overlay_gallery: false, autoplay_slideshow: false});

});
    </script>
    <!-- /PrettyPhoto -->

Answer 1

Try to Modify your files in order in your page like as follows:

  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="js/rs-plugin/jquery.themepunch.plugins.min.js"></script>
  <script type="text/javascript" src="js/rs-plugin/jquery.themepunch.revolution.min.js"></script>
  <script type="text/javascript" src="js/jquery.prettyPhoto.js"  charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/fullwidth.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/revolution-settings.css" media="screen" />
   <script type="text/javascript" language="javascript">

       // Revolution Slider
        jQuery(document).ready(function() {
        if (jQuery.fn.cssOriginal!=undefined)
            jQuery.fn.css = jQuery.fn.cssOriginal;
            jQuery('.fullwidthbanner').revolution({
            delay:9000,
            startwidth:890,
            startheight:450,            
            onHoverStop:"on",        // Stop Banner Timet at Hover on Slide on/off          
            thumbWidth:100,        // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
            thumbHeight:50,
            thumbAmount:3,          
            hideThumbs:200,
            navigationType:"bullet",        //bullet, thumb, none, both     (No Shadow in Fullwidth Version !)
            navigationArrows:"verticalcentered",        //nexttobullets, verticalcentered, none
            navigationStyle:"round",               //round,square,navbar            
            touchenabled:"on",        // Enable Swipe Function : on/off         
            navOffsetHorizontal:0,
            navOffsetVertical:20,           
            stopAtSlide:-1,        // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0,.... 
            stopAfterLoops:-1,        // Stop Timer if All slides has been played "x" times. ....
            fullWidth:"on",         
            shadow:0        //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)           
            });                 

            // PrettyPhoto
            jQuery(document).ready(function(){
               jQuery("area[rel^='prettyPhoto']").prettyPhoto();
               jQuery(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
                        animation_speed:'fast',
                        theme:'pp_default',
                        slideshow:4000, 
                        opacity: 0.50, 
                        deeplinking: false, 
                        overlay_gallery: false, 
                        autoplay_slideshow: false
                        });
               });              
         });
    </script>

Answer 2

I believe the issue is here:

var tpj=jQuery;
tpj.noConflict();

If you're going to use noConflict then you have to be sure it's consistent because it will apply to jQuery as a whole.

In almost all cases that I've typically done:

$('selector') // normal way
jQuery('selector') // safe way

var $js = jQuery.noConflict(); // safe way
$j('selector')

Another good alternative would be:

(function($) { 
    // document.ready code can go here
    // $('selector').hide(); for example
})(jQuery);

Hope this helps!