2
\$\begingroup\$

I've written my own jQuery code to make a little slideshow. Functionally, it does what I want but I find that the jQuery animations are fairly jerky and because I'm a beginner in JS and web development I don't really know where to go to improve it.

You can see it here.

function screen_width() {
    return window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
}

function photo_widths() {
    var lengths = [];
    var photos = $('.photospan').children();
    for (var i = 0; i < photos.length; i++) {
        lengths.push($(photos[i]).width());
    }
    return lengths;
}

function centre(photo) {
    console.log('photo is ' + photo.data);
    photo = photo.data;
    var widths = photo_widths();
    var centre_point = 0;
    for (var i = 0; i < photo; i++) {
        console.log(widths[i]);
        centre_point += widths[i];
    }
    console.log('widths: ' + widths);
    console.log('computed centre point: ' + centre_point);
    centre_point += widths[photo] / 2;
    var ml = screen_width() / 2 - centre_point;
    console.log('computed ml: ' + ml);
    var total = 0;
    $.each(photo_widths(),function() {
        total += this;
     });
    if (ml > 0) {
        ml = 0;
    } else if (ml < screen_width() - total) {
        ml = screen_width() - total;
    }
    $('.photospan').animate({'margin-left': ml + 'px'}, 300);
    var active = $('.photospan').data('active-photo');
    var active_photo = $('.photospan').children()[active];
    $(active_photo).css('opacity', 0.7);
    var active_photo = $('.photospan').children()[photo];
    $(active_photo).css('opacity', 1.0);
    $('.photospan').data('active-photo', photo);

}

function shift(right) {
    console.log('move right?' + right);
    if ($('.photospan').is(':animated')) {
        console.log('moving');
        return;
    }
    var active = $('.photospan').data('active-photo');
    console.log('active is ' + active);
    var active_photo = $('.photospan').children()[active];
    var nphotos = $('.photospan').children().length;
    var nextactive = right ? active - 1 : active + 1;
    if (nextactive === -1) {
        nextactive = nphotos - 1;
    } else if (nextactive === nphotos) {
        nextactive = 0;
    }
    centre({data: nextactive});
}

function render(urls) {
    var height = 430;

    var container = $('.photospan-container');
    var photosdiv = $('.photospan');
    photosdiv.css({'overflow': 'hidden',
                   'width': '20000px'});
    photosdiv.data('activePhoto', 0);
    for (var i = 0; i < urls.length; i++) {
        var img = $('<img/>', {
            src: urls[i],
            height: height,
            class: 'spanphoto'
        });
        img.css('float', 'left');
        if (i > 0) {
            img.css('opacity', 0.7);
        }
        img.appendTo(photosdiv);
        img.click(i, centre);
    }
}

$(document).ready(function() {
    var images = $('.photospan').children('img');
    var urls = images.map(function() {return $(this).attr('src');}).get();
    $('.photospan > img').remove();
    console.log(urls);
    render(urls);
});

$(document).keydown(function(event) {
    if (event.keyCode === 39) {
        shift(false);
    } else if (event.keyCode === 37) {
        shift(true);
    }
});

The HTML for the relevant div is as simple as this - that is, I just construct the actual HTML and CSS on the fly.

<div class="photospan-container">
  <div class="photospan">
    <img src="../img/liz-photos/DSC_0020webedit.jpg" data-title="title">
    <img src="../img/liz-photos/DSC_0022webedit.jpg" data-title="title">
    <img src="../img/liz-photos/DSC_0024webedit.jpg" data-title="title">
    <img src="../img/liz-photos/DSC_0025webedit.jpg" data-title="title">
    <img src="../img/liz-photos/DSC_0029webedit.jpg" data-title="title">
    <img src="../img/liz-photos/DSC_0040webedit.jpg" data-title="title">
    <img src="../img/liz-photos/DSC_0038webedit.jpg" data-title="title">
    <img src="../img/liz-photos/DSC_0045webedit.jpg" data-title="title">
  </div>
</div>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.