jquery - How do I get my thumbnails to scroll left and right on click with jquery?

Question

So here is all of my code for my slideshow and everything works except the thumbnails moving left to right on mouse click of #slideshow-thumbs-prev and #slideshow-thumbs-next.

I am new at jquery so please be as descriptive as possible. Let me know whats going on here if I am missing something or the code isn't labeled correctly to my html. Thanks

 <script type="text/javascript">

var index = 0;

$(document).ready(function(){
function next() {
    index++;
    if ( index > 11 ) {
        index = 0;
    } // end if 
    show_slide();
} // end next()

function prev() {
    index--;
    if ( index < 0 ) {
        index = 11;
    } // end if
    show_slide();
} // end prev()


$("#slideshow-thumbs-next").click(function(){
    index ++;
    if ( index > 11 ) {
        index = 0;
    }           
    var position = $('#slidesthumbnails>div').eq(index).position();
    $('#slidesthumbnails').animate({left:-position.left+'px',top:-position.top+'px'});
});

$("#slideshow-thumbs-prev").click(function(){
    index --;
    if ( index > 0 ) {
        index = 11;
    }           
    var position = $('#slidesthumbnails>div').eq(index).position();
    $('#slidesthumbnails').animate({left:-position.left+'px',top:-position.top+'px'});
});

function show_slide() {
    $("#slideshow-container>.slideshow-stage>img").eq(index).fadeIn(500).siblings().fadeOut(500);
    $("#slide-caption-box>.slide-caption>div").eq(index).fadeIn(500).siblings().fadeOut(500);
    //highlight thumbnail
    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").removeClass("selected").eq(index).addClass("selected");
}

$(function() {
    $( "#slideshow-container>.slideshow-stage>img" ).aeImageResize({ height: 476, width: 680 });
});

    $("#slideshow-container>.slideshow-stage>img").eq(0).siblings().hide();
    $("#slide-caption-box>.slide-caption>div").eq(0).siblings().hide();

    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").click(function(){
        var index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        $("#slideshow-container>.slideshow-stage>img").eq(index).fadeIn(500).siblings().fadeOut(500);
        $("#slide-caption-box>.slide-caption>div").eq(index).fadeIn(500).siblings().fadeOut(500);       
    });

    //click functions,
    $("#slideshow-container>.slideshow-stage>.slideshow-next").click(function(){
        index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        show_slide();
    });

    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").click(function(){
        index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        show_slide();

    });

            $("#slideshow-next").click( next );
            $("#slideshow-prev").click( prev );

            $("#slideshow-thumbs-next").click( next );
            $("#slideshow-thumbs-prev").click( prev );


    $(function() {           
    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").mouseover(function (event) {
        $(this).siblings().stop().animate({opacity: 0.4}, 200);       
        $(this).stop().animate({opacity: 1.0}, 200); 
        event.stopPropagation();     // don't fire the body click handler
    });
    });

    $(function() {           
    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").mouseout(function (event) {             
        $(this).siblings().stop().animate({opacity:1.0}, 200);       
        $(this).stop().animate({opacity: 1.0}, 200); 
        event.stopPropagation();     // don't fire the body click handler
    });

    }); 
    });

<LINK REL="SHORTCUT ICON" HREF="http://benlevywebdesign.webatu.com/images/favicon.ico">

</head>

<body>

<div id="container">
<div id="headerReplacement">
  <p>&nbsp;</p>
  <p>benlevygraphics</p>
</div>

<span class="class1"><div id="mainnav">
      <ul>
        <li><a href="http://benlevywebdesign.webatu.com/"><img src="../images/homevector_v1.png" alt="" onmouseout="this.src='../images/homevector_v1.png'" onmouseover="this.src='../images/homevector_v2.png'"></a></li>
      </ul>
      </div></span>
      <div id="titlegallery">
      <p class="photographs">"The Best" - A Graphic Design Gallery</p>
      </div>

<!--This is the gallery code here-->
<div id="gallery1">

    <div id="slideshow-container">

    <div class="slideshow-stage">
        <img src="img/Building.jpg" />
        <img src="img/Magazine Cover.jpg" />
        <img src="img/Clocks.jpg" />
        <img src="img/hitsdraft.jpg" />
        <img src="img/regenwebsite.jpg" />
        <img src="img/BrendanSchaffer.jpg" />
        <img src="img/logobml.jpg" />
        <img src="img/studiox.jpg" />
        <img src="img/benlevygraphicsspace.jpg" />
        <img src="img/five.jpg" />
        <img src="img/backofcdcover.jpg" />
        <img src="img/frontofcdcover.jpg" />
    </div>


    <div id="slide-caption-box">
    <div id="imagedescription">
        <img src="../images/Image-Description.png">
    </div>
        <div class="slide-caption">
                <div>
                    <h4>Vector Building</h4>
                    <p>Drawn using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Magazine Cover</h4>
                    <p>designed using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Clocks</h4>
                    <p>designed using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Hole in the Sky Tours Website</h4>
                    <p>website draft designed using Illustrator  <a href="http://benlevywebdesign.webatu.com/holeintheskytours"> View the finished Hole in the Sky Tours Website here</a> </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Regen Website Mock-up</h4>
                    <p>designed using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>BrendanSchaffer Logo Design</h4>
                    <p>designed using Illustrator </p><p class="creatednote">*HS</p>
                </div>

                <div>
                    <h4>B M L Logo</h4>
                    <p>Version 1 designed using Illustrator </p><p class="creatednote">*HS</p>
                </div>

                <div>
                <h4>Studio X</h4>
                    <p>Studio X Bio Page Mock-Up designed using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Ben Levy Graphics</h4>
                    <p>Ben Levy Graphics name logo designed using Photoshop </p><p class="creatednote">*HS</p>
                </div>

                <div>
                    <h4>Five</h4>
                    <p>A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop </p><p class="creatednote">*HS</p>
                </div>

                <div>
                    <h4>Five</h4>
                    <p>A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop </p><p class="creatednote">*HS</p>
                </div>

                <div>
                    <h4>Five</h4>
                    <p>A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop </p><p class="creatednote">*HS</p>
                </div>

                </div>
                </div>

    <div id="thumbnails-container">
            <a class="prev" id="slideshow-thumbs-prev"><span>prev</span></a>
            <a class="next" id="slideshow-thumbs-next"><span>next</span></a>

        <div id="thumbnails-wrapper">
        <div id="thumbnails-box">
    <div class="thumbnails"><img src="imglorez/Building.jpg" width="58" height="40" /></div>      
    <div class="thumbnails"><img src="imglorez/Magazine Cover.jpg" width="31" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/Clocks.jpg" width="62" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/hitsdraft.jpg" width="56" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/regenwebsite.jpg" width="60" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/BrendanSchaffer.jpg" width="50" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/logobml.jpg" width="55" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/studiox.jpg" width="56" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/benlevygraphicsspace.jpg" width="64" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/five.jpg" width="29" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/backofcdcover.jpg" width="52" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/frontofcdcover.jpg" width="80" height="40" /></div>
</div>
</div>
</div>

    <div id="slideshow-prev"></div>
    <div id="slideshow-next"></div>

</div>
</div>

score 0 · Accepted Answer

好吧，有一个 js 错误.. 不知道这是否会导致某些事情：

Uncaught Error: Syntax error, unrecognized expression: >
http://analytics.hosting24.com/count.php
Failed to load resource

jquery - How do I get my thumbnails to scroll left and right on click with jquery?

1 回答 1

Related

Reference