Javascriptings/slideshow.html at master · methodog/Javascriptings · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html lang="en" id="vam-ac-uk">
<head>
    <meta charset="utf-8">
    <title>slideshow</title>
    <style type="text/css">
        .hide { display:none!important; }
        #slideshow, .slide { height:100%; width:100%; overflow:hidden; position:relative; }
        img, .slide { height:auto; max-width:100%; }
        .slide { position:absolute; top:0; left:0; }
    </style>
</head>

<body>

<div id="slideshow"></div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {

    /* slideshow */
    $('#slideshow').each(function(){
        var ss = this, $ss = $(this), sc = 0,
            dir = -1, /* slide direction */
            e = 2, /* slide exposure time (s) */
            t = 1000; /* slide animation time (ms) */
        ss.newSlides = function(callback){
            var img;
            $.ajax('http://www.vam.ac.uk/api/json/museumobject/search?materialsearch=glass&random=0&images=1&limit=3&offset='+Math.ceil(Math.random()*10)*3, { dataType:'jsonp' }).done( function(data){
                var slides = data.records;
                for( s in slides ){
                    img = slides[s].fields.primary_image_id;
                    $ss.prepend('<div class="slide hide"><img src="http://media.vam.ac.uk/media/thira/collection_images/'+img.substr(0,6)+'/'+img+'_jpg_l.jpg" alt="" /></div>');
                }
                if( !!callback ){ callback.call(this) }
            });
        }
        ss.newSlides(function(){ss.init()});
        ss.init = function(){
            sc = $ss.find('.slide').length;
            $ss.find('.slide:nth-child('+sc+')').removeClass('hide').addClass('on');
            $ss.data('c',1);
            ss.showSlide(dir);
        };
        ss.showSlide = function(d){
            var $so = $ss.find('.on'), /* slide-out */
                $si = $ss.find('.slide:nth-child('+(((($so.index()+(d<0?-1:1))+sc)%sc)+1)+')'), /* slide-in */
                l = $ss.find('.slide').length,
                c = $ss.data('c');
            if( c >= e ){
                if( l===sc ){ ss.newSlides() }
                $so.removeClass('on');
                $si.removeClass('hide').addClass('on').show(0).css({'left':0});
                $si.stop(true,true).css({'left':(d<0?1:-1)*$ss.width()+'px'}).animate({'left':0}, t);
                $so.stop(true,true).animate({'left':(d<0?-1:1)*$ss.width()+'px'}, t);
                c = 0;
                if( l>=sc ){ setTimeout(function(){$ss.find('.slide:last-child').remove()}, t) }
            }
            $ss.data('c',++c);
            ss.t = setTimeout(function(){ss.showSlide(d);}, 1000);
        };
    });

});
</script>
</body>
</html>