Change images with left and right arrows
<p>I have a gallery which changes the images with onclick but I also want images to get change with left and right arrow control.</p>

<p>I would really appreciate any help with this.</p>

<p>Below is the javascript which I am using.</p>

<pre><code>$(document).ready(function(){
$.fn.gallerySplash = function(){
    var object = $(this),
        imageHolder = $("#imageHolder",object),
        image = $("#imageHolder &gt; img",object),
        imageSRCLink = $("ul&gt;li&gt;a",object),
        imageDeltaX,
        imageDeltaY,
        imageK =image.height()/image.width(),
        holderK =imageHolder.height()/imageHolder.width(),
        imagePercent = (image.height()/image.width())*100,
        imgSRC,
        currImg = 0,
        prevImg = 0,
        allImg = imageSRCLink.length,
        autoPlayState = false,
        autoPlayTime = 8,
        loadComplete = true,
        doc=$(document),
        openGall = false,
        MSIE8 = ($.browser.msie) &amp;&amp; ($.browser.version &lt;= 8);

    init()

    function init(){
        $(window).resize(resizeImageHandler).trigger('resize');
        $(window).bind("hashchange", changeHash);
        $("#next").bind("mousedown", function(){
            changePreviewPosition(-1);
            return false;           
        });
        $("#prev").bind("mousedown", function(){
            changePreviewPosition(1);
            return false;           
        });
        $("window, document, #prev, #next, body, #wrapper").bind("mouseup", function(){
            stopPreviewPosition();
            return false;           
        });
        $("#prev, #next").click(
            function(){
                return false;           
            }
        )
        $("#closeGallery").click(function(){
            if(openGall){
                openGall = false;
                $("#previewHolder").stop().animate({left:45}, 500, "easeInOutCubic");
                if(!MSIE8){
                    $(this).css({backgroundPosition:"3px 14px"}).stop().animate({scale:1}, 0).css({left:"192px", top:"50%"});
                 }
            }else{
                openGall = true;
                $("#previewHolder").stop().animate({left:245}, 500, "easeInOutCubic");
                if(!MSIE8){
                    $(this).css({backgroundPosition:"14px 14px"}).stop().animate({scale:-1}, 0).css({left:"192px", top:"50%"});
                }
            }
            return false;           
        }).hover(
            function(){
                if(openGall){
                    $(this).stop(true).animate({left:187}, 250, "easeOutExpo")
                }else{
                    $(this).stop(true).animate({left:197}, 250, "easeOutExpo")  
                }
            },
            function(){
                $(this).stop().animate({left:192}, 250, "easeOutExpo")
            }
        );
        $("#previewHolder ul&gt;li&gt;a").each(function(){
            $(this).append("&lt;div class='over'&gt;&lt;/div&gt;")
            $(".over", this).animate({opacity:0}, 150, "easeInOutCubic")
        }).click(
            function(){
                if($(this).parent().index()!=currImg &amp;&amp; loadComplete){
                    $("#previewHolder ul&gt;li").eq(currImg).find("a&gt;.over").stop(true).animate({opacity:0}, 150, "easeInOutCubic")
                    currImg=$(this).parent().index();
                    changeImageHandler();
                    $("#imageCaption").html($(this).attr('title'));
                }
                return false;           
            }
        ).hover(
            function(){
                if($(this).parent().index()!=currImg){
                    $(".over", this).stop(true).animate({opacity:1}, 300, "easeInOutCubic")
                }
            },
            function(){
                if($(this).parent().index()!=currImg){
                    $(".over", this).stop().animate({opacity:0}, 300, "easeInOutCubic")
                }
            }
        );
        $("#previewHolder ul&gt;li").eq(currImg).find("a&gt;.over").stop().animate({opacity:1}, 0)
        autoPlayHandler();
    }
    function changeHash(){
        if(window.location.hash.substring(3, window.location.hash.length)==$("#menu dd").eq(0).attr("id") &amp;&amp; !openGall){
            openGall = true;
            $("#previewHolder").stop().animate({left:245}, 500, "easeInOutCubic")
            if(!MSIE8){
                $("#closeGallery").css({backgroundPosition:"14px 14px"}).stop().animate({scale:-1}, 0).css({left:"192px", top:"50%"});
            }
        }
    }
    function changePreviewPosition(number){
        var innerH = $("#inner").height(),
            ulH =  $("#inner&gt;ul").height(),
            scrollTime;         
        if(number==-1){
            scrollTime = Math.abs(parseInt($("#inner&gt;ul").css("top"))*5000/(ulH-innerH));
            $("#inner&gt;ul").stop(true).animate({top:0}, scrollTime, "linear");   
        }else{
            scrollTime = Math.abs((parseInt($("#inner&gt;ul").css("top"))+(ulH-innerH))*5000/(ulH-innerH));
            $("#inner&gt;ul").stop(true).animate({top:-(ulH-innerH)}, scrollTime, "linear");
        }
    }
    function stopPreviewPosition(){
        $("#inner&gt;ul").stop(true)
    }   
    function autoPlayHandler(){
        setTimeout(function(){
            if(autoPlayState){
                prevImg = currImg;
                currImg++
                if(currImg&gt;=allImg){
                    currImg = 0 
                }
                changeImageHandler()
            }
        }, autoPlayTime*1000)
    }
    function resizeImageHandler(){
        image = $("#imageHolder &gt; img");
        imageK =image.height()/image.width()
        holderK =doc.height()/doc.width();
        if(holderK&gt;imageK){
        }else{
        }
        imageDeltaX=0//-(image.width()-doc.width())/2;
        imageDeltaY=-(image.height()-doc.height())/2;
        image.css({left:imageDeltaX, position:"absolute"});
    }
    function changeImageHandler(){
        loadComplete = false;
        image.addClass("topImg");
        imgSRC = imageSRCLink.eq(currImg).attr("href");
        imageHolder.append("&lt;div id='imgSpinner'&gt;&lt;/div&gt;&lt;img class='bottomImg' src="+imgSRC+" alt=''&gt;");
        $("#imgSpinner").css({opacity:0}).stop().animate({opacity:0.5}, 500, "easeInOutCubic");
        $(".bottomImg").bind("load", loadImageHandler)
    }
    function loadImageHandler(){
        setTimeout(function(){
            $(".bottomImg").unbind("load", loadImageHandler);
            $("#imgSpinner").stop().animate({opacity:"0"}, 1000, "easeInOutCubic")
            resizeImageHandler();
            $(".topImg").stop().animate({opacity:"0"}, 1000, "easeInOutCubic", function(){
                $("#imgSpinner").remove();
                $(".topImg").remove();
                image.removeClass("bottomImg");
                loadComplete = true;
                autoPlayHandler()
            })
        }, 1000)
    }
}
})
</code></pre>

<p>With the help of your code I did this and it worked for me but still creating some issue. It's working only one time not changing the currImg indexing please help me in this.</p>

<p>You can check the live version here: <a href="http://www.solvonix.co.in/clients/demo/" rel="nofollow">http://www.solvonix.co.in/clients/demo/</a></p>

<p>Revised code is :</p>

<pre><code>$(window).keydown(function(event){
 if (event.which == 37) {
// left arrow; go back
currImg=$(this).parent().index();
 currImg--
 if(currImg&lt;=0){
  currImg = 0 
 }    
 changeImageHandler();
 }
 if (event.which == 39) {
currImg=$(this).parent().index();
 currImg++
 prevImg = currImg
 if(currImg&gt;=allImg){
  currImg = allImg 
 }
                                    currImg++
 changeImageHandler();
// right arrow; go forward
 }
</code></pre>

<p>});</p>
