1 $(function() {

     2     

     3     var currentSlide = 0, jqwin = $(window), jqcanvas = $(".imagezone"), jqcaption = $(".caption"), margin = 50;

     4     

     5     function showSlide() {

     6         var slide = slides[currentSlide];

     7         

     8         jqcaption.find("h2").text(slide.title);

     9         jqcaption.find("h3").text(slide.author);

    10         jqcaption.find("p").text(slide.description);

    11         

    12         if (slide.image && slide.image.width) {

    13             var ww = jqwin.width(),

    14                 wh = jqwin.height(),

    15                 cw = jqcaption.outerWidth(),

    16                 ch = jqcaption.outerHeight(),

    17                 wi = slide.image.width,

    18                 hi = slide.image.height,    

    19                 w1 = ww - 2 * margin, w2 = w1 - cw

    20                 h1 = wh - 2 * margin, h2 = h1 - ch,

    21                 ra = Math.max(

    22                     Math.min((h1 / hi), (w2 / wi)),

    23                     Math.min((h2 / hi), (w1 / wi))

    24                 ),

    25                 wa = wi * ra, ha = hi * ra,

    26                 xa = ww - margin - wa,

    27                 rb = Math.max(ww / wi, wh / hi),

    28                 wb = wi * rb, hb = hi * rb,

    29                 xb = (ww - wb) / 2, yb = (wh - hb) / 2;

    30             jqcanvas.attr({

    31                 width: ww,

    32                 height: wh

    33             });

    34                             

    35             var ctx = jqcanvas[0].getContext('2d');

    36             

    37             ctx.drawImage(slide.image, xb, yb, wb, hb);

    38             

    39             ctx.fillStyle = 'rgba(255,255,255,.65)';

    40             ctx.fillRect(0,0,ww,wh);

    41             

    42             ctx.fillStyle = 'rgba(0,0,0,.3)';

    43             ctx.fillRect(margin + 4, wh - margin - ch + 4, cw, ch);

    44             ctx.fillRect(xa + 4, margin + 4, wa, ha);

    45             

    46             ctx.drawImage(slide.image, xa, margin, wa, ha);

    47             

    48         }

    49     }

    50     

    51     function nextSlide() {

    52         currentSlide = (currentSlide + 1) % slides.length;

    53         showSlide();

    54         return false;

    55     }

    56     

    57     function prevSlide() {

    58         currentSlide = (currentSlide > 0 ? currentSlide - 1 : slides.length - 1);

    59         showSlide();

    60         return false;

    61     }

    62     

    63     var hideTO, isInArrow = false, jqArrows = $(".arrow-wrap");

    64     function resetTO() {

    65         clearTimeout(hideTO);

    66         if (!isInArrow) {

    67             hideTO = setTimeout(function() {

    68                 jqArrows.hide();

    69             }, 1000);

    70         }

    71     }

    72     $("body").mousemove(function() {

    73         jqArrows.show();

    74         resetTO();

    75         return false;

    76     });

    77     jqArrows.hover(function() {

    78         isInArrow = true;

    79         resetTO();

    80     }, function() {

    81         isInArrow = false;

    82         resetTO();

    83     });

    84     

    85     $(".left-arrow").click(prevSlide);

    86     $(".right-arrow").click(nextSlide);

    87     

    88     slides.forEach(function(slide, k) {

    89         slide.image = new Image();

    90         slide.image.onload = function() {

    91             if (k === currentSlide) {

    92                 showSlide();

    93             }

    94         };

    95         slide.image.src = imgurlbase + slide.url;

    96     });

    97     

    98     showSlide();

    99     

   100     jqwin.resize(showSlide);

   101     

   102 });