我的JavaScript图片库滑块的右滑块不起作用，而我的左滑块是

Question

I have an image gallery slider on my personal website (you can check it out here for a visual: http://www.alexmarvick.com/gallery.html ), written with the following HTML and Javascript:

HTML (Uses fontawesome icons and images are in my directory)

    <section class="body-home" id="body-gallery">
        <div id="gallery-outline">
            <img id="gallery-enlarged-image" src="image1.jpg">
            <p id="caption">Study Abroad Trip in 2014: Weekend Trip to Paris, France. Missing it! February 2014</p>
            <div id="gallery-scroll-selectors">
                <i class="fa fa-arrow-circle-left" id="left-arrow" aria-hidden="true"></i>
                <i class="fa fa-arrow-circle-right" id="right-arrow" aria-hidden="true"></i>
            </div>

            <div id="gallery-image-options-outline">
                <li><img class="small-images" id="1" src="image1.jpg"></li>
                <li><img class="small-images" id="2" src="image2.jpg"></li>
                <li><img class="small-images" id="3" src="image3.jpg"></li>
                <li><img class="small-images" id="4" src="image4.jpg"></li>
                <li><img class="small-images" id="5" src="image5.jpg"></li>
                <li><img class="small-images" id="6" src="image6.jpg"></li>
                <li><img class="small-images" id="7" src="image7.jpg"></li>
                <li><img class="small-images" id="8" src="image8.jpg"></li>
                <li><img class="small-images" id="9" src="image9.jpg"></li>
            </div>
        </div>
    </section>

JavaScript

var caption = "";
var imageNo = 1;

var photoChange = function() {

    if (imageNo == 0) {
        imageNo = 1;
        caption = "Study Abroad Trip in 2014: Weekend Trip to Paris, France. Missing it! February 2014";
        $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    }

    else if (imageNo == 10) {
        imageNo = 9;
        caption = "Standing out in front of Microsoft's campus, taken by a friend. August 2015";
        $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    }

    else if (imageNo == 1) {
        caption = "Study Abroad Trip in Spring 2014: Weekend Trip to Paris, France. Missing it! February 2014";
    }

    else if (imageNo == 2) {
        caption = "Our cat, Cosmo";
    }

    else if (imageNo == 3) {
        caption = "Gonzaga University Graduation, May 2016";
    }

    else if (imageNo == 4) {
        caption = "Gonzaga University Graduation Picture 2, May 2016";
    }

    else if (imageNo == 5) {
        caption = "Me with my parents in Burch Bay, WA. June 2016";
    }

    else if (imageNo == 6) {
        caption = "Me striking a pose with my Senior Design Project. April 2016";
    }

    else if (imageNo == 7) {
        caption = "Our cat, Rudy";
    }

    else if (imageNo == 8) {
        caption = "At the Orleans arena in Vegas watching Gonzaga Basketball take the WCC title. March 2016";
    }

    else if (imageNo == 9) {
        caption = "Standing out in front of Microsoft's campus, taken by a friend. August 2015";
    }

    else {
        caption = "No Image Here Yet";
    }

    $('#caption').html(caption);

};

$('#gallery-enlarged-image').hide();
$('#gallery-enlarged-image').fadeIn(500);

$('.small-images').click(function() {

    var bigImageSrc = $(this).attr("src");
    $('#gallery-enlarged-image').attr("src", bigImageSrc);

    imageNo = $(this).attr("id");

    $('#gallery-enlarged-image').hide();
    $('#gallery-enlarged-image').fadeIn(500);

    photoChange();

});

$('#left-arrow').click(function() {

    $('#gallery-enlarged-image').hide();

    imageNo -= 1;

    $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    $('#gallery-enlarged-image').fadeIn(500);

    photoChange();

});

$('#right-arrow').click(function() {

    $('#gallery-enlarged-image').hide();

    imageNo += 1;

    $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    $('#gallery-enlarged-image').fadeIn(500);

    photoChange();

});

When you load the site at first, the left and right buttons work correctly. However, when you click on any random image in the gallery below, the right arrow becomes defunct but the left arrow still works just fine. When I open up the console, I will get an error saying:

"image71.jpg:1 GET http://www.alexmarvick.com/image71.jpg 404 (Not Found)"

It appears that there is a parsing issue, as when the '#right-arrow'.click function is activated, imageNo behaves as a string (in this example, I clicked on the 7th image, then as soon as I clicked the right arrow it parsed '1' at the end of it as opposed to adding it to equal 8). It doesn't do this with the left arrow, however, and the code is identical for both the left and right.

Answer 1

Try

imageNo = parseInt(imageNo) + 1;

instead of

imageNo += 1;

in your $('#right-arrow').click() -handler.

The problem is that imageNo is a string, while you're trying to use it as an int.

EDIT : Or (I think a better option) you could just change the line

imageNo = $(this).attr("id");

to:

imageNo = parseInt($(this).attr("id"));

from the $('.small-images').click() -handler.

Answer 2

Before proposing an actual answer i'd like to make a few suggestion :

• you should make an array of objects (easier to maintain and add things in or remove some)

• you should really work something with the % operator to change images ( -1%x is equal to x-1 )

• when you have multiple else if and condition is always in regard of value you must use a switch or else code will enlarge in a very useless way

• starting from anything else then 0 is always trickier then actually starting from 0 (remember, quite everything starts indexing at 0)

So there we go for the answer (and a bit of rework to ease future work on it):

First we need a constructor function (easiest way with objects) :

function GallerySlide(url, caption){
  this.url = url || "#";
  this.caption = caption || "No image here yet";/*if you don't pass a caption it will assign the left operand of the OR*/
  this.isEqualTo = function(obj){
    return this.url == obj.url;
  }/*for small image click*/

}

Then we'll use an array of those objects to ease control :

var gallery=[];

You do need to keep in mind that arrays start indexing at 0 but if you really want to start at 1 you can still assign a "nullified" object as the first object as follows:

gallery.push( new GallerySlide() );

Then each time you add an image (if you keep the pattern : index 1 : image1.png) you can use :

gallery.push( new GallerySlide("image"+gallery.length+".jpg", /*caption goes here*/) );/*as the left adjacent spot will always be the index gallery.length*/

Then we need a global variable to hold the current gallery position :

var gallery_index = 1;/*only set this after all images are loaded in array*/

Now here's the fun part, the reworked left arrow (you can deduce right arrow and initialization from it) :

$('#left-arrow').click(function(){
  gallery_index-=1;
  gallery_index%=gallery.length;
  if(gallery_index == 0){
    gallery_index = gallery_length-1;
  }
  $('#gallery-enlarged-image').fadeOut(500);/*way smoother look*/
  $('#gallery-enlarged-image').attr("src",gallery[gallery_index].url);
  $('#gallery-enlarged-image').fadeIn(500);
  $('#caption').html(gallery[gallery_index].caption);
}

SIDENOTE: initialize right after assigning 1 to gallery_index

Now that we have left and right and initialization, let's give a look at click on a little image :

$('.small-images').click(function(){
  var si = new GallerySlide( $(this).attr("src") );
  var toChange = new GallerySlide();
  for(var i = 1 ; i<gallery.length ; i++){
    if( gallery[i].isEqualTo(si) ){
      toChange = gallery[i];
      gallery_index = i;
      break;
    }
  }
  $('#gallery-enlarged-image').fadeOut(500);/*the following seems like it could go in a function in which you always pass the array and the current index (or have them global to it)*/
  $('#gallery-enlarged-image').attr("src",gallery[gallery_index].url);
  $('#gallery-enlarged-image').fadeIn(500);
  $('#caption').html(gallery[gallery_index].caption);
}

There you go, you should try it out (maybe you'll encounter a need of debug but I'm pretty confident) and all in all I think it's way more flexible in terms of adding new images and all this stuff.