[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 702
  • Last Modified:

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

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

currentIndex = $(this).attr("index");
0
 
voxtechnologiesAuthor Commented:
no
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now