Question

I appologise in advance if I do not explain this in the correct terms, I am learning on the fly with mainly C# knowledge. I have 3 sets of jQuery code prettyPhoto, Nivo Image slider and jQuery UI Tabs. I am using prettyPhoto for both images and video on the same page.

Both my Nivo Image Slider, and my UI tabs work fine, but I cannot for the life of me, get the prettyPhoto to work. I have trawled forums etc, and tried,

1) It could be because I was using more than one library hence I switched to using only the jquery library (where I am now).

2) I have also tried to use jquery.noConflict(); code in a few different ways with no luck.

Currently I think this could be due to using multiple versions of jquery, but to be honest it is a little over my head on how to resolve it. My code is below,

In the head tag of my Home page Master,

<%--PretyBox (media viewer)--%>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">var $jq161 = jQuery.noConflict();</script>
<link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"></script>

<script type="text/javascript">
    $jq161(document).ready(function () {
        $("a[rel^='prettyPhoto']").prettyPhoto(); // Select all links that contain prettyPhoto in the attribute rel
        //$('a.prettyPhoto').prettyPhoto(); // Select all links with prettyPhoto class
        //$('a').prettyPhoto(); // Select all links in the page
        //$('#gallerythumbnails a').prettyPhoto(); // Select all links in object with gallery ID
        //$('#gallerythumbnails a').width(400);
    });
</script>

<%--Nivo Image Slider--%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">var $jq142 = jQuery.noConflict();</script>
<link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
    $jq142(window).load(function () {
        $('#slider').nivoSlider({
            pauseTime: 6000, // How long each slide will show
            directionNav: false, // Next & Prev navigation
            controlNav: false, // 1,2,3... navigation
            effect: 'fold' // Specify sets like: 'fold,fade,sliceDown'
        });
    });
</script>

The code in the head tag of my Content Master page,

    <%--PretyPhoto (media viewer)--%>
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">var $jq161 = jQuery.noConflict();</script>
    <link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"></script>

    <script type="text/javascript">
        $jq161(document).ready(function () {
            $("a[rel^='prettyPhoto']").prettyPhoto(); // Select all links that contain prettyPhoto in the attribute rel
            //$('a.prettyPhoto').prettyPhoto(); // Select all links with prettyPhoto class
            //$('a').prettyPhoto(); // Select all links in the page
            //$('#gallerythumbnails a').prettyPhoto(); // Select all links in object with gallery ID
            //$('#gallerythumbnails a').width(400);
        });
    </script>

    <%--UI Tabs--%>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">var $jq142 = jQuery.noConflict();</script>
    <script src="Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <link href="Styles/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $jq142(function () {
            $("#tabs").tabs();
            $("#subtabs-1").tabs();
            $("#subtabs-2").tabs();
            $("#subtabs-3").tabs();
            $("#subtabs-4").tabs();

            var $tabs = $('#tabs').tabs();

            $('.to-stonetab').click(function () {
                $tabs.tabs('select', 0);
                return false;
            });

            $('.to-quarrytab').click(function () {
                $tabs.tabs('select', 1);
                return false;
            });

            $('.to-valuetab').click(function () {
                $tabs.tabs('select', 2);
                return false;
            });

            $('.to-faqtab').click(function () {
                $tabs.tabs('select', 3);
                return false;
            });
        });
    </script>

And an example of a HTML references,

<a href='<%#DataBinder.Eval(Container.DataItem, "PageLink") %>' rel="prettyPhoto">
                            <img src='Images/<%#DataBinder.Eval(Container.DataItem, "Image") %>' alt='<%#DataBinder.Eval(Container.DataItem, "AltTag") %>' />
</a>

Thank you in advance for any help.

Answer 1

UPDATE:
The problem was solved by removing the multiple versions of jquery, and replacing with the current version (jquery-1.7.2.min.js).

For those who are having this problem where the above does not solve your issues, note that I previously was using LightBox and VideoBox, which would not run together because they used different libraries.

I replaced LightBox and VideoBox with prettyPhoto which used jquery (the same as the other libraries I was using). Once only 1 library was used in the document and the above was applied, it worked.