JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="guriguri">{"src":"http://farm6.static.flickr.com/5222/5634362386_bc0f67434d_o.jpg"}</div>

JavaScript

// forked from Akiyah's "guriguri simple" http://jsdo.it/Akiyah/guriguri_simple
// (1) default (width=image_width, height=width*3/4)
// (2) set height (width=image_width)
// (3) set width, height

$(function() {
  $("div.guriguri").each(function() {
    var divtag = $(this);
    var jsontext = divtag.text();
    var json = $.parseJSON(jsontext);
    var src = json.src;
    var imgtag = $("<img src='" + src + "' />");

    divtag.css("height", "0px");
    divtag.css("overflow", "hidden");
    divtag.html("");
    divtag.append(imgtag);
    
    imgtag.bind('load', function() {
      var width = json.width;
      var height = json.height;
      var count = json.count;
      if (!width) {
        width = imgtag.width();
      }
      if (!height) {
        height = width * 3 / 4;
      }
      var w_count = imgtag.width() / width;
      var h_count = imgtag.height() / height;
      if (!count) {
        count = w_count * h_count;
      }

      divtag.css("width", width + "px");
      divtag.animate({height: height + "px"}, 1000);
      
      divtag.mousemove(function(event) {
        var x = event.pageX - $(event.currentTarget).offset().left;

        x = Math.min(x, width - 1);
        x = Math.max(x, 0);
        
        var page = Math.floor(count * x / width);
        var t_page = page % h_count;
        var l_page = (page - t_page) / h_count;

        imgtag.css("marginTop", - t_page * height + "px");
        imgtag.css("marginLeft", - l_page * width + "px");
      });
    });
  });
});