jqueryUI's dialog box used as a large image privew box with back and next buttons

user clicks a thumbnail image and the large version is opened up in a dialog box.  The dialog box also has a next and previous button so they can navigate to the next large image without closing the box.

Its working fine in IE but not in firefox, the currentIndex value is "not defined" when clicking the next or previous buttons.

Thanks for any help.
**SCRIPTS INCLUDED**
   <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>
<!-- JQUERY BASE -->
    <script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
    
    <link href="../../Content/jqueryUI/jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

**SCRIPT USED**
    $(document).ready(function() {
    
        //VARs TO HANDEL PREVIOUS AND NEXT BUTTON OPERATIONS
        var currentIndex = 0;
        var totalIndex = 0;

        totalIndex = ($("#RecentWinners li img").length - 1);

        //THUMB NAIL IMAGE CLICK, OPEND dialog - SET CURRENT INDEX AND SET LARGE IMAGE PATH
        $("#RecentWinners li img").click(function() {

            var lgImgPath = ($(this).attr("LGsrc"));
            currentIndex = this.index;

            $("#LargeImgPopup").dialog({
                open: function(event, ui) {
                    $('#LargeImg').attr("src", lgImgPath);
                },
                height: 360,
                width: 340,
                closeText: 'test',
                resizable: false,
                title: 'asdf',
                modal: false
            });

        });
        
        //dialog's NEXT BUTTON CLICK - FIND THE NEXT THUMBNAIL IMAGE BASED ON CURRENT INDEX AND CHANGE THE LARGE IMAGE PATH
        $("#NextLargeImage").click(function() {
       // alert(totalIndex);
            currentIndex++;
            if (currentIndex > totalIndex) { currentIndex = 0; }

            var lgImgPath = $("#RecentWinners li img").eq(currentIndex).attr("LGsrc")
            $('#LargeImg').attr("src", lgImgPath);

            //alert(currentIndex);

        });
        //dialog's PREVIOUS BUTTON CLICK - FIND THE PREVIOUS THUMBNAIL IMAGE BASED ON CURRENT INDEX AND CHANGE THE LARGE IMAGE PATH
        $("#PrevLargeImage").click(function() {
            //alert('prev');
            currentIndex--;
            if (currentIndex < 0) { currentIndex = totalIndex; }

            var lgImgPath = $("#RecentWinners li img").eq(currentIndex).attr("LGsrc")
            $('#LargeImg').attr("src", lgImgPath);
            //alert(currentIndex);
        });
    });
**HTML**
<div id="RecentWinners">
<ul>
<%--    CURRENTLY NOT USING THE CUSTOM ATTRIBUTE, "index" BUT MAY NEED TO SO IT'S NOT DELETED YET--%>
    <li><img LGsrc="../../Content/images/icons/Blinklist_24.png" index="0" src="../../Content/images/icons/Blinklist_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/delicious_24.png" index="1" src="../../Content/images/icons/delicious_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/Digg_24.png" index="2" src="../../Content/images/icons/Digg_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/diigo_24.png" index="3" src="../../Content/images/icons/diigo_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/DZone_24.png" index="4" src="../../Content/images/icons/DZone_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/Facebook_24.png" index="5" src="../../Content/images/icons/Facebook_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/letter.png" index="6" src="../../Content/images/icons/letter.png" /></li>
    <li><img LGsrc="../../Content/images/icons/NewsVine_24.png" index="7" src="../../Content/images/icons/NewsVine_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/Reddit_24.png" index="8" src="../../Content/images/icons/Reddit_24.png" /></li>
</ul>
</div>

<div id="LargeImgPopup" style="height:50px; width:50px;">
    <a href="#"><img id="LargeImg" style="height:50px; width:50px;" /></a>
    <div><a href="#">details</a></div>
    <div id="NextLargeImage">next</div>
    <div id="PrevLargeImage">prev</div>
</div>

Open in new window

voxtechnologiesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

anoyesCommented:
Instead of using currentIndex = this.index, try using currentIndex = $(this).index()
0
StealthyDevCommented:
Use,

currentIndex = $(this).attr("index");
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
voxtechnologiesAuthor Commented:
no
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.